Syntax Highlighter の使用

Drupalのモジュール(CKeditor)にプラグイン（syntaxhighlighter）追加後にプラグイン起動できず、エラーが発生しています

• バージョン情報：
  • Drupal:7.54
  • CKeditorモジュール：7.x-1.17
  • CKeditor：4.5.2
  • CKeditorのプラグイン：syntaxhighlighter 1.3 
• プラグインsyntaxhighlighterをダウンロードしてCKeditorに追加します（追加方法は「Drupalのモジュール（CKEditor）にプラグインの追加、設定」を参考）
• CKeditorを開いて、プラグインsyntaxhighlighterを開こうとすると画面になにも表示されず、ページのプロパティのコンソールにjsエラーが出ました

  Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
      at CKEDITOR.dom.element.append (ckeditor.js:94)
      at CKEDITOR.dom.text.appendTo (ckeditor.js:69)
      at CKEDITOR.dialog (ckeditor.js:579)
      at a.openDialog (ckeditor.js:622)
      at a.<anonymous> (ckeditor.js:622)
      at f (ckeditor.js:244)
  

  
  

原因：syntaxhighlighterプラグインがCKeditor４に対応しきれていない

• CKeditorのプラグインのReadmeにCKeditor3.x以上に対応している
• プラグインの説明ページにあるコメントからCKeditor４対応バージョンが投稿されています
  • そのリンクで最新版をダウンロードして、再度プラグインを追加しました。
• プラグインが正常に起動できました
  

Drupalのモジュール（CKEditor）に必要なプラグイン追加は簡単にできます

• Drupal：７．５４
• CKeditor：７.x-1.17
• CKeditor新しい機能をプラグインしたいことがよくあります
• 例：プラグインinsertpre：http://ckeditor.com/addon/insertpre
  • ダウンロードプラグイン
  • プラグインをsites/all/modules/ckeditor/plugins/ に展開します➡sites/all/modules/ckeditor/plugins/insertpre
  • CKeditorのかんりが管理画面（ホーム » 管理 » 環境設定 » コンテンツ作成 » CKEditor、例：Filtered HTML）の「エディターの外見」⇒「プラグイン」セクションで「Plugin file: insertpre」をチェックして有効化し、保存ボタンをします。
  • 再度「エディターの外見」を開いてinsertpreアイコンが現れ、Editorに移動して有効化します
  • 任意の文書を作成して、insertpreが現れたことを確認します
    
• 具体的な操作はビデオでご確認ください

モジュール（wysiwyg）にあるCKeditorより、プラグイン追加はずいぶん簡単になり、コーティング必要もありません

• Drupalのモジュール（wysiwyg）が複数のエディターのインストールが可能だが、Editorにプラグイン追加は難しく、プログラミング必要はあります（いろいろな記事の紹介。。。）

インストールしたモジュール

• Wysiwyg - 7.x-2.1
• CKEditor - 4.4.0
• Syntax Highlighter - 7.x-2.x
• Syntax Highligther Insert - 7.x-1.0
• Alex Gorbatchev Syntax Highlighter - 3.0.83

TinyMCEが正常動作するが、CKEditorが動作しない

• TinyMCEがSyntax Highlighterの動作が正常でした
  
• CKEditorがなぜかSyntax Highlighterの要素（<pre>）にあるすべての属性（Attribute）を削除してしまいました。
  

原因はWYSIWYGモジュールがCKEditor４以降のHTMLタグ操作に関する設定を適応していない

• CKEditor4.1以降はコンテンツにあるHTMLの属性操作定義（config.allowedContent）ができるようになりました。
• WYSIWYGモジュールがCKEditor3までしか対応していないため、上記設定の管理ができないのは当たり前です。
• いろいろ調べて、以下の手法でHTMLの属性操作定義（config.allowedContent）を行う
  • WYSIWYGにインストールしたCKEditorの設定ファイル（\sites\all\modules\wysiwyg\editors\js\ckeditor-3.0.js）39行にあるコードを修正する

      CKEDITOR.config.customConfig = '';
    

    　　　　　　⇓

      CKEDITOR.config.customConfig = 'config.js';

  • それによって、CKEditorライブラリをインストールしたディレクトリにある設定ファイル（\sites\all\libraries\ckeditor\config.js）が使用できるようになります（ハードコード編集の必要はなくなります）
  • この設定ファイル（config.js）の最後に以下の設定項目を追加します：

    CKEDITOR.config.allowedContent = true;    

  • 上記追加注意点：「CKEDITOR.editorConfig = function( config )」のループ外に追加する。（そのルール内に追加すると動作しない）

CKEditor４がSyntax Highlighterの動作がしているが、完全動作ではない

• HTMLタグ（<pre class="...">）の動作ができますが、画面表示上には属性が分割され、うまく機能していない状態（DBに保存したデータは問題がなさそうです）
  
• なぜ、タグの属性が分解されたかは、現時点は原因不明です。

