使特定的 TinyMCE TextArea 只读或设计
Make Specific TinyMCE TextArea ReadOnly or Design
我有一个包含多个 textarea
字段的 Razor 页面。在我使用 TinyMCE 之前,我使用以下 Javascript 到 enable/disable 基于复选框选择的特定 textarea
。
if ('@Model.IssueData.rootCauseIdentified' == "true") {
document.getElementById("rootcause").disabled = false;
document.getElementById("rootcause").style.backgroundColor = "white";
} else {
document.getElementById("rootcause").style.backgroundColor = "lightgray";
}
我现在已经将 textarea
转换为使用 TinyMCE。我如何将这一项 textarea
改为 enable/disable 呢?我已经创建了 2 个初始部分,其中 1 个目标是除了我想更改的单个 textarea
。
tinymce.init({
selector: '.tinymce1',
menubar: false,
plugins: [
'advlist autolink lists link charmap',
'searchreplace',
'insertdatetime table paste wordcount'
],
toolbar: 'undo redo | ' +
'bold italic underline forecolor backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent |link charmap ' +
'removeformat'
});
tinymce.init({
selector: '.toenabledisable',
menubar: false,
plugins: [
'advlist autolink lists link charmap',
'searchreplace',
'insertdatetime table paste wordcount'
],
toolbar: 'undo redo | ' +
'bold italic underline forecolor backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent |link charmap ' +
'removeformat'
});
我遇到了以下代码,但不知道如何修改它以仅针对我想要的 textarea
(特别是 tinymce.activeEditor.mode.set
部分)。
function toggleEditorMode(mode) {
if (mode) {
tinymce.activeEditor.mode.set("design");
} else {
tinymce.activeEditor.mode.set("readonly");
}
编辑:解决方案
根据下面的评论,我能够想出以下对我有用的代码:
if (elementid == "rootcause") {
if (element.checked) {
tinymce.get('rootcause').mode.set("design");
} else {
tinymce.get('rootcause').mode.set("readonly");
}
}
当你想定位一个特定的编辑器实例时,你可以使用 tinymce.get()
API 通过底层文本区域的 ID 来定位一个:
https://www.tiny.cloud/docs/api/tinymce/root_tinymce/#get
您还可以使用 tinymce.editors
获取所有编辑器的数组。这将为您提供页面上所有实例化编辑器的数组。
我有一个包含多个 textarea
字段的 Razor 页面。在我使用 TinyMCE 之前,我使用以下 Javascript 到 enable/disable 基于复选框选择的特定 textarea
。
if ('@Model.IssueData.rootCauseIdentified' == "true") {
document.getElementById("rootcause").disabled = false;
document.getElementById("rootcause").style.backgroundColor = "white";
} else {
document.getElementById("rootcause").style.backgroundColor = "lightgray";
}
我现在已经将 textarea
转换为使用 TinyMCE。我如何将这一项 textarea
改为 enable/disable 呢?我已经创建了 2 个初始部分,其中 1 个目标是除了我想更改的单个 textarea
。
tinymce.init({
selector: '.tinymce1',
menubar: false,
plugins: [
'advlist autolink lists link charmap',
'searchreplace',
'insertdatetime table paste wordcount'
],
toolbar: 'undo redo | ' +
'bold italic underline forecolor backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent |link charmap ' +
'removeformat'
});
tinymce.init({
selector: '.toenabledisable',
menubar: false,
plugins: [
'advlist autolink lists link charmap',
'searchreplace',
'insertdatetime table paste wordcount'
],
toolbar: 'undo redo | ' +
'bold italic underline forecolor backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent |link charmap ' +
'removeformat'
});
我遇到了以下代码,但不知道如何修改它以仅针对我想要的 textarea
(特别是 tinymce.activeEditor.mode.set
部分)。
function toggleEditorMode(mode) {
if (mode) {
tinymce.activeEditor.mode.set("design");
} else {
tinymce.activeEditor.mode.set("readonly");
}
编辑:解决方案 根据下面的评论,我能够想出以下对我有用的代码:
if (elementid == "rootcause") {
if (element.checked) {
tinymce.get('rootcause').mode.set("design");
} else {
tinymce.get('rootcause').mode.set("readonly");
}
}
当你想定位一个特定的编辑器实例时,你可以使用 tinymce.get()
API 通过底层文本区域的 ID 来定位一个:
https://www.tiny.cloud/docs/api/tinymce/root_tinymce/#get
您还可以使用 tinymce.editors
获取所有编辑器的数组。这将为您提供页面上所有实例化编辑器的数组。