@model List<jcperrestclient.JcpeRwebsitePageContentCommitteeDOA>
@{
Layout = "_Layout";
ViewData["Title"] = "Index";
}
<h2>Committee</h2>
<body>
<div>
<main role="main" class="pb-3">
<div class="container-fluid box mt-5">
<div class="row">
@for (var i = 0; i < Model.Count; i++)
{
<div class="col-md-10" id="section1">
@Html.AntiForgeryToken()
<input type="hidden" asp-for="@(Model[i].CreatedBy)" />
<input type="hidden" asp-for="@(Model[i].CreatedDate)" />
<input type="hidden" asp-for="@(Model[i].UpdatedDate)" />
<input type="hidden" asp-for="@(Model[i].UpdatedBy)" />
<div class="form-group row">
<div class="col-md-6">
<strong><label asp-for="@(Model[i].CreatedBy)"></label></strong>
<input asp-for="@(Model[i].CreatedBy)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].CreatedDate)"></label></strong>
<input asp-for="@(Model[i].CreatedDate)" readonly style="border: none" />
</div>
<div class="col-md-6">
<strong><label asp-for="@(Model[i].UpdatedBy)"></label></strong>
<input asp-for="@(Model[i].UpdatedBy)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].UpdatedDate)"></label></strong>
<input asp-for="@(Model[i].UpdatedDate)" readonly style="border: none">
</div>
</div>
<div class="form-group row">
<label id="lblSuccess" style="color: red">@ViewBag.lblSuccess</label>
</div>
<div class="form-group row">
<label asp-for="@(Model[i].PageTitle)" class="control-label col-md-1"></label>
<div class="col-md-5">
<textarea asp-for="@(Model[i].PageTitle)" class="form-control" placeholder="Enter your text here" id="txtEditor"></textarea>
</div>
</div>
<div class="form-group row">
<span asp-validation-for="@(Model[i].HtmlContentCurrent)" class="text-danger">this is the spot?</span>
<textarea asp-for="@(Model[i].HtmlContentCurrent)" id="froala-editor" name="Content"></textarea>
</div>
<div class="form-group row">
<div class="col-md-1 offset-md-1">
<input type="button" id="buttonCancel" name="stringValue" value="Cancel" title="Cancel these changes" class="btn btn-outline-dark" />
</div>
<div class="col-md-2">
<input type="button" id="buttonSave" name="stringValue" value="Save" title="Save your changes" class="btn btn-outline-dark" />
</div>
<div class="col-md-3">
<input type="button" value="Show/Hide Preview" title="Html Preview" onclick="showDiv()" class="btn btn-outline-dark" />
</div>
</div>
</div>
<div class="col-md-2" id="section2" style="font-family: arial; text-align: left;">
<h4>Page Content Properties</h4>
<strong><label asp-for="@(Model[i].AdminControllerName)"></label></strong>
<input asp-for="@(Model[i].AdminControllerName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].AdminControllerAction)"></label></strong>
<input asp-for="@(Model[i].AdminControllerAction)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PublicControllerName)"></label></strong>
<input asp-for="@(Model[i].PublicControllerName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PublicControllerAction)"></label></strong>
<input asp-for="@(Model[i].PublicControllerAction)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PublicViewName)"></label></strong>
<input asp-for="@(Model[i].PublicViewName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].HasRightSideBar)"></label></strong>
<input asp-for="@(Model[i].HasRightSideBar)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].RightSideBarName)"></label></strong>
<input asp-for="@(Model[i].RightSideBarName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].HasPartialView)"></label></strong>
<input asp-for="@(Model[i].HasPartialView)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].PartialViewName)"></label></strong>
<input asp-for="@(Model[i].PartialViewName)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].IsDeleted)"></label></strong>
<input asp-for="@(Model[i].IsDeleted)" readonly style="border: none" />
<br />
<strong><label asp-for="@(Model[i].DateDeleted)"></label></strong>
<input asp-for="@(Model[i].DateDeleted)" readonly style="border: none" />
<br />
</div>
<div id="previewDiv" style="display:none; border: 1px solid #ccc; padding: 10px; margin-top: 20px;">
<h4>HTML Preview</h4>
<div id="previewContent"></div>
</div>
}
</div>
</div>
</main>
</div>
<!-- Include Froala Editor CSS -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include Froala Editor JS -->
<script src="https://cdn.jsdelivr.net/npm/froala-editor/js/froala_editor.pkgd.min.js"></script>
<!-- Include Bootstrap JS (if needed) -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Include your custom JS -->
<script src="~/js/site.js" asp-append-version="true"></script>
<script>
//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!");
}
}
});
</script>
</body>我有冲突的 jquery 版本，我相信是最新的 jquery 3.6.0 和 Froala 的 2.4.2。 当进程加载 jquery，然后加载 Froala 时，它们进行交互，Froala 会覆盖 3.6.0。 我需要两个版本协同工作，以便我可以保存到我的数据库中。过去几年我也遇到过类似的问题，这就是我没有冲突并设置超时的地方。 如果我错过了更好地解释我的问题的对话，请为我指出方向，谢谢。
我尝试过 noConflict() 但没有效果。 尝试将所有代码移至实际页面，但没有成功。 取出 Jquery 3.6.0，这进一步破坏了我的代码。 我已经为没有胜利的 Froala 设定了暂停。
满足您要求的另一种方法，您可以通过以下代码获取值：
htmlContentCurrent: $j('#previewContent').text()
顺便说一句，您的视图包含 for 循环，您所做的无法在每个循环中获得正确的值。您需要为输入定义唯一的 id 并使用
data-index<input type="hidden" asp-for="@(Model[i].CreatedBy)" id="CreatedBy_@i" />
<input type="hidden" asp-for="@(Model[i].CreatedDate)" id="CreatedDate_@i" />
<input type="hidden" asp-for="@(Model[i].UpdatedDate)" id="UpdatedDate_@i" />
<input type="hidden" asp-for="@(Model[i].UpdatedBy)" id="UpdatedBy_@i" />
//other code no need change....
<div class="form-group row">
<label asp-for="@(Model[i].PageTitle)" class="control-label col-md-1"></label>
<div class="col-md-5">
<textarea asp-for="@(Model[i].PageTitle)" id="PageTitle_@i" class="form-control" placeholder="Enter your text here"></textarea>
</div>
</div>
//other code no need change....
<div class="col-md-2">
<input type="button" data-index="@i" class="buttonSave" name="stringValue" value="Save" title="Save your changes" class="btn btn-outline-dark" />
</div>
然后获取如下数据值：
var index = $j(this).data('index');
console.log(index)
var formData = {
createdBy: $j('#CreatedBy_' + index).val(),
createdDate: $j('#CreatedDate_' + index).val(),
updatedBy: $j('#UpdatedBy_' + index).val(),
updatedDate: $j('#UpdatedDate_' + index).val(),
pageTitle: $j('#PageTitle_' + index).val(),
htmlContentCurrent: $j('#previewContent').text()
};