将 TinyMCE 动态添加到 div

Question

当我在静态 div 上启动 tinymce 时，它​​运行良好。 我正在使用这个，以便用户可以发布新帖子。

然后，当用户想要通过循环编辑从数据库显示的帖子时，他可以点击编辑并将一个新的 tinymce 实例附加到内容 div。到目前为止一切顺利。

问题是，在更新编辑后的帖子时，ajax 无法序列化 tinymce 编辑器。

 <div id="content_text_<?php echo($id); ?>" class="event-edit-input textarea-content">
     <?php echo($content); ?>
 </div>

这是用户点击编辑时调用的函数：

/////// create a tinymce instance and apend it to the given element //////
function create_tinymce(element){
tinymce.init({
    selector: element,
    skin: 'jb',
    content_css : 'css/tinymce-style.css',
    menubar: false,
    toolbar: 'undo redo | bold italic fontsizeselect | alignleft aligncenter alignright alignjustify | link',
    fontsize_formats: '8px 10px 12px 14px 18px 24px 36px',
    entity_encoding: 'named'
});
}

然后是发布表单的函数：

/////// posting the form ////
function post_form(form, script, editor){

tinyMCE.triggerSave(true, true);

var serialized_form = $("#"+form).serialize();

alert(serialised_form);

}

当我提醒序列化的表单数据时，除了 tinymce 内容之外的所有内容都会显示出来。

我不明白，与我的工作设置的唯一区别是后者是静态的，而不是动态创建的。

谁能帮帮我...？

干杯 克里斯

Answer 1

您可以尝试将 triggerSave() 函数添加到 TinyMCE 初始化中，以便在编辑器的更改事件中自动更新基础字段...

tinymce.init({
    selector: "textarea",
    .
    .
    setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }
});

这将消除您尝试通过 AJAX 发布表单时执行此操作的需要。

更新：您的选择器是 STRING 还是 DOM 元素？根据我在您的代码中看到的内容

function create_tinymce(element){
tinymce.init({
  selector: element,
  skin: 'jb',
  ...

看起来您正在尝试提供一个 DOM 元素（或 jQuery 包装的 DOM 元素）。选择器参数需要一个字符串，如此处所述：

https://www.tinymce.com/docs/configure/integration-and-setup/#selector

如果你硬编码（作为测试）一个字符串，那行得通吗？