Pimcore CKEditor Syntax Highlight; Code Snippet

PimcoreのデフォルトエディターであるCKEeditorのプラグイン、Code Snippetにより各種プログラムコードを強調表示させる方法について。
Pimcoreに限らずブログ用CMSでCKEditorが標準装備されている場合の参考にして下さい。
Syantaxhighlighterなどで強調表示させる方法もあるようですが、標準実装されているCKEditorのプラグインに同等の機能を有するものが幾つかあるのでこれを導入します。

今回導入するプラグインは、

Code Snippet


とそれに関連した次のプラグインです。

Widget

Line Utilities

CKEditorのバージョンに合致するものをダウンロードして解凍します。

CKEditorのpluginsフォルダに解凍したフォルダをコピーします。

CKEditorの設定ファイルである config.js にプラグインの設定を記述します。

config.extraPlugins = 'codesnippet,widget,lineutils';

を追加します。

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.extraPlugins = 'codesnippet,widget,lineutils';
};

CKEditorを読み込むページの<head>...</head>の部分に以下を追加します。

<head>
    ...
    <link href="ckeditor/plugins/codesnippet/lib/highlight/styles/default.css" rel="stylesheet">
    <script src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
</head>

htmlホームディレクトリからのパスを指定して下さい。
ブラウザの検証機能でパスの設定などのエラーが検出されないか確認して下さい。
強調表示の色配分などは指定するcssを変更することで可能です。詳細はプラグインのページで確認して下さい。

デフォルトのCSSでは半角スペース、タブ、改行をそのまま表示しないため white-space: pre; overflow-x: auto;/web/bundles/pimcoreadmin/js/lib/ckeditor/plugins/codesnippet/lib/highlight/styles 内で使用するcssファイルに追加します。

.hljs {
  display: block;
  padding: 0.5em;
  background: #002b36;
  color: #839496;
  white-space: pre !important; --->スライダー表示
  overflow-x: auto; --->これは任意(領域内にスライダー表示)
}

各cssの配色は下記リンク参照。

https://highlightjs.org/static/demo/

CKEditor4.9.2 full にバージョンアップ

ダウンロード
https://download.cksource.com/CKEditor/CKEditor/

Code Snippetの依存プラグインは、

Widget

Dialog

Lineutils

Widgedselection

上記プラグインは、一部中身のないホルダーのみ格納されているため、ダウンロード、インストールが必要です。

CKEditorの設定ファイルである config.js にはCode Snippetのプラグインのみを記述します。

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.extraPlugins = 'codesnippet';
};

Screenshot%20from%202018-10-03%2022-34-04

CKEditorビルダーページによる各プラグインオプションの追加とスキンを指定してダウンロード

https://ckeditor.com/cke4/builder

ckeditor_builder

  1. Fullを選択
  2. Reset presetを押してcode snippet, source dialog を選択
  3. Moonoスキンを選択
  4. Optimizedをチェックしてダウンロード

config.jsを編集します。

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.extraPlugins = 'codesnippet,widget,lineutils';
};

/var/www/test-site/web/bundles/pimcoreadmin/js/lib内のckeditorを削除後コピーします。

CKEditor4.12.1へアップグレード

Code Snippetプラグイン追加のため関連プラグインもインストール。

以下Code Snippetの該当バージョンをダンロードする際に表示される依存プラグインを全てインストール

新たにインストールしたプラグイン

1_plugins

CKEdior4.12.1プラグイン一覧

ckeditor_plugins

config.js を編集します。(編集する必要はありません)

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	config.extraPlugins = 'codesnippet,widget,lineutils';
};

ckeditorフォルダをサーバの該当箇所

vendor/pimcore/pimcore/bundles/AdminBundle/Resources/public/js/lib

にコピーしてアクセス権を変更します。ブラウザのキャッシュを削除してから読み込みます。

CKEditor4.14.1へアップグレード

https://ckeditor.com/cke4/builder

1. Fullを選択

2. Reset presetを押してcode snippet, source dialog を選択

Websiteをクリックしてプラグインを直接ダウンロードします。依存プラグインが表示されるので併せてダウンロードします。
ckeditor4-14-1
code snippet, source dialogの依存プラグイン
ckeditor4-14-1plugins

3. Moono-Lisaスキンを選択

4. Optimizedをチェックしてダウンロード

ダウンロードしたckeditor4.14.1のzipファイルを展開後、展開した依存プラグインをckeditor/pluginsフォルダへコピーします(cofig.jsは編集する必要はありません)。

5. CKEditorのアップロード
上記ckeditorフォルダ
/var/www/test-site/web/bundles/pimcoreadmin/js/libにコピーします。