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 时，它的“新”<textarea> 和 TinyMCE 不再连接到 <textarea>。

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

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

如果您按照这些步骤操作，在 DOM 中移动 <textarea> 后，内容仍应正确显示。