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

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

14 марта 2012 г. 15:25 Django и Python 4960 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

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

Комментарии

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