Подсветка кода в TinyMCE с помощью highlight

4933 0

    Давно искал плагин TinyMCE для подсветки программного кода. Ничего подходящего, чтобы без php и только на javascript не нашел.

    Хотя конечно есть highlight.js, который на лету подкрашивает DOM элементы страницы. Но мне она не приглянулась. Всетаки при каждом просмотре мучать DOM не хочется.

    И вот наконец я наткнулся на заметку в которой описан метод скрещивания TiniMCE, SyntaxHL и highlight. Описанное решение у меня в django-админке не пошло. Но идея мне понравилась и я сел писать свой плагин.

   
    Для начала я отказался от использования SyntaxHL, поскольку кроме подсветки кода мне ничего не требовалось. Тем более, что нормально запустить на русском языке мне этот плагин так и не удалось.

    Взяв за основу свой мелкий плагин Noindex я начал скрещивать его с highlight. Для этого ввел поле выбора языка программирования в файле dialog.html:

<select name="mlanguage" id="mlanguage">
     <option value="auto">автоопределение</option>
     <option value="no-highlight">без офомления</option>
     <option value="python">Python</option>
     <option value="profile">Python's profiler output</option>
     <option value="javascript">Javascript</option>
     <option value="css">CSS</option>
     <option value="xml">HTML/XML</option>
     <option value="sql">SQL</option>
     <option value="bash">Bash(Shell)</option>
     <option value="apache">Apache</option>
     <option value="nginx">nginx</option>
     <option value="plain">Plain(Text)</option>
     <option value="vb">VB</option>
</select>

     Затем, внимательно изучив опыт коллеги по прикручиванию highlight, накидал код файла dialog.js:

var ListingDialog = {
  wrapper: document.createElement('div'),
  init : function() {
  },

  insert : function() {
    var f = document.forms[0], textarea_output, options = ''
//If no code just return. if(f.mtext.value == '') { tinyMCEPopup.close(); return false; }
f.mtext.value = f.mtext.value.replace(/</g,'<'); f.mtext.value = f.mtext.value.replace(/>/g,'>'); textarea_output = '<pre><code';
if (f.mlanguage.value == 'auto') { textarea_output += '>'; } else { textarea_output += ' class="' + f.mlanguage.value + '">'; }; textarea_output += f.mtext.value; textarea_output += '</code></pre> '; this.wrapper.innerHTML = textarea_output; hljs.highlightBlock(this.wrapper.firstChild.firstChild, ' '); tinyMCEPopup.editor.execCommand('mceInsertContent', false, this.wrapper.innerHTML); tinyMCEPopup.close(); } }; tinyMCEPopup.onInit.add(ListingDialog.init, ListingDialog);

    После этого осталось -

    нарисовать характерную картинку: 

    подключить плагин к TinyMCE в шаблоне админки:

...
plugins : "...,lstng",
...
theme_advanced_buttons1 : "...,|,lstng",
...
content_css : "http://yandex.st/highlightjs/6.1/styles/default.min.css",

    И показать основному шаблону где брать стили:

<link rel="stylesheet" href="http://yandex.st/highlightjs/6.1/styles/default.min.css">

    После всех этих манипуляций получился вполне рабочий плагин позволяющий использовать highlight в админке django.

Результат можно скачать тут: lstng.tar.gz

 

P.S. У highlight кроме стиля default.min.css есть множество других. Ищите на сайте проекта.

 

Источники:

Страница проекта highlight.js

 

 

Комментарии

Контактные данные

 Россия, г. Москва