Загрузка данных в TinyMCE программно

У меня есть несколько текстовых областей, которые я хотел бы улучшить с помощью tinyMCE. Я могу получить текстовые области для отображения в виде текстовых редакторов, инициализируя TinyMCE во всех текстовых областях на странице, как показано ниже:

$(function () {
    tinymce.init({
        selector: "textarea",
        statusbar: false,
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });
});

Это также обрабатывает процесс синхронизации между редактором Tiny и фактической текстовой областью.

Мой HTML, который заполняет текстовые области выглядит так:

<div id="divEditor1" class="container-fieldset">
    <div class="editor-label-field" style="left: 50px">
        <%:Html.LabelFor(Function(model) model.divEditor1, "divEditor1")%>
    </div>
    <div class="editor-field-fn">
        <%:Html.TextBoxFor(Function(model) model.divEditor1,  New With { Key .class = "ucase-input" } )%>
        <%:Html.ValidationMessageFor(Function(model) model.divEditor1)%>
    </div>
</div>
    <div id="divEditor2" class="container-fieldset">
    <div class="editor-label-field" style="left: 50px">
        <%:Html.LabelFor(Function(model) model.divEditor2, "divEditor2")%>
    </div>
    <div class="editor-field-fn">
        <%:Html.TextBoxFor(Function(model) model.divEditor2,  New With { Key .class = "ucase-input" } )%>
        <%:Html.ValidationMessageFor(Function(model) model.divEditor2)%>
    </div>
</div>
... etc

Я могу прочитать содержимое от редакторов TinyMCE, как это:

for (var i = 0; i < numberOfEditors; i++) {           
    sFieldValue = document.getElementById("FormFieldText" + i).value;
    //sFieldValue = tinyMCE.get("FormFieldText" + i).getContent(); -> or like this, works just as well.
};

Проблема, с которой я столкнулся, заключается в том, чтобы в окне редактора TinyMCE отображался уже существующий текст при загрузке страницы (текст, считанный из базы данных), поскольку он всегда отображается в виде пустого текстового поля. Тем не менее, текст импортируется правильно в исходной области текста в фоновом режиме. Отформатирован и экранирован, так как проходит через некоторые вызовы ajax.

Я видел, что я могу установить содержимое крошечные, как это:

tinyMCE.get('my_editor').setContent(data);

Однако мне нужно сделать это программно, чтобы все текстовые поля на моей странице экспортировали информацию в крошечные. Так же, как выше

setup: function (editor) {
    editor.on('change', function () {
        editor.save();
    });
    }

Кроме того, каково было бы правильное время, чтобы расшифровать текст, чтобы крошечный мог его прочитать? (Я предполагаю, что этот шаг необходим)

Источник

3 ответа

В итоге я проанализировал список активных экземпляров tinymce по идентификатору и заполнил каждый из них соответствующим текстом из текстовых полей на заднем плане.

Источник

Если вы инициализируете TinyMCE на каждом textarea перед каждым textarea содержание TinyMCE не будет автоматически возвращаться и обновляться, когда textarea обновляется с контентом - это просто не работает таким образом.

Вы можете использовать API TinyMCE (как вы уже знаете из своего поста) для обновления содержимого редактора, как только вы получите данные. В качестве альтернативы вы можете отложить инициализацию TinyMCE до тех пор, пока данные не будут загружены в каждый textarea,

Ни один из подходов не является лучшим / худшим - безусловно, существует множество способов решить эту проблему, и все они работают, если реализованы надлежащим образом.

Источник

Я наткнулся на этот пост в поисках решения для возврата данных из базы данных в tinymce, и в итоге я получил

      <textarea id="textarea"><?= htmlspecialchars($description); ?></textarea>

Просто используя php и переменную из массива из базы данных.

Источник
Другие вопросы по тегам