Javascript TinyMCE insertHTML 修改部分HTML标签

发布于06月03日

我在Tinymce 6的编辑中有一些内容.我移动了光标并将其放在内容中，然后执行

tinymce.activeEditor.insertContent(`<span class='dummy'>
                        <div><span style="font-style:italic;font-weight:bold;text-decoration:underline;">This Text is BOLD</span></div>
                        <div><span style="font-style:italic;">This text is Italic</span></div>
                        <div><span style="text-decoration:underline;">This Text is&#160; Underlined</span></div>
                      </span>`, {format: 'html'});

当我执行此操作时，div个元素将被删除.

我可以看到BeforeSetContent活动中的内容.但在SetContent事件中，内容被修改，div被删除.有什么办法可以防止这种行为吗？

我试着添加

valid_children: '+div[span], +span[div]'

在编辑器配置中.

我希望在不修改标签的情况下将html内容添加到tinymce 6编辑器中

推荐答案

The default behavior is to remove certain elements, such as <div>, when they are inserted using the insertContent method.
But you can override this behavior by customizing the editor's schema and adding a rule to allow the <div> element:

tinymce.init({
  selector: '#your-selector',
  // other configurations...
  setup: function (editor) {
    editor.on('BeforeSetContent', function (e) {
      // Allow the <div> element in the content
      e.content = e.content.replace(/<div>/g, '<div data-mce-bogus="1">');
    });
  },
  valid_elements: 'div[*]' // Allow all attributes on <div> elements
});