javascript - TinyMCE 5 不会将现有内容加载到编辑器中，但代码位于代码 View 中

Question

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

我正在使用

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

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

和

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

来 self 的 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