Символично на сайтах по ларавел начать наверное с какой-нибудь темы аля "сделать блог". Возможно в дальнейшем и я напишу такой материал. Но в этом я хочу показать как сделать интеграцию визуального редактора CKEditor со сниппетом кода. Саму установку CKEditor и интеграцию загрузки картинок опишу отдельным материалом. Здесь же, условимся что используется 4-я версия редактора. Она загружена в папку /public/js, то есть путь к редактору у нас находится /public/js/ckeditor/ckeditor.js относительно корня проекта.

Почему CKEditor, а не TinyMCE или другой редактор.

Так уж исторически сложилось что опробовав разные редакторы на разных проектах, CKEditor понравился своей органичностью и функциональностью, а когда нужно еще и созданием плагинов. Хотя от команды тинимце у меня есть клевая футболка, которая мне очень нравиться. Возможно его интегрирую в какой-либо из следующих частях.

Зачем нужен такой сниппет?

Создаете ли вы блог, сообщество или корпоративный какой-то сайт, потребность выгрузить и отобразить с подсветкой код на одном из языков, вполне типичная задача. Альтернативный вариант - установка отдельного редактора, например Ace9. Это очень классны редактор, но крайне плохое решение разбивать код-материал-код-материал разными полями ввода. А удобство часто является определяющим.

Установка плагинов в CKEditor 4

Как уже говорилось, сам CKEditor расположен по пути: /public/js/ckeditor/ckeditor.js от корня проекта

Для работы сниппета нам нужен сам плагин 

codesnippet, он базируется на двух плагинах 

widget и dialog, которые в свою очередь зависят от clipboard, lineutils, dialogui, notification. Для каждого плагина жмете кнопку Download, сохраняете и распаковываете их в папку /public/js/ckeditor/plugins

Таким образом все эти плагины должны оказаться у вас разом с другими и выглядеть приблизительно так:

На скриншоте показаны не все плагины, так как их там довольно много. Но суть должна быть понятна. Далее, чтобы все это заработало, нужно предпринять два действия: 1) Включить дополнительные плагины в редакторе 2) Подключить стиль и код отображения подсветки синтаксиса на странице. Этим и займемся.

Включение плагина отображения форматирования кода в редакторе CKEditor 4

У меня вызов CKEditor не включен для всех страниц и используется только там где нужно. По этому для страницы где нужен редактор я использую следующий код:

<textarea id="field_body" name="body"></textarea>
<script src="/js/ckeditor/ckeditor.js"></script>
    <script>
        CKEDITOR.replace( 'field_body', {
baseFloatZIndex: 19900,
protectedSource: '[/\r|\n/g]',
allowedContent: 'a[!href,rel,target]; img[!src,alt,title,align]{height,width,style}; iframe(*)[*]{*}; video(*)[*]{*}; object(*){*}[*]; code(*){*}[*]; hr pre strong em b br i(*){*}[*]; table th tr(*){*}[*]; td(*){*}[*]; ul ol li q blockquote span(*){class,style}[*]; div(*){text-align,font-size,color,background-color,font-weight,font-style}; p[id,class]{text-align};' +
' h1[id]{text-align,font-size,color,background-color};' +
' h2[id]{text-align,font-size,color,background-color};h3[id]{text-align,font-size,color,background-color};h4[id]{text-align,font-size,color,background-color};' +
' h5[id]{text-align,font-size,color,background-color};h6[id]{text-align,font-size,color,background-color};text-align; li[*]{*}(*) ',
            height:'800px',
            extraPlugins :'youtube,embedbase,notification,notificationaggregator,widgetselection,clipboard,lineutils,widget,html5video,fakeobjects,dialogui,dialog',
        } );
</script>

В первой строке мы отображаем элемент textarea, с которым и будем работать.

Во второй мы подключаем сам редактор, так как в Laravel точка входа начинается с папки public, и скрипты лежат в ней, в подпапке js, указывать саму папку public не нужно. В строке 4 мы инициализируем CKEditor  подгрузится на наш элемент с id="field_body".

baseFloatZIndex нужен на тот случай, когда редактор оказывается под какими-то элементами верстки, перекрывшись ими. У меня значение 19900 как-то по опыту само стало константой, работает и нигде не мешает. Вы можете изменить или не использовать параметр вообще.

protectedSource позволяет не удалять из текста переносы строк.

allowedContent - вводит ограничение на используемые теги в коде. Сейчас в этих правилах заданы большинство разрешенных тегов. Если вы заблокируете что-то лишнее, плагин может не работать или функции быть недоступны, например выделение цветом или жирность. Разрешите слишком много и пользователи успешно сделают из материалов зоопарк всего что там может быть.

height - высота поля редактора. В некоторых случаях редактор появляется совсем уж сплюснутым и чем его растягивать постоянно, лучше сразу задать начальную высоту.

extraPlugins - в это материале это самый интересующий нас параметр. В нем обязательно нужно перечислить скачанные нами плагины: 

notification,notificationaggregator,widgetselection,clipboard,lineutils,widget,dialogui,dialog,codesnippet

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

После того как вы добавили все необходимое в редактор, при загрузке страницы появится иконка вставки сниппета кода:

На скриншоте самая правая иконка. При нажимании ее у вас появится окно ввода кода и выбор языка.

Увы, на текущий момент там нет подсветки синтаксиса. Возможно, по надобности и просьбе читателей, я заморочусь этим вопросом. Сейчас мне это не нужно. Главное, что на выходе, в самом редакторе будет код подсвечен.

<html>
<head>
<title>Hello, CKEditor4 + CodeSnippet</title>
</head>
<body>
<h2>I'm here!</h2>
</body>
</html>

Все это отлично, но это только 2/3 действий. Нам ведь нужен результат на странице, где пользователь и увидит подсвеченный код.

Подключаем стиль и код отображения подсветки синтаксиса на странице отображения материала

Для подключения подсветки кода на странице, с отображаемым материалом, достаточно подключить всего два файла в шапке:

<head>
...
<link href="/js/ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet">
<script src="/js/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
</head>

И в скриптах вызываем выполнение скрипта подсветки. Чаще всего это делается перед закрытием тега </body>

<script>
        document.addEventListener('DOMContentLoaded',function (){
            hljs.initHighlightingOnLoad();
        });
</script>

Все. Эта вся интеграция подсветки кода в CKEditor 4 и вывод ее на странице отображения материала.

Я не рекомендую подгружать стили и выполнять код где-то еще, кроме как на страницах отображения материалов. Еще лучше на лету определять есть ли вставки кода на странице и только тогда подключать. Если читателей заинтересует такой подход, покажу как это делать в отдельном материале. Для упрощения подключали как в инструкции к плагину говорится.