В данной статье мы рассмотрим основные свойства и методы текстового редактора 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.

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

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Плагин 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 - свойства и методы класса