Drupalのモジュール(CKeditor)にプラグイン（syntaxhighlighter）を入れた際にjsエラー

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）に必要なプラグイン追加は簡単にできます

  • 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にプラグイン追加は難しく、プログラミング必要はあります（いろいろな記事の紹介。。。）

Drupalのモジュール(CKeditor)にプラグインをモジュールパスにある「plugins」ディレクトリの下に入れるべき

Drupalのモジュール(CKeditor)に新規プラグイン追加時にモジュールパスにある「plugins」ディレクトリに入れるべき

  • モジュール(CKeditoer)をインストール時に、sites/all/libraries/ckeditorの本体をインストールします
  • CKEditorのプラグインフォルダが2か所にあります
    • sites/all/libraries/ckeditor/plugins
    • sites/all/modules/ckeditor/plugins
  • CKEditorのプラグインをモジュールパスにある「plugins」に入れるべきです

CKeditorモジュールパスにある「plugins」フォルダにあるプラグインがUIで管理されます

  • CKeditorモジュールがモジュールパスにあるプラグインをスキャンして、管理画面(ホーム » 管理 » 環境設定 » コンテンツ作成 にあるCKeditorのプロフィール編集画面)に表示させています（もしライブラリのディレクト：sites/all/libraries/ckeditor/pluginsに入れたら、管理画面で現れないです）
  • 上記図のように、追加されたプラグインのアイコンが管理画面に現れ、アイコンをドラグ・ドロップで移動して有効することができます

実際にライブラリのCKeditorに同じプラグインを入れてみたが、管理画面にそのプラグインが現れません

  • 同じプラグインをライブラリの「plugins」(sites/all/libraries/ckeditor/plugins)にインストールしため、モジュールCKeditorの管理画面にプラグインのアイコンがありません。
  • 無理矢理（config.jsに設定）に有効化したが（画面のプロパティでjsファイルを追跡確認）、アイコンはCKeditorウィンドウに現れなく（何かテクニックで表示させることができるかもしれないですが、むずかしそうです）、利用することはできないようです