CKeditor + Syntaxhighlighter + Drupal 7

Этот блог частично посвящен IT-сфере: linux, windows, android и т.п. Но в том числе и друпалу. Одной из повседневных задач является отображение в удобочитаемом виде кодов различных языков программирования, css и т.п.

Я для этих целей использую один из лучших WYSIWYG-редакторов для Drupal 7 — CKeditor с плагином Syntax highlighter. Я бы не писал этот пост, если бы установка и настройка этой связки была настолько простой, как кажется. У меня это отняло некоторое время. Чтобы вы его не потеряли, опишу процесс установки и настройки, который привел таки к успешному результату. 

  1. Устанавливаем и включаем модуль CKeditor (весь процесс будет описан для пути по умолчанию — /sites/all/modules
  2. Качаем сам редактор CKeditor отсюда и разархивируем в папку уже установленного модуля CKeditor так, чтобы путь выглядел так: /sites/all/modules/ckeditor/ckeditor (/ckeditor.js)
  3. Качаем Syntax highlighter отсюда и разархивируем в /sites/all/libraries/syntaxhighlighter_x.x.xx где х.х.хх — скачанная версия
  4. Устанавливаем и включаем модуль SyntaxHighlighter. Если п.3 выполнен правильно, то модуль включится
  5. Качаем и разархивируем плагин SyntaxHighLighter для CKeditor так, чтобы путь был такой: /sites/all/modules/ckeditor/plugins/syntaxhighlight/ (plugin.js)
  6. Также копируем папки _source и plugins из п.5 в папку /sites/all/modules/ckeditor/ckeditor/ 

Подготовительный этап закончен. Теперь настраиваем модуль Syntax Highlighter — admin/config/content/syntaxhighlighter

В файле /sites/all/modules/ckeditor/ckeditor.config.js меняем строку 27 и 100 (в моей версии модуля)

config.extraPlugins = 'syntaxhighlight';
['DrupalBreak', 'DrupalPageBreak', 'Code']

В файле /sites/all/modules/ckeditor/ckeditor/config.js добавляем между { } следующее:

config.extraPlugins = 'syntaxhighlight';
config.toolbar_Full.push(['Code']);

В модуле CKeditor (admin/config/content/ckeditor) идем в Изменить текущего профиля (в моем случае профиль Full). Далее Вид редактора, где включаем галочку в пункте Модули — 

Читайте  Как отключить передачу персональных данных из WhatsApp в Facebook

P.S. В качестве дополнения. Можно русифицировать плагин syntaxhighlight. Сначала копируем приложенный к данной теме файл из архива ru.js в  /sites/all/modules/ckeditor/plugins/syntaxhighlight/lang/ Ищем файл /sites/all/modules/ckeditor/plugins/syntaxhighlight/plugin.js и меняем в нем значения en на ru. Чистим кэш.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

[Всего голосов: 0    Средний: 0/5]

← Предыдущий

Следующий пост →

3 Комментарий

  1. Роман

    Про фильтр подсветки синтаксиса GeSHi можно почитать здесь

  2. Сергей

    В файле /sites/all/modules/ckeditor/ckeditor/config.js добавляем между { } следующее:

     
     
    config.extraPlugins = 'syntaxhighlight';
    config.toolbar_Full.push(['Code']);

    там сплошной текст. Куда вставлять?

    или просто код файла и внизу так:

    {

    config.extraPlugins = 'syntaxhighlight';
    config.toolbar_Full.push(['Code']);

    }

    • Роман

      Вот так выглядит файл полностью:

      /*
      Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
      For licensing, see LICENSE.html or http://ckeditor.com/license
      */
      
      /*
       WARNING: clear browser's cache after you modify this file.
       If you don't do this, you may notice that browser is ignoring all your changes.
       */
      CKEDITOR.editorConfig = function(config) {
          config.indentClasses = [ 'rteindent1', 'rteindent2', 'rteindent3', 'rteindent4' ];
      
          // [ Left, Center, Right, Justified ]
          config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];
      
          // The minimum editor width, in pixels, when resizing it with the resize handle.
          config.resize_minWidth = 450;
      
          // Protect PHP code tags (<?...?>) so CKEditor will not break them when
          // switching from Source to WYSIWYG.
          // Uncommenting this line doesn't mean the user will not be able to type PHP
          // code in the source. This kind of prevention must be done in the server
          // side
          // (as does Drupal), so just leave this line as is.
          config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
          config.protectedSource.push(/<code>[\s\S]*?<\/code>/gi); // Code tags
          config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight');
         
       // Video_filter plugin.
       config.extraPlugins += (config.extraPlugins ? ',video_filter' : 'video_filter' );
       CKEDITOR.plugins.addExternal('video_filter', Drupal.settings.basePath + Drupal.settings.video_filter.modulepath + '/editors/ckeditor/');
          /*
          * Append here extra CSS rules that should be applied into the editing area.
          * Example:
          * config.extraCss = 'body {color:#FF0000;}';
          */
          config.extraCss = '';
          /**
          * Sample extraCss code for the "marinelli" theme.
          */
          if (Drupal.settings.ckeditor.theme == "marinelli") {
              config.extraCss += "body{background:#FFF;text-align:left;font-size:0.8em;}";
              config.extraCss += "#primary ol, #primary ul{margin:10px 0 10px 25px;}";
          }
          if (Drupal.settings.ckeditor.theme == "newsflash") {
              config.extraCss = "body{min-width:400px}";
          }
      
          /**
          * CKEditor's editing area body ID & class.
          * See http://drupal.ckeditor.com/tricks
          * This setting can be used if CKEditor does not work well with your theme by default.
          */
          config.bodyClass = '';
          config.bodyId = '';
          /**
          * Sample bodyClass and BodyId for the "marinelli" theme.
          */
          if (Drupal.settings.ckeditor.theme == "marinelli") {
              config.bodyClass = 'singlepage';
              config.bodyId = 'primary';
          }
      }
      
      /*
       * Sample toolbars
       */
      
      //Toolbar definition for basic buttons
      Drupal.settings.cke_toolbar_DrupalBasic = [ [ 'Format', 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image' ] ];
      
      //Toolbar definition for Advanced buttons
      Drupal.settings.cke_toolbar_DrupalAdvanced = [
          ['Source'],
          ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
          ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
          ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
          ['Maximize', 'ShowBlocks'],
          '/',
          ['Format'],
          ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
          ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
          ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiRtl','BidiLtr'],
          ['Link','Unlink','Anchor','Linkit','LinkToNode','LinkToMenu'],
          ['Code','DrupalBreak', 'DrupalPageBreak']
      ];
      
      // Toolbar definiton for all buttons
      Drupal.settings.cke_toolbar_DrupalFull = [
          ['Source'],
          ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
          ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
          ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','Iframe'],
          '/',
          ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
          ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
          ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiRtl','BidiLtr'],
          ['Link','Unlink','Anchor','Linkit','LinkToNode', 'LinkToMenu'],
          '/',
          ['Format','Font','FontSize'],
          ['TextColor','BGColor'],
          ['Maximize', 'ShowBlocks'],
          ['Code','DrupalBreak', 'DrupalPageBreak']
      ];
      

Добавить комментарий

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: