Гость

Нажмите для авторизации/регистрации

  • Назад
  • Меню
  • Статьи
    • Все
    • Интернет и технологии
    • Laravel и WebDev
    • Linux, Windows, Docker, Etc
    • Новости
    • Прочее
    • Геймдев
    • Смотри как я умею
  • Информация
    • Оферта на дополнительные функции
    • Политика конфиденциальности
    • Тарифы
    • Пользовательское соглашение

Laravel: CKEditor 4 + Сниппет кода

  1. Главная
  2. Статьи
  3. Laravel и WebDev
  4. Laravel: CKEditor 4 + Сниппет кода
Laravel: CKEditor 4 + Сниппет кода
  • 24/11/2021
  • Chebukin Pavel
  • 252 просмотров
  • 0 комментариев

Laravel: CKEditor 4 + Сниппет кода

Символично на сайтах по ларавел начать наверное с какой-нибудь темы аля "сделать блог". Возможно в дальнейшем и я напишу такой материал. Но в этом я хочу показать как сделать интеграцию визуального редактора 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 и вывод ее на странице отображения материала.

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

Отзывы

Пока нет комментариев


Для того чтобы оставить комментарий, авторизуйтесь.
Понравился материал? Поделись!
Laravel: Nova, Orchid или кастомная/собственная админ панель
Июл23
Laravel: Nova, Orchid или кастомная/собственная админ панель

Очень часто под очередной проект приходится делать админ панель. Чаще всего в MVP проектах никто не закладывает дизайн админ панели. Берется уже или полу готовая, или делается с нуля, чаще всего на купленной теме. Чтобы сделать свою панель, перекрывающую 80% типовых потребностей многих сайтов потребуется пару дней возни, а в...

  • Chebukin Pavel
  • 0
  • 23.07.2022 10:30
CKEditor 4 + Загрузка картинок в Laravel
Ноя28
CKEditor 4 + Загрузка картинок в Laravel

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

  • Chebukin Pavel
  • 0
  • 28.11.2021 22:38
Лучшие редакторы и среды разработки для разработчиков
Дек18
Лучшие редакторы и среды разработки для разработчиков

Выбор лучшего редактора и IDE Холивары между тем лучшим ли является для разработки Emacs или Vi(m) потихоньку отходят в прошлое. Уже сложно их представить полноценными средами разработки. Ведь несмотря на всю их практичность, соревноваться в удобстве с современными комбайнами они могут только при крайне длительной подготовке. Но чтобы выбрать лучший для себя...

  • Chebukin Pavel
  • 0
  • 18.12.2021 20:32
Простой LazyLoad для сайта на Laravel и не только
Ноя25
Простой LazyLoad для сайта на Laravel и не только

Что такое LazyLoad? Суть метода LazyLoad - подгружать картинки не в момент загрузки страницы, а по мере ее просмотра. Это облегчает первоначальную загрузку страницы, скорость отображения пользователям и отношение поисковых систем. На многих своих сайтах я использую LazyLoad картинок, для ускорения загрузки самого сайта. Сделать это легко. Заходим на сайт...

  • Chebukin Pavel
  • 0
  • 25.11.2021 23:30
Laravel Request - гибкость "как хочу, так и ворочу". Расширение валидации и свое правило на проверку ввода.
Дек08
Laravel Request - гибкость "как хочу, так и ворочу". Расширение валидации и свое правило на проверку ввода.

Много кто скажет про принципы единой ответственности и т.д., но в этом материале речь не о том как важно делать, но о том как можно. И вот когда дело доходит до валидации запросов Laravel, одним из самых интересных является Request. Рассмотрим к примеру следующий запрос: <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest;...

  • Chebukin Pavel
  • 0
  • 08.12.2021 23:05
Сайтмап для сайта на Laravel - sitemap.xml
Ноя25
Сайтмап для сайта на Laravel - sitemap.xml

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

  • Chebukin Pavel
  • 0
  • 25.11.2021 22:05

Copyright 2022 © All rights reserved.

Мы в: