Разработка сайтов на WordPress и фреймворке Yii2

Здесь вы можете заказать полный пакет услуг по разработке сайта. Начиная от написания ТЗ до программирования на PHP, JavaScript и верстке.

Как добавить свою кнопку в редактор 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() - вставить текст в выделенное место под курсором

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

Добавить комментарий

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