Question

我有一个站点，该站点在加载时会初始化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>

Answer 1

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

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

代码类似于：

tinymce.activeEditor.setMode('readonly');

...或...

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

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

1 个答案: