Предлагаю немного развить эту тему, чуток доработав наш код создания кнопки для текстового редактора 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() - вставить текст в выделенное место под курсором
Т.е. получается что мы просто перезаписываем информацию, всего лишь обернув ее в нужный нам тег.