Как обернуть элемент TinyMCE пользовательским HTML-кодом без внешнего JavaScript

Question

Я пытаюсь обернуть некоторые элементы TinyMCE своим собственным HTML-кодом.

Например, давайте рассмотрим, что пользователь хочет добавить элемент Media или Image, пользователь просто щелкнет значок элемента Media или Image, и ему будет предложено ввести ссылку, и TinyMCE сгенерирует необходимый HTML-код для что.

Чего я хочу добиться, так это обернуть этот сгенерированный HTML-код в мой собственный код То есть, я просто получу это:

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

Для элемента Media я попытался использовать media_url_resolver, но у меня это не работает, потому что эта функция не дает возможности перенести поведение по умолчанию, а только переписать всю логику (что является плохой идеей) .

Может кто-нибудь сказать мне, есть ли какое-нибудь нативное решение TinyMCE, чтобы получить это (без какого-либо специального внешнего 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>';
    }
  });