Как показать редактор TinyMCE в модальном окне jquery по клику

Question

Я сделал заявку на блог, где у меня есть эта форма для написания блога. В нем есть поле title, экземпляр tinymce editor для тела блога, текстовое поле для добавления tags и кнопка отправки.

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

Когда пользователь нажимает на крестик, текст копируется в основной текстовый редактор. Я не очень хорош в javascript и просмотрел несколько блогов, но это не помогло. Любые направления будут действительно оценены. Я добавляю снимок страницы блога.

Answer 1

Вам нужно начать с инициализации вашего редактора TinyMCE чем-то вроде этого (добавьте любые опции, которые вы хотите):

$(function() {
    tinyMCE.init({
            mode: "none",
            theme: "simple",
    });

    //whatever code
});

Вы можете установить любой режим , какой пожелаете, но я собираюсь перейти к динамическому созданию (режим: нет), потому что это дает вам больше контроля. Инициализируйте ваш мод в «любом коде», затем создайте свой редактор внутри модала с кодом ниже:

tinyMCE.execCommand('mceAddControl', false, 'id_of_textarea');

Чтобы получить / установить содержимое вашего редактора, вы должны сделать это:

tinyMCE.activeEditor.getContent();
tinyMCE.activeEditor.setContent('data in here');

Вам необходимо закрыть редактор tinyMCE перед тем, как закрыть модальное окно, иначе он не загрузится при следующем открытии модального окна. Чтобы закрыть его, вам необходимо выполнить следующий код:

tinyMCE.execCommand('mceRemoveControl', false, 'id_of_textarea');