TinyMCE 5不会将现有内容加载到编辑器中，但是代码在代码视图中

Question

我正在将TinyMCE升级到版本5.x，并遇到一些兼容性问题。 尽管4.x可以正常工作，但我需要更改一些自定义按钮，而大多数情况下一切正常。 如果我将文本添加到编辑器中并单击“保存”，则它可以在一组页面上使用。 在另一页上，我似乎无法将当前内容输入编辑器，但是代码视图显示了代码。 然后，如果我将该代码粘贴到测试站点中（重新安装tiny5）并保存到代码视图中并保存，则它会在编辑器中正常显示。

我在用

formJson['DESCRIPTION'] = $('iframe').contents().find('body').html();

填充div-哦，是的，我正在使用div作为选择器。 在这种情况下，编辑器的行为就像是只读的，没有内容显示。

和

$('.tox-edit-area').html($('iframe').contents().find('body').html()).show();

从我的TinyMCE init()函数内部，该函数在编辑器中显示了内容，但是它们是只读的-似乎如此。

控制台中也没有显示任何错误。

有谁可以分享智慧的明珠？ 谢谢！

更新

// selector is passed into the function
var html = $(selector).html();//this is successful
tinymce.init({

    selector: selector,
    setup: function(editor) {
        editor.setMode('design');
        editor.setContent(html);//this does not load the code in design mode
        alert(html);// this alerts the expected code

    },


/// could any of this additional code below be causing an issue in tiny5?
    invalid_styles: {
        '*': 'font-size,font-family', // Global invalid styles
        'a': 'background' // Link specific invalid styles
    },
    valid_styles: {
        '*': 'border,font-size',
        'div': 'width,height'
    },
    font_formats: 'Arial=arial, helvetica, sans-serif;',
    toolbar: toolbtns,
    plugins: 'code table lists',
    //~ image_advtab: true,
    menubar: false,
    statusbar: false,
    //~ force_p_newlines : false,
    //~ force_br_newlines : true,
    //~ forced_root_block : '',
    width: '100%',
    height: '500px',
    relative_urls: false,
    content_css: "/include/css/bootstrap.css",
    images_dataimg_filter: function(img) {
        return img.hasAttribute('internal-blob');
    },
});

我究竟做错了什么？ ：P

Answer 1

您正在使用单个选择器来获取要加载的内容，并且将其用作TinyMCE的目标元素来替换。 我无法重现您的失败，但是在您的情况下， setContent是不必要的，删除它可以解决问题。 如果目标元素包含您的内容，则无需手动设置内容。 TinyMCE将为您做到这一点。

这是一个使用您的代码将setContent注释掉的示例：

http://fiddle.tinymce.com/QGgaab

Answer 2

如果您尝试将内容加载到编辑器中，那么我将执行以下操作之一，因为它们遵循编辑器的设计/ API。

1. 在init()编辑器之前，将内容加载到<div>或<textarea> 。
2. 在TinyMCE初始化之后，使用setContent() API将数据加载到TinyMCE中。

您似乎依赖于编辑器用来与编辑器进行交互的基础HTML结构，并且（如您所见）这并不能保证随着时间的推移保持不变。

注意： 如果在初始化编辑器后更新基础元素（ <div>或<textarea> ），TinyMCE将看不到该更新。 很难说这是否是您遇到的问题的一部分，尽管内容存在于基础<div>或<textarea>中，但内容仍未重新加载到编辑器中。

我还会注意到TinyMCE具有只读模式配置选项：

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#setmode

...您可以用来启用或禁用其只读模式。