Загрузка данных в TinyMCE программно - PullRequest
Новая
       24

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

0 голосов
/ 03 января 2019

У меня есть несколько текстовых областей, которые я хотел бы улучшить с помощью 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();
    });
    }

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

Ответы [ 2 ]

0 голосов
/ 10 января 2019

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

0 голосов
/ 04 января 2019

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

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

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

...