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