Если вы какое-то время играли с 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? Вот список дополнительных тем, которые я рассмотрел в своих предыдущих уроках:

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

Первоначально опубликовано на сайте go.tinymce.com 3 апреля 2018 г.