Как заставить TinyMCE 4.x работать с динамически добавляемыми DIV?

Мне нужно использовать TinyMCE 4.x для редактирования содержимого в несколько разделов DIV. Это работает хорошо, за исключением случаев, когда я динамически добавляю больше DIV, нажимая кнопку (jquery).

Новый DIV отображается ниже других, но его нельзя редактировать сразу. После сохранения файла и перезагрузки новый DIV также доступен для редактирования.

Я вижу, что все существующие DIV имеют id="mce_nn", где nn – это уникальный номер. Это, по-видимому, должно быть добавлено самим TinyMCE.

Когда я динамически добавляю новые DIV, у них нет добавленного идентификатора. Однако после сохранения файла и перезагрузки страницы к нему добавляется идентификатор.

Есть ли способ заставить TinyMCE динамически редактировать новые DIV? (Все новые DIV имели общий класс.)

Это моя текущая инициализация TinyMCE:

<script type="text/javascript">
tinymce.init({
    selector: "div.mydivsclass",
    inline: true,
 theme: "modern",
    width: "100%",
    height: 300,

Я ценю любую помощь :-)


jquery tinymce tinymce-4
person Preben    schedule 09.10.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я сделал это, создав функцию, которая активировала новый редактор DIV:

 <script type="text/javascript">
    function ActivateTinyMCE() {
        tinymce.init({
selector: "div.myclass",
inline: true, etc

И затем добавьте, как один из последних шагов, ActivateTineMCE() в мою функцию «insert-a-new-div»:

ActivateTinyMCE()

Затем моя функция вставки запускает инициализацию TinyMCE для нового DIV, и она работает хорошо.

person Preben    schedule 03.11.2014

arrow_upward
0
arrow_downward

Я сделал это, вызвав функцию ActivateTinyMCE() при щелчке DIV, но встроенная панель инструментов tinymce у меня не работала. Экземпляр редактора Tinymce инициализировался, но панель инструментов не отображалась. Я решил эту проблему, запустив событие focus при инициализации tinymce, как показано ниже.

<script type="text/javascript">
function ActivateTinyMCE() {
    tinymce.init({
         selector: "div.myclass",
         inline: true,
         ...,
         setup : function(editor) {
            editor.on('init', function() {
                editor._eventDispatcher.fire("focus");
         });
        }
    });
}


<div class="myclass" onclick="ActivateTinyMCE()"/>
person Bharat Darakh    schedule 29.03.2017