为什么Tinymce第二次无法加载？

Posted 2021-03-27

我有以下代码，以呈现tinymce。它以前工作得很好，但不知道它为什么会突然断裂。首先，它完美地呈现出来。第二次无法加载。其次，我找到了tinymce.editors.length = 1，意思是编辑就在那里。

tinyMCE.init({
    paste_as_text: true,
    mode: 'textareas',
    plugins: ['paste link textcolor'],
    force_br_newlines: true,
    paste_remove_spans: true,
    toolbar: "undo redo | bold italic underline forecolor | link unlink",
    menubar: false,
    statusbar: false,
    browser_spellcheck: true,
    forced_root_block: "",
    setup: function (editor) {
        editor.on('init', function() {
            $('#loading_gfx').css('display', 'none'); 
        });

    }
});

解决方案我找到了

if (tinymce.editors.length > 0) {
    tinymce.execCommand('mceFocus', true, textArea_id );       
    tinymce.execCommand('mceRemoveEditor',true, textArea_id);        
    tinymce.execCommand('mceAddEditor',true, textArea_id);
}

但我无法理解为什么它突然断裂，我有最新的小mce版本4.2.3任何人都知道原因。

答案

它没有第二次加载的原因是因为你还没有定义selector属性通过它在textarea中的id绑定到init({})。 init选择器属性需要在id之前使用#。虽然execCommand不期望在id之前的#。

html

<form>
    <textarea id='instance1'></textarea>
</form> 

JS

var textArea_id = "instance1";

tinyMCE.init({
    //******bind to textarea 
    selector: "#instance1",
    mode: "textareas",
    paste_as_text: true,
    plugins: ['paste link textcolor'],
    force_br_newlines: true,
    paste_remove_spans: true,
    toolbar: "undo redo | bold italic underline forecolor | link unlink",
    menubar: false,
    statusbar: false,
    browser_spellcheck: true,
    forced_root_block: "",
    setup: function (editor) {
        editor.on('init', function() {
           $('#loading_gfx').css('display', 'none'); 
        });
    }
});

if (tinymce.editors.length > 0) {
    tinymce.execCommand('mceFocus', true, textArea_id );       
    tinymce.execCommand('mceRemoveEditor',true, textArea_id);        
    tinymce.execCommand('mceAddEditor',true, textArea_id);
}

这是一个有效的DEMO

另一答案

从我看到的，给定解决方案有效，某些东西加载TinyMCE两次，第二次导致错误。查看加载tinymce的javascript，容器元素的html以及javascripts（尤其是jQuery和tinyMCE）在应用程序中加载的顺序会很有帮助。

另一答案

在尝试创建副本之前删除现有实例：

tinymce.remove("#editor");

tinymce.init({ target: document.getElementById('editor') }); 

另一答案

这是tinymce的问题是重新初始化textarea / div以移除现有的使用区域

tinymce.remove(); 

并使用以下代码再次初始化

tinymce.init({
  selector: "textarea"
});

使用tinymce.remove（），它将从现有页面中删除所有编辑器。如果要从页面中删除一个特定编辑器，可以将ID作为参数传递，

tinymce.remove('#your_id').