Режим просмотра Tinymce переключается после инициализации

StackOverflow https://stackoverflow.com//questions/25054335

Вопрос

Мой редактор tinymce4+.В большинстве случаев это отлично работает.

Но что бы я ни делал, есть что-то, чего я просто не могу сделать.- мгновенное переключение режима редактора.-

У меня есть страница, на которой пользователи могут выбирать данные, редактировать их и просматривать содержимое.Пользователи нажимают кнопку с названием «viewmode», другая обратная сторона — «editmode».

Я добился этого, поставив два DIVs в одном контейнере, что делает один из них невидимым для выбранных пользователем настроек start-look-settings.Один DIV имеет редактор tinymce, тег iframe, а еще один содержит всего лишь несколько значений HTML, которые хранит редактор.Но побочным эффектом этого является то, что стиль контента может выглядеть по-разному в зависимости от его атрибутов стиля.

Веб-приложение, о котором я сейчас говорю, представляет собой существующую систему, имеющую собственную CSSс.Это настолько сложно, что, увидев это, вы, возможно, захотите убежать от этого.

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

Загрузка нескольких объектов tinymce — это последнее, что мне здесь нужно.

Я могу отключить редактор, настроив атрибут - contenteditable = false - Но тогда элементы панели инструментов становятся плохими парнями здесь.потому что они до сих пор работают.Я скрываю саму панель инструментов, чтобы выполнить эту миссию.

Но вы знаете, моему клиенту это не понравилось, и он настоял на том, чтобы редактор предоставил кнопку печати в режиме просмотра.Это расстраивает.

Итак, если бы вы могли дать мне представление о том, как манипулировать элементами панели инструментов, я думаю, что смогу решить эту проблему.

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

Извините, что пишу все открытым текстом.Но я думаю, что такая проблема не требует никаких кодов.Надеюсь, какой-нибудь гуру tinymce зайдет и поможет мне.

Это было полезно?

Решение

Наконец, я сделал свой редактор переключаемым.

Первый шаг — скрыть все элементы на панели инструментов tinyMCE.

tinyMCE Панели инструментов имеют определенное имя класса, поэтому их можно выбирать с помощью jQuery селектор класса.Но выбор только по имени класса также приводит к появлению нежелательных панелей инструментов, поэтому с этим нужно быть осторожным.

К вашему сведению .eq() API может вам помочь.

после скрытия всех элементов на панели инструментов (кстати, не скрывайте панель инструментов.) сделай это.

tinymce.ui.Factory.create({
    type: 'button',
    cmd: 'mcePrint',
    icon: 'print',
    shortcut: 'Ctrl+P',
    class : 'temp'
}).renderTo(appendTarget);

Это добавит элемент кнопки на панель инструментов.

Но почему-то он не вызывает команду, которую я определил в значении cmd.

Поэтому потребуется прикрепить это событие к кнопке вручную.

tinymce.activeEditor.execCommand('mcePrint');

На данный момент я создал специальную панель инструментов для редактора режима просмотра.Теперь пришло время заморозить фактическое поле контента редактора.

Это очень легко получить после получения содержимого iframe, как jQuery объект.

.contents() API должен вам помочь.

после этого вы можете выбрать <BODY> элемент на вашей стороне, поэтому последнее, что осталось сделать, это указать атрибут и значение «contenteditable=false» тегу body.

Затем ваш редактор зависает.

Вернуться в режим редактирования тоже легко.Просто делайте наоборот.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top