Для подсветки синтаксиса в постах своего блога я выбрал CodeColorer (хороший плагин для ВП на основе geshi библиотеки). Однако у него есть недостаток – нет кнопки на панели TinyMCE. Меня это долго не удовлетворяло и даже раздражало. Вот я взял и написал отдельный плугинец, который работает в связке с CodeColorer добавляя удобную кнопку на панель TinyMCE.
Кнопка, которая появляется на панели TinyMCE
Вот так вот выглядит окно по нажатию на кнопку:
Форма, отображающаяся по нажатию на кнопку
В общем-то я писал его как отдельный плагин, чтоб его можно было легко адаптировать для других плагинов расцветки кода. По странному стечению обстоятельств ни один плагин такого типа не предоставляет кнопки на тулбаре TinyMCE.
Из особенностей могу добавить только то, что:
- работает исключительно с TinyMCE 3.х и выше
- возможно работает с ВП 2.7 и выше
Для подстройки под другие плагины расцветки достаточно поправить файл tinymce.js, где надо изменить формат подстановки текста.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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; } |
codecolorer-tinymce-buttom скачиваем и тестируем (версия 0.1)
Обсуждение можно вести на форуме.
Pages: 1 2
Submitting Comment, Give me a second...
Если прочитать внимательно комментарии автора плагина, то можно заметить, что код, вставленый через визуальный редактор, ломается. И это правда