Невозможно отобразить динамически добавляемую текстовую область как TinyMCE 4.1.8

У меня есть форма, в которой я статически создаю редактор TinyMCE, который отлично работает.

Теперь я хочу динамически добавить текстовое поле, которое я хочу отобразить как редактор TinyMCE.

Согласно тому, что я нашел в сети, я написал следующий код:

function add_new_agpoitext() {
    $("#agpoitextslist").append(
'<div class="row"> \
    <div class="col-md-8"> \
        <input type="hidden" name="agpoitexts[' + next_agpoitext + '][sequence]" value="' + next_agpoitext + '"/> \
        <div class="form-group textarea"> \
            <label class="control-label" for="agpoitexts-' + next_agpoitext + '-paragraph"><?=__("Paragraphe ");?>next_agpoitext + ":"</label> \
            <textarea name="agpoitexts[' + next_agpoitext + '][paragraph]" class="form-control" placeholder="Texte" rows="5" id="agpoitexts-' + next_agpoitext + '-paragraph"></textarea> \
        </div> \
    </div> \
</div>');

    next_agpoitext = next_agpoitext + 1;

    var textAreaID = "#agpoitexts-" + next_agpoitext + "-paragraph";

    $(textAreaID).ready(function(){
        tinyMCE.execCommand('mceAddEditor', true, textAreaID); 
    });

    return 1;
}

А функция инициализации TinyMCe следующая:

tinymce.init({
    selector: "textarea",
    ....
    setup : function(ed) {

        ...
    },
});

Поэтому, когда я вызываю add_new_agpoitext (), вызывается tinymce.init (), и я вижу, что идентификатор текстового поля правильный. Но текстовое поле не отображается как редактор TinyMCE.

Чего не хватает в моем коде?

Я видел этот Как динамически добавить tinymce 4.x в текстовое поле?, и поэтому я попытался добавить функцию tinymce.init () после моего вызова append (), но это ничего не меняет, и, поскольку вызывается мой исходный tinymce.setup (), я не думаю, что проблема здесь.


javascript html jquery tinymce-4
person fralbo    schedule 06.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы слишком рано увеличиваете next_agpoitext. Вы должны увеличить его после использования его для построения переменной textAreaID.

Допустим, next_agpoitext имеет значение 3:

  1. Вы создаете <textarea> с id="agpoitexts-3-paragraph".
  2. Вы увеличиваете next_agpoitext. Итак, теперь он имеет значение 4.
  3. Вы используете увеличенное значение для создания переменной textAreaID, которой присваивается значение #agpoitexts-4-paragraph
  4. Вы пытаетесь вызвать команду mceAddEditor TinyMCE в текстовой области, которой фактически не существует в DOM.

Изменить: Кроме того, согласно документации jQuery, вы не используете .ready () правильно. Событие ready запускается только для всего документа, вы не можете добавить его прослушиватель для обычных элементов DOM:

Метод .ready () может быть вызван только для объекта jQuery, соответствующего текущему документу, поэтому селектор можно не указывать.

В заключение:

  1. Увеличьте next_agpoitext после построения переменной textAreaID
  2. Удалите вызов .ready(), который завершает tinyMCE.execCommand
person Victor Stanciu    schedule 07.07.2015
comment
Вы правы, это было действительно глупо. Я проверил, что id был правильным в вызове init (), но не проверил, что он правильный для созданного текстового поля. Большое спасибо. - person fralbo; 07.07.2015