CKEditor をローカルPCでHTML(WYSIWYG)エディタもどきとして使用する

はじめに

windows環境でフリーのHTMLエディタを探したところ、適当なのが見つからずにCKEditorエディタなるものが検索にヒットしたので調べてみたらwebアプリだったので、それを出来るだけwindows環境でローカルアプリのように使用出来るようにしてみた。

まずはカスタマイズを一切せずに使用してみる

以下のコードをCKEditor.htmと名前を付けて保存し、ブラウザで開いてみる

CKEditor.htm

<script src="https://cdn.ckeditor.com/4.16.0/full-all/ckeditor.js"></script>
<textarea name="editor1" id="editor1"></textarea>

<script>
const editor = CKEDITOR.replace('editor1');
</script>

メニューの左上のソースというボタンで、htmlフォーマットとソースコードを切り替えて、ソースコードをクリップボードにコピーすれば、最小限のHTMLエディタとして機能させることが出来ます。

いろいろカスタマイズして使い勝手を良くしてみる

やりたいこと

1. 起動時に最大化して起動する
2. ファイルを開くコマンドを追加する
3. 保存ボタンで、ファイルを保存出来るようにする
   保存ボタンを有効にするには、<textarea>タグを<form>タグで囲みます
   保存時にダイアログを表示するには、ブラウザの設定が必要です
   例：Google Chromeの場合
   
4. ウィンドウを閉じるときに確認メッセージを表示させる
5. 自分用のcssファイルを用意して、適用できるようにする
6. インデント(字下げ)を１文字単位に変更する（デフォルトでは40px単位）

CKEditor.htm

<script src="https://cdn.ckeditor.com/4.16.0/full-all/ckeditor.js"></script>
<form>
<textarea name="editor1" id="editor1"></textarea>
</form> 

<script>
//ファイルを開くボタン押下時のファイル読込み処理
function onOpenFileChange(event) {
  const file = event.target.files[0];
  if(file){
    filename = file.name;
    const reader = new FileReader();
    reader.readAsText(file);
    reader.onload = () => {
        editor.setData( reader.result );
    };
  }
}

//ファイルを開くボタン押下処理
function OpenFile(editor) {
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'text/html';
  input.setAttribute('onchange', 'onOpenFileChange(event)');
  input.click();
}

//保存ボタン押下処理
function SaveFile(editor) {
  const a = document.createElement('a');
  a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(editor.getData());
  a.download = filename;
  a.click();
}

CKEDITOR.on('instanceReady', function (event) {
    //保存ボタン置換え
    var overridecmd = new CKEDITOR.command(editor, {exec: SaveFile});
    event.editor.commands['save'].exec = overridecmd.exec;

    //最大化する
    event.editor.execCommand('maximize');
});

let filename = '';
//インデント（字下げ）の単位を1文字に変更する
CKEDITOR.config.indentUnit = 'em';
CKEDITOR.config.indentOffset = 1;
//スキンを適用し、見た目を変更する
CKEDITOR.config.skin = 'moono'; 
//ユーザ定義のCSSを適用する
CKEDITOR.config.contentsCss =  [ './style.css']; 
const editor = CKEDITOR.replace('editor1');

//エディタのプラグインが呼び出される際のcallback
editor.on('pluginsLoaded', function(event) {
  //ファイルを開くボタンを追加する
  this.ui.addButton('openFile', {
    label: 'ファイルを開く', 
    command: 'openFile', 
    toolbar: 'document,3',  //ボタンを追加するtoolbarと位置を指定
    icon: 'https://icongr.am/fontawesome/folder-open-o.svg' 
  });
  this.addCommand('openFile', {exec: OpenFile});
});

//ウィンドウを閉じる時に確認メッセージを表示させる
window.addEventListener('beforeunload', function(event) {
  event.preventDefault();
  event.returnValue = '';
});
</script>

style.css

body
	{background-color:#FEF2DB;}
p
	{margin:2px 0;
	text-align:justify;
	text-justify:inter-ideograph;
	font-size: 1.0em;
	font-family:sans-serif;}
hr
	{margin:20px 0;}
h1
	{margin:8px 0;
	text-align:justify;
	text-justify:inter-ideograph;
	font-size: 1.2em;
	font-family:sans-serif;}
a:link
	{color:blue;
	text-decoration:underline;
	font-family:sans-serif;}
a:visited
	{color:purple;
	text-decoration:underline;
	font-family:sans-serif;}

CKEditor.htm
style.css
を同じフォルダにコピーして、CKEditor.htm をブラウザで開きます

環境

OS : WINDOWS 10
ブラウザ : Google Chrome
CKEditorバージョン : CKEditor4

参考

CKEditor4 リファレンス
CKEditor4 Githubリポジトリ
ブログ記事等のエディタを実装する際はCKEditor！さらに便利でカッコよく使い易く！サンプルソースあり
javascript - CKEditorの[保存]ボタンでクリックイベントをキャプチャする方法
Webデザインで使えるWebアイコンのCDNサービス「icongram」