I have the following code used to divide 2 tabs, one tab to submit data using Ckeditor, one tab to save data using Codemirror.
<div class="form-group">
<label class="form-label" asp-for="Content"></label> <span asp-validation-for="Content"></span>
<div class="controls">
<div class="nav-tabs-outer">
<ul class="nav nav-tabs js-tabs">
<li class="active text-center"><a href="#tab1" data-toggle="tab">TAB1</a></li>
<li class="text-center"><a href="#tab2" data-toggle="tab">TAB2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" role="tabpanel" class="tab-pane active fade in">
<textarea id="ricktextContent" seo-page-content class="form-control form-control-t" rows="3" placeholder="Mô tả" asp-for="Content"></textarea>
</div>
<div id="tab2" role="tabpanel" class="tab-pane fade in">
<textarea id="ricktextContentDiv" class="form-control form-control-t" rows="3" placeholder="Mô tả" asp-for="Content"></textarea>
</div>
</div>
</div>
</div>
</div>
and I have the following js snippet to add and edit data
var _page = 1;
$(function () {
$("[search-advance]").toSearch();
$("[button-popup]").toPopup();
$("[button-open-file-manager]").toButtonOpenFile();
$("[button-submit]").toSubmit(null, null, function () {
onRefeshValue();
});
$("[button-delete]").toDelete();
$("[button-post]").toPost(null, null, function () {
onRefeshValue();
});
getDataGrid(1, true);
});
var cm1;
function initRickText() {
cm1 = CodeMirror.fromTextArea(document.getElementById("ricktextContentDiv"), {
lineNumbers: true,
mode: "text/html",
matchBrackets: true,
lineWrapping: true,
autoRefresh: true
});
$("ricktextContent").toRickText({ customConfig: 'configRickText.js', filebrowserImageBrowseUrl: "@Url.Action("Manager", "FileManager", new { area = "Base", path = "Blog/" })" });
$("[button-update-status]").toPost(function (rs, $this) {
swal({
title: "Thông báo!",
text: rs.message,
type: rs.type,
confirmButtonText: "Đóng!"
});
setTimeout(function () {
$this.button('reset');
setTimeout(function () {
statusButtonEdit(false);
}, 200);
}, 300);
coSoYTeId
}, function () {
return serializedData;
});
}
function onRefeshValue() {
document.getElementById("ricktextContentDiv").value = cm1.getValue();
}
function getDataGrid(page, first = false) {
_page = page;
$("[grid-index]").toGridView(first, page, function () {
if (decodeURIComponent(location.hash.substr(1)) == "openPopup") {
try {
// $("[data-open-edit]")[0].click();
const fullUrl = window.location.href;
const url = new URL(fullUrl);
const code = url.searchParams.get("code");
const language = url.searchParams.get("language");
if (!code || !language) {
return
}
const hidePopup = $("#edit-by-code-and-language").attr("href", `/Admin/Manager/StaticInformationManager/EditByCodeAndLanguage?language=${language}&code=${code}`);
hidePopup.click();
} catch (e) {
console.log(e);
}
}
});
}
function reGetDataGrid(e) {
if (e != null) {
_page = 1;
$("[name='language']").val($(e).attr("data-val"));
}
getDataGrid(_page, false);
}
function onRefesh() {
cm1.refresh();
};
Now i am facing the error that when i add data i can only add with , means adding with Ckeditor, but adding with Codemirror will be null, I think it’s because of the ordering because when I set first, meaning Codemirror will be in the first tab so it will only add gets data using Codemirror and Ckeditor will be null.
I tried a few ways but they didn’t work very well. I hope everyone can suggest some solutions for me. Sincerely thank
I just want to be able to submit data using both ckeditor and codemirror, not just one of the two