Uncaught TypeError: $(...).froalaEditor не является функцией.... Это моя проблема ⇐ Jquery

[Anonymous]

Код: Выделить всё

@model List
@{
Layout = "_Layout";

ViewData["Title"] = "Index";
}
Committee





@for (var i = 0; i < Model.Count; i++)

{

@Html.AntiForgeryToken()






[b][/b]


[b][/b]


[b][/b]


[b][/b]




@ViewBag.lblSuccess







this is the spot?












[h4]Page Content Properties[/h4]
[b][/b]


[b][/b]


[b][/b]


[b][/b]


[b][/b]


[b][/b]


[b][/b]


[b][/b]


[b][/b]


[b][/b]


[b][/b]


[h4]HTML Preview[/h4]



}


















//This makes jquery a variable and i can implement it like dependency injection this way it does not interact with Froala-->
var $j = jQuery.noConflict();

$j(document).ready(function () {
setTimeout(function () {
initializeFroala();
}, 1000); // 1 second delay to ensure Froala is fully loaded
function initializeFroala() {
new FroalaEditor('#froala-editor', {
key: "xxxxxxxxxxxx",
attribution: false,
heightMin: 300,
heightMax: 600,
toolbarSticky: true,
imageInsertButtons: ["imageBack", "|", "imageUpload", "imageByURL"],
quickInsertButtons: ['image', 'table', 'ul', 'ol'],
toolbarButtons: {
'moreText': {
'buttons': ['bold', 'italic', 'underline', 'textColor', 'insertHR', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'clearFormatting'],
'buttonsVisible': 5
},
'moreLink': { 'buttons': ['|', 'insertLink'] },
'moreParagraph': {
'buttons': ['|', 'outdent', 'indent', 'formatUL', 'formatOLSimple', 'align', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'quote'],
'buttonsVisible': 5
},
'moreImage': { 'buttons': ['|', 'insertImage'] },
'moreRich': {
'buttons': ['|', 'insertTable', 'emoticons', 'specialCharacters']
},
'moreMisc': {
'buttons': ['undo', 'redo', 'spellChecker', 'fullscreen', 'selectAll', 'html', 'help'],
'align': 'right',
'buttonsVisible': 2
}
},
imageUploadURL: getCurrentPath(),
imageUploadParams: {
id: 'my_editor'
},
events: {
'contentChanged': function () {
document.getElementById('previewContent').innerHTML = this.html.get();
}
}
});
}
function getCurrentPath() {
var uploadURL;
switch (window.location.hostname) {
case 'intranet':
uploadURL = '/EditingPages/JCPeRServiceAPI/UploadFiles';
break;
case 'devi':
uploadURL = '/EditingPages-devi/JCPeRServiceAPI/UploadFiles';
break;
case 'localhost':
uploadURL = '/JCPeRServiceAPI/UploadFiles';
break;
default:
uploadURL = '/default-endpoint'; // Default upload URL
}
return uploadURL;
}
// Recognize the save button click event
$j('#buttonSave').on('click', function (e) {
e.preventDefault();  // This overrides the default form submission so that the following code can be implemented
var formData = {
createdBy: $j('#CreatedBy').val(),
createdDate: $j('#CreatedDate').val(),
updatedBy: $j('#UpdatedBy').val(),
updatedDate: $j('#UpdatedDate').val(),
pageTitle: $j('#PageTitle').val(),
htmlContentCurrent: $j('#froala-editor').froalaEditor('html.get')
};
// This is the save request with ajax
$j.ajax({
url: '@Url.Action("SaveCommitteeContent", "Home")', // This is the backend endpoint
type: 'POST', // What type of endpoint it is
data: JSON.stringify(formData), // Converts the data to JSON format for the database to accept the information
contentType: 'application/json; charset=utf-8',
headers: {
'RequestVerificationToken': $j('input[name="__RequestVerificationToken"]').val() // Token for security
},
success: function (response) {
if (response.success) {
$j('#lblSuccess').text('Content saved').css('color', 'green');
} else {
$j('#lblSuccess').text('Content failed to save').css('color', 'red');
}
},
error: function () {
$j('#lblSuccess').text('An error has broken your existence, welcome to the Matrix Neo').css('color', 'blue');
}
});
});
function showDiv() {
var previewDiv = document.getElementById('previewDiv');
var previewContent = document.getElementById('previewContent'); // Add reference to content area
if (previewDiv) {
if (previewDiv.style.display === "none") {
previewDiv.style.display = "block";
// Update the preview content with the HTML from Froala
previewContent.innerHTML = FroalaEditor.INSTANCES[0].html.get();
} else {
previewDiv.style.display = "none";
}
} else {
console.error("Preview div not found!");
}
}
});

У меня есть конфликтующие версии jquery: последняя версия jquery 3.6.0, а затем версия Froala 2.4.2 Я верю. Когда процесс загружает jquery, а затем Froala, они взаимодействуют, и Froala перезаписывает версию 3.6.0. Мне нужно, чтобы обе версии работали в унисон, чтобы я мог сохранить их в своей базе данных. Были подобные проблемы, которые я видел в прошлые годы, именно здесь я получил noConflict и установил тайм-аут. Если я пропустил разговор, который лучше объяснил мою проблему, просто укажите мне направление. Спасибо.
Я попробовал noConflict(), но безрезультатно.
Пытался переместить весь код на реальную страницу безуспешно.
Удален Jquery 3.6.0, и это еще больше нарушает мой код.
Я установил тайм-аут для Froala без победы.

Подробнее здесь: https://stackoverflow.com/questions/789 ... my-problem