Tinymce 更改完整的 html 文档答案

【问题标题】：Tinymce changes full html documentTinymce 更改完整的 html 文档
【发布时间】：2014-03-31 21:48:06
【问题描述】：

我正在尝试将完整的 html 文档加载到 TinyMCE 中。我已经能够做到这一点，但是当我检查 DOM 时，我发现它确实不是我的完整文档。 Body 标签已被 TinyMCE 的 Body 标签更改，并且 head 标签中缺少一些内容。

我需要我的身体标签类和属性，因为我有从身体标签向下延伸的功能和样式。因为我的标签不存在，所以我的页面已损坏，并且我没有更改 html 文档的选项。

为什么 Tinymce 不能按原样使用我的文档并为其添加功能？

这是我的初始化程序。

tinymce.init({
                selector: "textarea",
                menubar:false,
                statusbar: true,
                entity_encoding : "raw",
                plugins: ["paste fullpage image link textcolor"],
                paste_text_sticky : true,
                toolbar: "SAVE | RENAME | DELETE | WBW | SOURCE | forecolor | image | link ",
                height : 650,
                document_base_url: baseURL,
                file_browser_callback: function(field_name, url, type, win) {
                    img_file_node = win.document.getElementById(field_name);
                    if(type=='image') {
                        htmlEditor.find('#my_form input').click();
                    }
                },
                setup : function(ed) {
                                        //adding buttons here
                                    }
   });

编辑：

这是我的html示例

<body class="myprod-class" data-product="myprod" data-template="spread-template">
    <section class="card">
        <figure class="informalfigure">...

但是当我检查 TinyMCE 创建的 iframe 时，我看到了这个

<body id="tinymce" class="mce-content-body" onload="window.parent.tinymce.get('content').fire('load');" contenteditable="true" style="">             
     <section class="card">
       <figure class="informalfigure">

【问题讨论】：

您是否尝试添加“valid_elements : '[]'”
@Bene 是的，我试过了

标签： javascript jquery html tinymce tinymce-4

【解决方案1】：

这是由于通过 Tinymce 插件创建 iframe 造成的。

也许您可以使用 Javascript / JQuery 在 iframe 中将类和数据属性分配给 <body>。

将这些更改应用到 Tinymce 的“oninit”回调中

function myCustomOnInit() {
        $('iframe').contents().find('body')
          .addClass("myprod-class");
          .attr({
            data-product:"myprod", 
            data-template:"spread-template"
           });
}

tinyMCE.init({
        ...
        oninit : myCustomOnInit
});

注意： oninit 回调指定当所有编辑器实例完成初始化时要执行的函数。这很像 HTML 页面的 onload 事件。

【讨论】：

我认为我做不到，加载的文件可以是任何东西，我不知道属性和类是什么。它需要更加动态
您应该进行一些检查，因为 iframe 创建是动态完成的。您需要修改与 iframe 创建相关的插件代码。