Как добавить дополнительный тег к тегу изображений по умолчанию в Tinymce

Question

In Tinymce Я хочу вставить тег <img ... > по умолчанию в другой дополнительный тег для централизованных изображений и добавить дополнительный класс для создания масштабируемых изображений в моем содержание

По умолчанию Tinymce создает следующий код html при добавлении нового изображения:

<p> <img ... > </p>

То, что мне нужно и нужно, выглядит примерно так:

<div class='zoomable content-img'> <img ... > </div>

Как я могу реализовать это в Tinymce ?

Answer 1

Одним из вариантов будет прослушивание события BeforeSetContent. Затем, если предстоящий контент представляет собой тег <img/>, его можно заменить на завернутую версию разметки HTML в обработчике событий.

Вот небольшая скрипка, показывающая простую (то есть не очень надежную) (в терминах проверки тега img) пример доказательства концепции: http://fiddle.tinymce.com/CQgaab/2

Вот еще некоторые сведения о событии BeforeSetContent: https://www.tiny.cloud/docs/advanced/events/#beforesetcontent