В данной статье мы рассмотрим основные свойства и методы текстового редактора TinyMCE. Научимся вставлять теги в выделенный фрагмент текста, вставлять теги на место селектора в тексте и получать средствами JS HTML код отредактированного текста и текст без HTML сущностей. Заранее извиняюсь за излишнюю тавтологию в примерах. Посчитал излишнее повторение будет уместным и лишит статью сомнений и недосказанности.

Получить значения текстового редактора

В разделе мы рассмотрим примеры вывода содержимого текстового редактора, выделенных фрагментов в различных вариантах вывода: текст, HTML. Примеры, как правило, будут приведены в различных вариантах: активный TinyMCE редактор, выбор редактора по ID.  Все функции возвращают строковое значение.

Примеры обращения к методу, возвращающему все содержимое текстового редактора TinyMCE в виде HTML кода

Первый пример демонстрирует функцию, при помощи которой мы можем получить HTML содержимое активного текстового редактора TinyMCE:

 tinyMCE.activeEditor.getContent();

Второй пример так же возвращает содержимое редактора TinyMCE, где content id - id тега textarea текстового редактора:

 tinyMCE.get('content id').getContent();

jQuery версия получения HTML содержимого, где content id - id тега textarea текстового редактора:

 $('#content id').html();

Примеры обращения к методу, возвращающему все содержимое текстового редактора TinyMCE в виде текста

Первый пример демонстрирует функцию, при помощи которой мы можем получить cодержимое активного текстового редактора TinyMCE в виде текста:

 tinyMCE.activeEditor.getContent({format : 'text'});

Второй пример так же возвращает содержимое редактора TinyMCE в виде текста, где content id - id тега textarea текстового редактора:

 tinyMCE.get('content id').getContent({format : 'text'});

Примеры обращения к методу, возвращающему содержимое выделенного текста в текстовом редакторе TinyMCE в виде HTML кода

Активный TinyMCE редактор:

tinyMCE.activeEditor.selection.getContent();

TinyMCE редактор, где content id - id тега textarea текстового редактора:

tinyMCE.get('content id').selection.getContent();

Примеры обращения к методу, возвращающему содержимое выделенного текста в текстовом редакторе TinyMCE в виде текста

Активный TinyMCE редактор:

tinyMCE.activeEditor.selection.getContent({format : 'text'});

TinyMCE редактор, где content id - id тега textarea текстового редактора:

tinyMCE.get('content id').selection.getContent({format : 'text'});

Прочие функции и методы текстового редакторы TinyMCE

Пример обращения к методу редактора, возвращающему id активного текстового редактора:

tinyMCE.activeEditor.id;

Пример обращения к методу активного редактора TinyMCE, возвращающего имя выделенного тега в редакторе:

tinyMCE.activeEditor.selection.getNode().nodeName;

Пример обращения к методу редактора TinyMCE, возвращающего имя выделенного тега в редакторе, где content id - id тега textarea текстового редактора:

tinyMCE.get('content id').selection.getNode().nodeName;

Вставить или заменить HTML теги в текстовый редактор TinyMCE

В данном разделе статьи будут рассмотрены примеры обращения к методам и функциям текстового редактора TinyMCE способствующим редактированию и вставки тегов, текста в нужный фрагмент html кода или текста.

Метод, позволяющий вставить в активный текстовый редактор TinyMCE тег:

 tinyMCE.activeEditor.execCommand("mceInsertContent", false, '<b>Hello world!</b>');

Метод, позволяющий вставить в текстовый редактор TinyMCE тег, где  content id - id тега textarea текстового редактора:

 tinyMCE.get('content id').execCommand("mceInsertContent", false, '<b>Hello world!</b>');

Метод, позволяющий заменить выделенный текст активного текстового редактора TinyMCE, где {$selection} - выделенный текст активного текстового редактора:

tinyMCE.activeEditor.execCommand('mceReplaceContent',false,'<b>{$selection}</b>');

Метод, позволяющий заменить выделенный текст текстового редактора TinyMCE, где {$selection} - выделенный текст активного текстового редактора; content id - id тега textarea текстового редактора:

tinyMCE.get('content id').execCommand('mceReplaceContent',false,'<b>{$selection}</b>');

Метод, позволяющий заменить выделенный HTML код активного текстового редактора TinyMCE, где {$selection} - выделенный текст активного текстового редактора:

