tinymce 编辑器内容值未显示

Question

我会用tinymce html编辑器

我的问题是当编辑器位置改变时编辑器将变为空

单击向下箭头时查看图像编辑器位置未更改但内容为空

我可以使用javascript向上箭头和向下箭头代码

$("body").on("click", ".upclass", function() {
     var click=this.id;



     console.log(click);    
 $('.div'+click+':parent').insertBefore($('.div'+click+':parent').prev());
});

 $("body").on("click", ".downclass", function() {

    var downclick=this.id;



    var demo=$('.div'+downclick+':parent');
     $(demo).insertAfter($(demo).next());
});

如何更改位置 textarea id 动态给出意味着 id 不是静态的。

Answer 1

您运行遇到的问题与 insertBefore 和 insertAfter 如何操纵 DOM 有关。如果您从 DOM 中删除基础 <textarea>，您将断开它与 TinyMCE 的连接。当您将 <textarea> 重新插入 DOM 时，它是 "new" <textarea> 并且 TinyMCE 不再连接到 <textarea>.

要成功移动 <textarea> 你需要做 3 件事...

调用 triggerSave() 以使用 TinyMCE 的当前值更新基础 <textarea>。 TinyMCE 不会在您输入时保持 <textarea> 同步 - 这对编辑器来说会带来很大的开销，因此它不会在您输入时执行此操作。 triggerSave() 将编辑器的当前内容推回 <textarea>。 https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave
使用 remove() 方法从您要移动的 <textarea> 中删除 TinyMCE。从 <textarea> 中正确删除 "disconnect" TinyMCE。您可以使用底层 <textarea> 的 id 来定位特定的 TinyMCE 实例：tinymce.remove('#idoftextarea');
移动 <textarea> 后，在 <textarea> 上重新初始化 TinyMCE。您可以像第一次加载页面时那样使用 tinymce.init({}); 将 TinyMCE 重新加载到 <textarea>.

如果按照这些步骤操作，在 DOM.

中移动 <textarea> 后，内容仍应正确显示

tinymce 编辑器内容值未显示

tinymce editor content value not showing

javascript

tinymce