CodeColorer TinyMCE Button
Для подсветки синтаксиса в постах своего блога я выбрал CodeColorer (хороший плагин для ВП на основе geshi библиотеки). Однако у него есть недостаток - нет кнопки на панели TinyMCE. Меня это долго не удовлетворяло и даже раздражало. Вот я взял и написал отдельный плугинец, который работает в связке с CodeColorer добавляя удобную кнопку на панель TinyMCE.
[caption id=”attachment_456” align=”aligncenter” width=”134” caption=”Кнопка, которая появляется на панели TinyMCE”]
[/caption]
Вот так вот выглядит окно по нажатию на кнопку:
[caption id=”attachment_457” align=”aligncenter” width=”300” caption=”Форма, отображающаяся по нажатию на кнопку”]
[/caption]
В общем-то я писал его как отдельный плагин, чтоб его можно было легко адаптировать для других плагинов расцветки кода. По странному стечению обстоятельств ни один плагин такого типа не предоставляет кнопки на тулбаре TinyMCE.
Из особенностей могу добавить только то, что:
работает исключительно с TinyMCE 3.х и выше
возможно работает с ВП 2.7 и выше
Для подстройки под другие плагины расцветки достаточно поправить файл tinymce.js, где надо изменить формат подстановки текста.
[cc lang=’javascript’ ]function insertCCTBcode() {
var tagtext; var langname_ddb = document.getElementById(‘cctb_lang’); var langname = langname_ddb.value; var linenumbers = document.getElementById(‘cctb_linenumbers’).checked; var inst = tinyMCE.getInstanceById(‘content’); var html = inst.selection.getContent();
if (linenumbers) //править надо именно тут подстановку tagtext = “[cc lang=’” + langname + “’ “; else tagtext = “[cc lang=’” + langname + “’ line_numbers=’false’”; //и не забыть чутка тут ({ } замените на [ ] потому как тут в коде они ломали синтаксис) window.tinyMCE.execInstanceCommand(‘content’, ‘mceInsertContent’, false, tagtext+’]’+html+’{/cc}’); tinyMCEPopup.editor.execCommand(‘mceRepaint’); tinyMCEPopup.close(); return; }[/cc]
codecolorer-tinymce-buttom скачиваем и тестируем (версия 0.1)
Обсуждение можно вести на форуме.
[caption id=”attachment_456” align=”aligncenter” width=”134” caption=”A new button on TinyMCE panel”][/caption]
Here is a window:
[caption id=”attachment_457” align=”aligncenter” width=”300” caption=”Form that displaying after button pressed”][/caption]
This plugin writed as adition to CodeColorer plugin, but it can be easily adopted to other syntax plugins.
It’s odd but not one syntax plugin haven’t TinyMCE plugin.
Futures:
work only with TinyMCE 3.х or later
maybe work only with WP 2.7 or later
Tuneup to other plugins, just edit tinymce.js, where you just fix a format of inserted code.
[cc lang=’javascript’ ]function insertCCTBcode() {
var tagtext; var langname_ddb = document.getElementById(‘cctb_lang’); var langname = langname_ddb.value; var linenumbers = document.getElementById(‘cctb_linenumbers’).checked; var inst = tinyMCE.getInstanceById(‘content’); var html = inst.selection.getContent();
if (linenumbers) //edit code here tagtext = “[cc lang=’” + langname + “’ “; else tagtext = “[cc lang=’” + langname + “’ line_numbers=’false’”; //don’t forget to change ({ } change to [ ] becouse they broke view) window.tinyMCE.execInstanceCommand(‘content’, ‘mceInsertContent’, false, tagtext+’]’+html+’{/cc}’); tinyMCEPopup.editor.execCommand(‘mceRepaint’); tinyMCEPopup.close(); return; }[/cc]
codecolorer-tinymce-buttom download and try it (version 0.1)
Got somsing to say? Say it here!