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ファイルに追加します(rainbow.css)。
.hljs {
display: block;
padding: 0.5em;
background: #002b36;
color: #839496;
white-space: pre !important; --->スライダー表示
overflow-x: auto; --->これは任意（領域内にスライダー表示）
}
各cssの配色は下記リンク参照。
https://highlightjs.org/static/demo/
以下ファイル内でCKEditorのプラグインcodesnippetを指定。
/app/Resources/views/layout.html.php
.....
.....
<head>
.....
.....
<link href="/bundles/pimcoreadmin/js/lib/ckeditor/plugins/codesnippet/lib/highlight/styles/rainbow.css" rel="stylesheet">
<script src="/bundles/pimcoreadmin/js/lib/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
.....
.....
</head>
.....
.....
スライダー右移動時のコンテンツ右側余白0
display: block ---> display: inline-block へ変更
bundles/pimcoreadmin/js/lib/ckeditor/plugins/codesnippet/lib/highlight/styles/rainbow.css
.hljs {
display: inline-block; padding: 0.5rem;
background: #474949; color: #D1D9E1;
white-space: pre !important;
}
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';
};
CKEditorビルダーページによる各プラグインオプションの追加とスキンを指定してダウンロード
- Fullを選択
- Reset presetを押してcode snippet, source dialog を選択
- Moonoスキンを選択
- 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の該当バージョンをダンロードする際に表示される依存プラグインを全てインストール
新たにインストールしたプラグイン
CKEdior4.12.1プラグイン一覧
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.16.1へアップグレード
1. Fullを選択
2. Reset presetを押してcode snippet, source dialog を選択
Available pluginsからcode snippet, source dialogを選択し、左側矢印ボタンをクリックしてSelected pluginsにリストアップします。これら依存プラグイン確認のためWebsiteをクリック、各プラグインのWebsiteから直接ダウンロードすると依存プラグインが表示されますが、依存プラグインはセットに含まれています。
code snippet, source dialogの依存プラグイン
3. Moono-Lisaスキン、LanguageにEnglishを選択
4. Optimizedをチェックしてダウンロード
5. CKEditorのアップロード
ダウンロードしたckeditor4.16.1のzipファイルを展開後、展開したフォルダを
/var/www/test-site/web/bundles/pimcoreadmin/js/libにコピーします。
（cofig.jsは編集する必要はありません）。
[CKEDITOR] Error code: exportpdf-no-token-url.
メモリ負荷が大きいためとフリーではないため、以下のプラグインexportpdfを無効化。
/public/bundles/pimcoreadmin/js/lib/ckeditor/config.js
/**
* @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.removePlugins = 'exportpdf';
};
