Как интегрировать автоматическую вставку подсветки кода highlight.js в редактор TinyMCE Joomla

После того, как расширение подсветки кода highlight.js подключено к Joomla 3, встаёт вопрос: «Как автоматизировать вставку подсветки кода в текстовый редактор TinyMCE, используемый для публикации материалов в Joomla 3?» В этой статье покажу, как я частично решил этот вопрос. Похоже, никто не занимался этой темой, поэтому вставку кода highlight.js при публикации статьи я решил, но полной интеграции с TinyMCE не добился и вряд ли займусь. Полученного функционала мне вполне достаточно для быстрой работы. JavaScript — не моя тема, и лезть в дебри переопределения события на кнопке  я пока не намерен.

Исходная ситуация с вставкой кода в редакторе TinyMCE

Как добавить пример кода в статью с помощью Визуального редактора TinyMCE на примере Joomla 3 подробно описана и проиллюстрирована в → этой статье. В итоге, после такого способа вставки кода в текст статьи имеем следующую картину:

1. Если заглянуть в HTML-код, то вставка будет таким контейнером из двух HTML-тегов:

   • <pre class="language-ТУТ_КОД_ЯЗЫКА">
      <code>
       тут собственно вставленный код
      </code>
     </pre>

2. Ну и если обратить внимание на список языков, которые предлагаются для вставки кода на них, то он короткий и может не содержать требуемых, а содержать те, которые вряд ли понадобятся.

Постановка задачи интегрирования автоматической вставки подсветки кода highlight.js в редактор TinyMCE Joomla

Итого: Имеем две задачи, которые требуется решить:

1. Преобразовать код HTML вставки для highlight.js, который должен быть в таком виде:

   • <pre>
      <code class="language-ТУТ_КОД_ЯЗЫКА">
       тут собственно вставленный код
      </code>
     </pre>

   • то есть, class должен прописываться у тега <code>, а не у тега <pre>
2. Поменять список языков на тот, который требуется, а не тот, который используется в TinyMCE.

Файл TinyMCE, в который нужно вносить изменения для интегрирования автоматической вставки подсветки кода highlight.js

Методом включения интуиции на полную катушку (и знания HTML), я достаточно быстро нашёл файл, отвечающий за решение данной задачи. Этот файл находится по следующему пути (если смотреть от корня сайта):

/media/editors/tinymce/plugins/codesample/plugin.min.js

Рекомендую перед началом правок сделать копию этого сайта на тот случай, если что-то пойдет не так. Файл этот представляет собой набор функций, написанных на JavaScript. И он лишён переносов строк и пробелов, что усложняет понимание того, что эти функции делают. Однако, присмотревшись, можно найти нужные места.

Решение задачи 1. Преобразовать код HTML вставки для highlight.js

Было:

function i(e,t,r){e.undoManager.transact(function(){var i=o(e);r=l.encode(r),i?(e.dom.setAttrib(i,"class","language-"+t),i.innerHTML=r,n.highlightElement(i),e.selection.select(i)):(e.insertContent('<pre id="__new" class="language-'+t+'">'+r+"</pre>"),e.selection.select(e.$("#__new").removeAttr("id")[0]))})}

Исправляем на:

function i(e,t,r){e.undoManager.transact(function(){var i=o(e);r=l.encode(r),i?(e.dom.setAttrib(i,"class","language-"+t),i.innerHTML=r,n.highlightElement(i),e.selection.select(i)):(e.insertContent('<pre><code id="__new" class="language-'+t+'">'+r+"</code></pre>"),e.selection.select(e.$("#__new").removeAttr("id")[0]))})}

Поясню, что нужно перенести код вставки атрибута class из тега <pre> в тег <code>.

Решение задачи 2. Поменять список языков на тот, который требуется и который был выбран при сборке highlight.js

Коды языков можно посмотреть в таблице в конце статьи по → этой ссылке. Находим, меняем и дополняем следующий кусок кода:

Было:

function r(e){var t=[{text:"HTML/XML",value:"markup"},{text:"JavaScript",value:"javascript"},{text:"CSS",value:"css"},{text:"PHP",value:"php"},{text:"Ruby",value:"ruby"},{text:"Python",value:"python"},{text:"Java",value:"java"},{text:"C",value:"c"},{text:"C#",value:"csharp"},{text:"C++",value:"cpp"}],n=e.settings.codesample_languages;return n?n:t}

У меня получилось:

function r(e){var t=[{text:"PHP",value:"php"},{text:"Apache",value:"apache"},{text:"Bash",value:"bash"},{text:"CSS",value:"css"},{text:"HTML",value:"html"},{text:"XML",value:"xml"},{text:"HTTP",value:"http"},{text:"JSON",value:"json"},{text:"JavaScript",value:"javascript"},{text:"Markdown",value:"markdown"},{text:"Nginx",value:"nginx"},{text:"Properties",value:"properties"},{text:"SQL",value:"sql"},{text:"Shell",value:"shell"}],n=e.settings.codesample_languages;return n?n:t}

Так как списки языков у всех будут индивидуальны, то обращу внимание на то, что менять и дополнять нужно элементы типа {text:"Language",value:"language"}. Переменной text присваивается значение, которое будет выводиться из списка в визуальном редакторе TinyMCE при вставке кода:

Переменной value присваивается значение из таблицы, ссылку на которую я дал выше. Это значение и будет подставлено в атрибут class HTML-тега <code>.

Выводы

В общем и целом, всё работает, но отваливается кнопка  для правки уже введённого кода:

Как я уже написал во вступлении, в JavaScript я далёк от гуру, поэтому пока остановлюсь на достигнутом. Мне достигнутого функционала хватает, и если что-то нужно поправить в коде, теперь можно править прямо в редакторе, так как кнопка отвалилась. Минус только один — для того, чтобы поменять код языка, нужно лезть в HTML-код... Но и это не проблема.

Если у кого-то есть решение, прошу поделиться — буду рад помощи.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)