javascript - 如何在没有外部 JavaScript 的情况下使用自定义 HTML 代码包装 TinyMCE 元素

Question

我正在尝试用我的自定义 HTML 代码包装 TinyMCE 的一些元素。

例如，假设用户想要添加媒体或图像元素，用户只需点击媒体或图像元素图标，就会要求他输入链接，TinyMCE 会生成所需的 HTML 代码那个。

我想要实现的是用我的自定义代码包装生成的 HTML 代码。即，所以我会简单地得到这个:

<div>
    ... What TinyMCE has generated for the image or media ...
</div>

对于 Media 元素，我尝试使用 media_url_resolver，但这对我不起作用，因为此函数无法包装默认行为，而只能重写整个逻辑(这是个坏主意)。

有人能告诉我是否有任何 TinyMCE native 解决方案可以做到这一点(无需任何自定义外部 JavaScript)？

Answer 1

没有配置选项来做你想做的事，但当内容设置到编辑器中并在插入之前修改它时，你会收到通知:

http://fiddle.tinymce.com/prgaab

关键代码在这里:

editor.on('BeforeSetContent', function (e) {
    //Look at this object - it tells you a bunch of stuff about the insert activity
    //such as was it via paste?  Was there selected content in TinyMCE that will be overwritten?  
    //Using the browser tooling you can inspect the e object and learn a lot about the content that will be set.
    console.log(e); 

    //Then you can modify that content if you want...for example:
    if (e.content.startsWith("<a href=")) {
        console.log('ADDING CONTENT');
        e.content = '<p>BEFORE</p>' + e.content + '<p>AFTER</p>';
    }
  });