Как добавить свою кнопку в редактор TinyMCE

Как добавить свою кнопку в редактор TinyMCE

Предлагаю немного развить эту тему, чуток доработав наш код создания кнопки для текстового редактора WordPress. Не то что это супер изменения. Но мне, этот код оказался полезным в реализации одного проекта. Надеюсь что и Вам он будет полезен, т. к. информации о визивиге TinyMCE в русскоязычном интернете не так уж и много. А тема довольно интересная.

Сегодня мы вместо вставки текстовой информации в месте пребывания курсора, будем «оборачивать» выделенный курсором текст в заданный тег. Таким тегом будет тег «» с заранее установленным классом «important». Примерно это будет выглядеть так:

Текст до спана <span class=«important»>текст внутри спана</span> текст после спана.

Ничего особенного. Но вот, к примеру для плагина «SyntaxHighlighter» такой кнопки и не хватает. Но здесь скорее нужно делать попап окошко с возможностью вставки кода и выбора используемого языка (php, js, html, пр.). Кстати! В будущем можно будет этим и заняться, заодно расширив свои знания в области API TinyMCE.

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

(function(){
	tinymce.PluginManager.add('mxs__mce_plugin', function( editor, url ) {
		editor.addButton('mxs__mce_button', {
			text: 'выделение',
			image: false,
			onclick: function() {
				editor.selection.setContent('<span class="important">' + editor.selection.getContent() + '</span>');
			}
		});
	});
})();

Что здесь изменилось. Мы заменили название кнопки на «выделение». И заменили код обработчика события «onclick»:

editor.selection.setContent('<span class="important">' + editor.selection.getContent() + '</span>');

В нем мы используем два метода редактора:
editor.selection.getContent() - получить содержимое выбранного текста
editor.selection.setContent() - вставить текст в выделенное место под курсором

Т.е. получается что мы просто перезаписываем информацию, всего лишь обернув ее в нужный нам тег.

Как добавить свою кнопку в редактор TinyMCE
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *