时间戳

首页 > 解决方案 > 如何使用按钮和 Jquery 禁用和启用 TINYMCE

tinymce - 如何使用按钮和 Jquery 禁用和启用 TINYMCE

问题描述

我有一个网站，当它加载时，它会初始化 tinyMCE，然后，当您单击按钮时，它会打开一个模态，在此过程中，它会将一些 HTML 带入模态。

然后在该模态中，还有另一个按钮可以让您编辑模态的内容。在包含加载的 HTML 的 DIV 内部，有一个带有类的 div，可以让 tinyMCE 对其进行编辑。

问题是，当您构建模式的内容并保存时。一切都很好，它以格式存储它，因为当您刷新站点并加载内容时，一切仍然具有正确的格式（粗体、颜色等）。但是当您想要更新内容并单击按钮进行编辑时，我可以选择再次初始化 tinyMCE，并且内容可编辑区域会丢失其格式。

现在我想问题是当我再次初始化导致问题的tinyMCE时，但是当我单击按钮进行编辑时，如何启用和禁用模式内的版本？

我看到有一个 .on() 和 .off() 函数，但我不太了解如何使用它们，文档中不够清楚。

这是我所拥有的样本。

<script>
var pathBotones = "<?=$pathBotones?>";
var modalEditor = {
mode: 'exact',
selector: '.zonaEditable',
menubar: false,
inline: true,
plugins: [
    'link',
    'autolink',
    'lists',
    'save'
],

toolbar: [
    'undo redo | bold italic underline | fontselect fontsizeselect | link',
    'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist'
],
valid_elements: 'strong,em,span[style],a[href]',
valid_styles: {
    '*': 'font-size,font-family,color,text-decoration,text-align'
},
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean',
content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
]
};
tinymce.init(modalEditor);

$(".edit-content").click(function(e) {
e.preventDefault();
//console.log($('.editOptions').css('display'))
if ($('.editOptions').css('display') === 'none') {
    //this is supossed to enable the edition




    tinymce.init(modalEditor);

} else {
    console.log('NOOO se ve')


}
//this is supossed to disable the edition
$(".editOptions").slideToggle();
$(".deleteRowInfoBox").fadeToggle();;

});
</script>

标签： tinymce

解决方案

您可以使用 TinyMCE 的 API 将编辑器上的模式设置为只读。

https://www.tiny.cloud/docs/api/tinymce/tinymce.editormode/#set

代码看起来像：

tinymce.activeEditor.setMode('readonly');

...或者...

tinymce.get('theEditor').setMode('readonly');

推荐阅读