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

我正在将TinyMCE升级到5.x版，并遇到一些兼容性问题。虽然4.x工作正常，但我需要更改一些自定义按钮，所有这些都可以正常工作。如果我将文本添加到编辑器中并单击“保存”，它将在一组页面上工作。在另一个页面上，我似乎无法将当前内容放入编辑器，但代码视图显示了代码。如果我随后将该代码粘贴到测试站点（fresh install tiny5）的代码视图中并保存，它会在编辑器中显示得很好

我正在使用

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

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

及

从我的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

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

在

init（）

编辑器之前，将内容加载到

或

中

初始化TinyMCE后，使用

setContent（）

API将数据加载到TinyMCE中

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

注意：如果在编辑器初始化后更新基础元素（

或

），TinyMCE将看不到该更新。很难判断这是否是您遇到的问题的一部分，因为内容没有重新加载到编辑器中，尽管它存在于底层

或

中

我还要注意TinyMCE有一个只读模式配置选项：

---

…可用于启用或禁用其只读模式。

您使用单个选择器来获取要加载的内容，并将其作为TinyMCE要替换的目标元素。我无法重现您的失败，但在您的情况下，

setContent

是不必要的，删除它可能会解决问题。如果目标元素包含您的内容，则不需要手动设置内容；TinyMCE会帮你的

下面是一个将您的代码与

setContent

一起注释掉的示例：

---

我已经更新了我的问题。内容存在于tinymce的init之前。也许您可以使用tinymce Fiddle或CodePen制作一个示例页面，显示运行代码的问题？-显示div的内容，但不初始化小提琴和您的答案@Spyder的tinyThanks。在查看inspect元素时，我显示可见性：作为内联样式隐藏：它是否也与display:inline块一起隐藏？

visibility:hidden

样式是一个方便的技巧，可以防止未设置样式的内容闪烁。当TinyMCE CSS加载时，它会将

tox TinyMCE

样式覆盖为

visibility:visible

。TinyMCE不会添加

display:inlineblock

。你在哪里做的？当我把它添加到小提琴中时，TinyMCE内容是空白的。编辑器正在使用flex样式，需要

display:flex

才能正确操作。如果希望编辑器位于

内联块

部分，请将该样式添加到编辑器周围的元素中，而不是编辑器本身。

// 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');
    },
});