必要なモジュール

•  Wysiwyg - 7.x-2.1
• CKEditor - 3.x.x
• Syntax Highlighter - 7.x-2.x
• Syntax Highligther Insert - 7.x-1.0
• Alex Gorbatchev Syntax Highlighter - 3.0.83

 モジュールの設定

• Wysiwyg Profilesの設定
• Admin管理画面（Home > Administration > Configuration > Content authoring > Wysiwyg profiles）でWysiwyg Profilesを開く
• CKEditorまたはTinyMCEエディターの「編集」ボタンをクリックして、エディターの詳細設定画面を開く
• 「BUTTONS AND PLUGINS 」メニューに「Insert syntaxhighlighter」タグをチェックする

Text Formatsの設定

• Admin管理画面（Home > Administration > Configuration > Content authoring > Text formats）でText Formatsを開く
• CKEditorまたはTinyMCEエディターに組み込まれたフォーマット（例：FullHTML、FiltedHTML）の「編集」ボタンをクリックして、詳細設定画面を開く
• 「Enabled filters」欄に「Syntax highlighter」をチェックして、有効化する
• フィルタの順序：　「Syntax highlighter」　⇒　 「Convert line breaks into HTML」　（これが重要）
  

Syntax Highlighterの設定

• Admin管理画面（Home > Administration > Configuration > Content authoring > Syntax highlighter）でSyntax highlighterを開く
• 「Enabled Languages」欄から必要な言語を選択する
• 「Tag name」欄にある初期タグ「<pre>」を使用する

Syntax Highlighterの使用

•  新しいコンテンツ（例：Article）の作成/編集画面を開いて、「Insert Syntax Highlighter」ボタンが現れる
  
• 「Insert Syntax Highlighter」ボタンをクリックして、Syntax Highlighter設定画面が開かれる
• 必要な条件を設定して、「Inser SyntaxHighlighter Tag」ボタンをして、コード入力のエリアが表示される
  
• コード入力エリアにコードを入力して、保存ボタンを押すと、ハイライトされたコードが表示画面に現れる

問題点

•  現時点、CKEditorがうまく動作していない
• TinyMCEが動作しているが、一行ですべてのコードを表示している（原因はコードに<br>タグが自動に挿入された）

解決

• CKEditorが対応していないようで、解決方法がまだ見つかっていない。
• TinyMCEで、HTMLソース編集（<pre>タグを手動で追加）すれば、コードがうまくハイライトされている

必要なモジュール

•  Wysiwyg - 7.x-2.1
• CKEditor - 3.x.x
• Syntax Highlighter - 7.x-2.x
• Syntax Highligther Insert - 7.x-1.0
• Alex Gorbatchev Syntax Highlighter - 3.0.83

 モジュールの設定

• Wysiwyg Profilesの設定
• Admin管理画面（Home > Administration > Configuration > Content authoring > Wysiwyg profiles）でWysiwyg Profilesを開く
• CKEditorまたはTinyMCEエディターの「編集」ボタンをクリックして、エディターの詳細設定画面を開く
• 「BUTTONS AND PLUGINS 」メニューに「Insert syntaxhighlighter」タグをチェックする

Text Formatsの設定

• Admin管理画面（Home > Administration > Configuration > Content authoring > Text formats）でText Formatsを開く
• CKEditorまたはTinyMCEエディターに組み込まれたフォーマット（例：FullHTML、FiltedHTML）の「編集」ボタンをクリックして、詳細設定画面を開く
• 「Enabled filters」欄に「Syntax highlighter」をチェックして、有効化する
• フィルタの順序：　「Syntax highlighter」　⇒　 「Convert line breaks into HTML」　（これが重要）
  

Syntax Highlighterの設定

• Admin管理画面（Home > Administration > Configuration > Content authoring > Syntax highlighter）でSyntax highlighterを開く
• 「Enabled Languages」欄から必要な言語を選択する
• 「Tag name」欄にある初期タグ「<pre>」を使用する

Syntax Highlighterの使用

•  新しいコンテンツ（例：Article）の作成/編集画面を開いて、「Insert Syntax Highlighter」ボタンが現れる
  
• 「Insert Syntax Highlighter」ボタンをクリックして、Syntax Highlighter設定画面が開かれる
• 必要な条件を設定して、「Inser SyntaxHighlighter Tag」ボタンをして、コード入力のエリアが表示される
  
• コード入力エリアにコードを入力して、保存ボタンを押すと、ハイライトされたコードが表示画面に現れる

問題点

•  現時点、CKEditorがうまく動作していない
• TinyMCEが動作しているが、一行ですべてのコードを表示している（原因はコードに<br>タグが自動に挿入された）

解決

• CKEditorが対応していないようで、解決方法がまだ見つかっていない。
• TinyMCEで、HTMLソース編集（<pre>タグを手動で追加）すれば、コードがうまくハイライトされている