Если вы какое-то время играли с TinyMCE, вероятно, вы использовали консоль JavaScript своего браузера, чтобы посмотреть, как ведет себя редактор. Если нет, это отличный способ взаимодействовать с TinyMCE API на лету.
В этом посте я расскажу об использовании консоли браузера с TinyMCE. В частности, когда редактор вложен в один или несколько фреймов в DOM.
Браузерные консоли широко распространены во всех современных браузерах. Вот как выглядит взаимодействие с TinyMCE в Chrome:
Консоль может получить доступ к любому объекту JavaScript, присутствующему в DOM. В приведенном выше случае редактор JS инкапсулирован в объект tinymce
, поэтому мы можем легко получить доступ к его свойствам (majorVersion
, activeEditor
и т. д.) с помощью консоли.
Использование консоли
Прохладный! Теперь, когда мы это знаем, давайте воспользуемся этим знанием, чтобы поиграть с TinyMCE Fiddle. Мы запустим простой тестовый экземпляр TinyMCE, чтобы поэкспериментировать с ним. Вот как это выглядит в Chrome:
Давайте посмотрим, какую версию TinyMCE мы используем. tinymce.majorVersion + "." + tinymce.minorVersion
должно помочь.
О, Боже. Что-то пошло не так.
Ах. tinymce
указывает на элемент раскрывающегося меню на боковой панели. Что дает? Редактор рядом! Он должен бытьв DOM, верно?
Использование консоли с фреймами
Строго говоря, редактор находится в DOM. На данный момент он просто не виден в консоли браузера. Давайте выясним, где именно он находится, используя Правый клик -> Проверить элемент.
Редактор на этой странице, в частности, находится внутри iframe (в данном случае он называется previewframe
). Консоль не сможет получить доступ к тому, что находится внутри iframe, если мы не удостоверимся, что контекст консоли установлен на iframe редактора.
Все, что нам нужно сделать здесь, это переключить контекст консоли браузера. В Chrome меню для этого находится здесь:
Если мы переключим контекст на previewframe
, мы сможем получить доступ к редактору и его API, как если бы он был на верхнем уровне.
Чудесно! Это также будет работать для вложенных фреймов n-го уровня. Просто выберите правильное имя iframe, в котором находится редактор.
Браузеры, отличные от Chrome
Меню переключателя контекста находится в другом месте в зависимости от браузера. Вот основные 3 (за исключением Chrome) в произвольном порядке:
Fire Fox
Интернет-проводник
Сафари
Вывод
Возможность доступа к любому уровню DOM через консоль браузера расширит возможности TinyMCE на всех уровнях разработки. Пока вы можете найти меню переключения контекста в своем браузере, вы сможете выполнять вызовы API к объекту TinyMCE независимо от того, в каком iframe он находится.
Другие ресурсы
Все еще горите желанием узнать больше о TinyMCE? Вот список дополнительных тем, которые я рассмотрел в своих предыдущих уроках:
- TinyMCE, DOM и вы
- Создание пунктов контекстного меню для TinyMCE
- Создание сочетаний клавиш для TinyMCE
- Получение содержимого TinyMCE в ваше приложение: расширенный обзор
Если у вас есть тема или учебник, который вы хотели бы видеть здесь, в блоге, сообщите нам об этом в комментариях, и мы посмотрим, сможем ли мы написать его для вас!
Первоначально опубликовано на сайте go.tinymce.com 3 апреля 2018 г.