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). Далее Вид редактора, где включаем галочку в пункте Модули — 

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

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

← Предыдущий

Следующий →

3 Comments

  1. Сергей

    В файле /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']
      ];
      
  2. Роман

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

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