tinymce编辑器内容值未显示

Question

我将使用tinymce html编辑器

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

向下箭头单击时看到图像单击编辑器位置不变，但内容为null

我可以将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

您遇到的问题与如何操作DOM的insertBefore和insertAfter有关。 如果从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。 删除将正确地从<textarea>断开TinyMCE的连接。 您可以使用基础<textarea>的ID来定位TinyMCE的特定实例： tinymce.remove('#idoftextarea');
3. 在您移动<textarea>重新初始化TinyMCE的对<textarea> 。 您可以使用tinymce.init({}); 就像您第一次加载页面时一样，将TinyMCE重新加载到<textarea> 。

如果执行这些步骤，则在DOM中移动<textarea>后，内容仍应正确显示。