ＣＫＥｄｉｔｏｒとＫＣＦｉｎｄｅｒを使って簡単なオンラインＨＴＭＬエディターを作った方法
2020/03/07
ふと思い立ちまして、ＷＹＳＩＷＹＧのオンラインＨＴＭＬエディタをＣＫＥｄｉｔｏｏｒで作ろうかなと。
調べたところＣＫＥｄｉｔｏｒの最新バージョンは５なんですが、どうも詳しいカスタマイズ方法の情報がまだ少ないようで。
それからＷｏｒｄｐｒｅｓｓのプラグインとして使い慣れてるＣＫＥｄｉｒｏｔが多分バージョン４らしいこと、さらにツールバーのデザインが好きというのもありまして。
今回はＣＫＥｄｉｔｏｒ４を利用することにして、その手順を覚書として記事にしておきますよ。
ＣＫＥｄｉｔｏｒのダウンロード
というわけでまずはＣＫＥｄｉｔｏｒをダウンロードすることにして、公式サイトのダウンロードページにアクセス。
https://ckeditor.com/ckeditor-4/download/
カスタマイズしたファイルを作るため、ここで一番右の「Ｃｕｓｔｏｍｉｚｅ」にある「ｏｎｌｉｎｅ ｂｕｉｌｄｅｒ」のボタンをクリック。
「ｏｎｌｉｎｅ ｂｕｉｌｄｅｒ」のページで、「１． Ｃｈｏｏｓｅ ｐｒｅｓｅｔ」の中から「Ｆｕｌｌ」を選択。
「２． Ｓｅｌｅｃｔ ｙｏｕｒ ｐｌｕｇｉｎｓ ａｎｄ ｓｋｉｎ」については、迂闊によく分からないプラグインを追加したりすると不具合が出るようなので。
とりあえずデフォルトのまま、変更を加えないことにします。
そして「Ａｖａｉｌａｂｌｅ ｓｋｉｎｓ」については、私の好きな「Ｍｏｏｎｏ Ｃｏｌｏｒ」を選択。
「３． Ｆｉｎａｌｉｚｅ ａｎｄ ｄｏｗｎｌｏａｄ」で、デフォルトの「Ｅｎｇｌｉｓｈ」に「Ｊａｐａｎｅｓｅ」だけ追加しまして。
「Ｉ ａｇｒｅｅ ・・・」とかいうチェックボックスにチェックを入れて、その下のラジオボタンは「Ｏｐｔｉｍｉｚｅｄ」のままで最後にダウンロードボタンをクリックします。
「Ｓｉｇｎ ｕｐ ｔｏ ｏｕｒ ｎｅｗｓｌｅｔｔｅｒ」とかいうポップアップが出ますが、必要無いので無視。
ダウンロードしたファイルのバージョンは、この時点では「４．１４．０」でしたよ。
ＣＫＥｄｉｔｏｒのインストール
インストールといっても、基本的にはダウンロードしたファイルを解凍して出てきた「ＣＫＥｄｉｔｏｒ」のフォルダをサーバにアップロードするだけです。
そしてアップロードが完了したら、ブラウザでサンプルフォルダにアクセスします。
例えば「ＣＫＥｄｉｔｏｒ」をインストールしたフォルダが「ｅｘａｍｐｌe．ｃｏｍ」のルートだとすると、アクセスするのは以下のようなＵＲＬになりますね。
http://example.com/ckeditor/samples/
ここでうまくインストールできてれば、以下のようなページが表示されます。
試しに、いろいろ使ってみると面白いですよ。
ツールバーなどのカスタマイズ
さて続いて、ツールバーなどのカスタマイズをやってみます。
前記のサンプルページの右上に「ＴＯＯＬＢＡＲ ＣＯＮＦＩＧＵＲＡＴＯＲ」というボタンがあるので、これをクリックするとツールバーのカスタマイズ用ページが表示されます。
右上に「Ｂａｓｉｃ」と「Ａｄｖａｎｃｅ」の切り替えボタンがありますが、「Ｂａｓｉｃ」のほうがグループでツールバーを設定して要らないボタンはリムーブコマンドで取り除く設定方法になってまして。
「Ａｄｖａｎｃｅ」のほうはアイテム単体で設定する方法になってるんで、ボタンの並び順などを細かく変更できるんですね。
ただ操作方法が「Ｂａｓｉｃ」のほうはチェックボックスなどを使って分かりやすそうで、コチラを使ったほうが簡単なようなのでコチラを使ってみましょう。
デフォルトではすべてのボタンにチェックが入ってるので、要らないと思われるボタンのチェックを外します。
例えば「Ｉｎｓｅｒｔ」グループの「Ｆｌａｓｈ」なんて要らないんで、このチェックを外してやりますが。
すると上部に表示されているツールバーから、「Ｆｌａｓｈ」のボタンが消えるのが確認できます。
ボタンの表示位置を変えたい場合は、矢印ボタンを押して移動することができますね。
望みのカスタマイズができたら、表示されているツールバーの右下にある「Ｇｅｔ ｔｏｏｌｂａｒ ｃｏｎｆｉｇ」ボタンを押下。
すると、セッティング用のソースが表示されましたよ。
これを「ＣＫＥｄｉｔｏｒ」の設定ファイルに貼り付けてやることによって、ツールバーのカスタマイズができるという仕組みです。
というわけで「ＣＫＥｄｉｔｏｒ」フォルダの中のファイル「ｃｏｎｆｉｇ．ｊｓ」を開きまして、以下のように貼り付けてやります。
/**
* @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/
CKEDITOR.editorConfig = function( config ) {
config.filebrowserImageBrowseUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/browse.php?type=images';
config.filebrowserImageUploadUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/upload.php?type=images';
config.filebrowserBrowseUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/browse.php?type=files';
config.filebrowserUploadUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/upload.php?type=files';
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Flash,Iframe,Language,BidiRtl,BidiLtr,Scayt';
};
ほかに編集エリアの幅や高さなどのカスタマイズとして、以下のような記述も設定できます。
config.height = 450;
config.width = '900';
config.contentsCss = 'ckeditor.css';
一番下の行は、編集エリアに適用するＣＳＳファイルを指定したときの例です。
エリア内の表示をカスタマイズしたいときは、別途ＣＳＳファイルを作ってこのように指定してやるといいんですね。
そして確認用として、以下の内容で「ｉｎｄｅｘ．ｈｔｍｌ」ファイルを作成してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="ckeditor.js"></script>
</head>
<body>
<div id="ckeditor"></div>
<script>CKEDITOR.replace( 'ckeditor' );</script>
</body>
</html>
ここで黄字の部分が青地の部分のスクリプトによって、「ＣＫＥｄｉｔｏｒ」の編集エリアに置き換えられるということで。
ちなみに今回は置き換えるエリアは＜ｄｉｖ＞要素にしましたが、同様にして＜ｔｅｘｔａｒｅａ＞要素などにもすることができます。
さてこの「ｉｎｄｅｘ．ｈｔｍｌ」を「ＣＫＥｄｉｔｏｒ」フォルダにアップロードして、上で中身を書き換えた「ｃｏｎｆｉｇ．ｊｓ」も同様に上書きアップロード。
最後にブラウザでこの「ｉｎｄｅｘ．ｈｔｍｌ」ファイルにアクセスしてやると、カスタマイズ済みのツールバーがセットされた「ＣＫＥｄｉｔｏｒ」の画面が確認できましたよ。
ＫＣＦｉｎｄｅｒのインストール
続けて、「ＫＣＦｉｎｄｅｒ」をインストールすることに。
「ＫＣＦｉｎｄｅｒ」は無くても＜ｉｍｇ＞タグ用のボタンはありますし、タグ挿入はできなくもないんですが。
画像ファイルのアップロードやＵＲＬの自動セットをするためには、「ＫＣＦｉｎｄｅｒ」があったほうが便利ですからね。
ちなみに同様のツールとして「ＣＫＦｉｎｄｅｒ」がありますが、そちらの利用は原則有料なんで今回は無料の「ＫＣＦｉｎｄｅｒ」を選びましたよ。
ただ実は「ＫＣＦｉｎｄｅｒ」は既に公式サイトは閉鎖されてまして、正規の更新はもちろん配布さえもされてない状況なんですが。
以下のｇｉｔｈｕｂにファイルがあったので、これを利用させていただくことに。
https://github.com/sunhater/kcfinder
ちなみにＯＳＤＮにもファイルがあったんですが、ｇｉｔｈｕｂのほうが新しそうだったのでコチラを選択しました。
さてダウンロードしたＺＩＰファイルを解凍しまして、中にあるフォルダ「ｋｃｆｉｎｄｅｒ－ｍａｓｔｅｒ」の名前を「ｋｃｆｉｎｄｅｒ」に変更しまして。
さらにその中の「ｃｏｎｆ」フォルダにある設定ファイル「ｃｏｎｆｉｇ．ｐｈｐ」をテキストエディタで開いて、以下の色付き部分のような変更を加えてやります。
// GENERAL SETTINGS
'disabled' => false,
'uploadURL' => (empty($_SERVER['HTTPS']) ? "http://" : "https://") . $_SERVER['SERVER_NAME'] . "/ckeditor/upload",
'uploadDir' => $_SERVER['DOCUMENT_ROOT'] . "/ckeditor/upload",
'theme' => "default",
// THE FOLLOWING SETTINGS CANNOT BE OVERRIDED WITH SESSION SETTINGS
'_sessionVar' => "KCFINDER",
'_check4htaccess' => false,
'_normalizeFilenames' => false,
'_dropUploadMaxFilesize' => 10485760,
//'_tinyMCEPath' => "/tiny_mce",
//'_cssMinCmd' => "java -jar /path/to/yuicompressor.jar --type css {file}",
//'_jsMinCmd' => "java -jar /path/to/yuicompressor.jar --type js {file}",
ここで注意が必要なのは、黄字の部分を「ｆａｌｓｅ」に変更したことによって誰でも「ＫＣＦｉｎｄｅｒ」のフォルダにアクセスできるようになるということ。
ですからＢＡＳＩＣ認証などでアクセス制限をして、セキュリティをしっかりしましょう。
青地の部分はファイルをアップロードするフォルダの指定になりますが、「ｕｐｌｏａｄＵＲＬ」にはフォルダのＵＲＬを設定。
そして「ｕｐｌｏａｄＤｉｒ」には、フォルダの絶対パスを指定してやります。
今回は「ＣＫＥｄｉｔｏｒ」の直下に、「ｕｐｌｏａｄ」フォルダが作成されるように指定してやりましたよ。
ちなみにココは相対アドレス・相対パスによる指定もできるんですが、相対だとウッカリ間違えたり混乱して不具合が出やすいんですよ。
ですから、絶対アドレス・絶対パスでの指定がオススメですね。
さて続いて緑字の部分ですが、デフォルドの「ｔｒｕｅ」のままだとアップロードフォルダに「．ｈｔａｃｃｅｓｓ」が作られます。
するとサーバ環境によってはアップロードしたファイルにアクセスできなくなる場合があるので、「．ｈｔａｃｃｅｓｓ」が作られないようにココを「ｆａｌｓｅ」に変更しました。
「ｔｒｕｅ」のままで問題が無ければそれでも構わないかも知れませんが、アクセス制限は別途自分でコントロールしたほうが良いかなと思いますよ。
というわけで変更を加えた「ＫＣＦｉｎｄｅｒ」フォルダを「ＣＫＥｄｉｔｏｒ」の直下にアップロードして、「ＫＣＦｉｎｄｅｒ」のほうは完了。
「ｕｐｌｏａｄ」フォルダは自動で作成されるので、作らなくても大丈夫です。
そして最後に、「ＣＫＥｄｉｔｏｒ」のほうの設定を変更してやります。
再び「ＣＫＥｄｉｔｏｒ」フォルダの中の「ｃｏｎｆｉｇ．ｊｓ」をテキストエディタで開きまして、以下の内容を追加してやります。
config.filebrowserImageBrowseUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/browse.php?type=images';
config.filebrowserImageUploadUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/upload.php?type=images';
config.filebrowserBrowseUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/browse.php?type=files';
config.filebrowserUploadUrl = location.protocol + '//' + location.hostname + '/ckeditor/kcfinder/upload.php?type=files';
黄字のほうが画像ファイルの設定で、青地のほうがその他のファイルの設定です。
どちらも「ＫＣＦｉｎｄｅｒ」の絶対ＵＲＬを指定してますが、今回は「ＣＫＥｄｉｔｏｒ」の直下に置いたので上記のような記述になりました。
ところで上記の設定ファイルでＵＲＬやパスにはサーバー変数やプロパティを使ってますが、もちろん「ｈｔｔｐ：」や「／」などから始まる値を直書きでセットしても同じです。
それでは、すべての設定とファイルのアップロードが終わったら結果を確認してみましょう。
ブラウザで「ＣＫＥｄｉｔｏｒ」にアクセスして画像挿入のボタンをクリックすると、次のように「サーバブラウザ」ボタンが表示されているのが確認できます。
これをクリックすると、以下のようなアップロードフォルダへのアクセス画面が表示されればＯＫです。
まとめ
これで、ＣＫＥｄｉｔｏｒとＫＣＦｉｎｄｅｒを使ったＷＹＳＩＷＹＧなオンラインＨＴＭＬエディタが作成できましたよ。
さらにファイルの読み込みや書き出しの仕組みを加えてやれば、ＣＭＳというほどじゃないですが簡単なサイト作成ツールなんてのもできそうですね。
面白そうなんで、続けていろいろ試してみようと思います。