tinyMCE.activeEditor.execCommand('mceReplaceContent',false,'<i>'+tinyMCE.activeEditor.selection.getContent({format : 'html'})+'</i>');

Метод, позволяющий заменить выделенный HTML код текстового редактора TinyMCE, где {$selection} - выделенный текст активного текстового редактора; content id - id тега textarea текстового редактора:

tinyMCE.get('content id').execCommand('mceReplaceContent',false,'<i>'+tinyMCE.activeEditor.selection.getContent({format : 'html'})+'</i>');

Переключение режимов TinyMCE

В текстово-графическом редакторе TinyMCE предусмотрены режимы редактирования текста. В этом разделе мы рассмотрим методы переключения режимов текстового редактора.

Метод, позволяющий, переключить активный текстовый редактор TinyMCE в режим графического редактора:

tinyMCE.activeEditor.show();

Метод, позволяющий, переключить активный текстовый редактор TinyMCE в режим графического редактора, где  content id - id тега textarea текстового редактора:

 tinyMCE.get('content id').show();

Метод, позволяющий, переключить активный текстовый редактор TinyMCE в режим текстового редактора:

tinyMCE.activeEditor.hide();

Метод, позволяющий, переключить активный текстовый редактор TinyMCE в режим текстового редактора, где  content id - id тега textarea текстового редактора:

 tinyMCE.get('content id').hide();

Итог

Как вы уже заметили, текстовый редактор TinyMCE обладает массой методов и функций, упрощающих работу с редактором и позволяющим производить гибкую конфигурацию и адаптацию редактора под свои нужды и задачи. Методы, функции и примеры приведенные в данной статье не исчерпывающие. В статье приведены основные методы работы с редактором, который помогут вам решить массу задач.

Полную API смотрите на официальном сайте редактора TinyMCE.

Всем спасибо за внимание!

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Всплывающая фиксированная навигация для сайта jQuery, CSS - инструкция, примеры

18/02/2020

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

Всплывающая фиксированная навигация для сайта jQuery, CSS - инструкция, примеры
Плагин DateTimePicker для сайта - инструкция, настройка, инициализация

05/02/2019

DateTimePicker – удобный и легкий в использовании плагин для быстрой подстановки даты и времени в поля ввода.

Плагин DateTimePicker для сайта - инструкция, настройка, инициализация
Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация

23/01/2019

В этой статье будет рассмотрено решение этой задачи с использованием плагина Masked Input, который отличается простотой и удобством в использовании.

Плагин маски ввода для input - jquery maskedinput - инструкция, настройка, инициализация
Публикация на стене Вконтакте средствами API - кросспостинг

24/03/2017

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

Публикация на стене Вконтакте средствами API - кросспостинг
Чтение excel на PHP - основные методы класса PHPExcel

03/11/2016

С помощью PHPExcel можно производить чтение и запись информации в файлы, форматировать их содержимое,выполнять операции с формулами, стилями и т.д.

Чтение excel на PHP - основные методы класса PHPExcel
TinyMCE вырезает теги - исключения для тегов TinyMCE

21/09/2016

Текстовый редактор TinyMCE в визуальном режиме при стандартной конфигурации обрезает некоторый теги и свойства.

TinyMCE вырезает теги - исключения для тегов TinyMCE
Установка и настройка TinyMCE - инициализация и параметры

21/09/2016

Как вы уже поняли, редактор является платформенным Javascript редактором HTML кода, т.е. WYSIWYG редактором для сайтов и веб приложений. Разработчиком этого полезного продукта является компания Moxiecode Systems AB.

Установка и настройка TinyMCE - инициализация и параметры
Установка и настройка jCarousel - параметры и методы

20/09/2016

В статье мы: познакомимся с каруселью; научимся интегрировать ее на свой сайт; познакомимся с основными параметрами инициализации;рассмотрим самые популярные свойства и методы классов jCarousel

Установка и настройка jCarousel - параметры и методы
Инструкция SMTP PHPMailer - свойства и методы класса

20/09/2016

Любой backend программист php сталкивается с задачей автоматизации почтовой рассылки на веб сайтах и многие,кто сталкивался с данной задачей впервые, вставали перед ключевым вопросом: "Писать или не писать smtp клиент с нуля?".

Инструкция SMTP PHPMailer - свойства и методы класса