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



# はじめに

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

https://takanaweb5.github.io/CKEditor/CKEditor.htm


# まずはカスタマイズを一切せずに使用してみる
以下のコードを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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411106/9d3038dc-0514-f1ed-05e6-b75ea45a3d91.png)
メニューの左上のソースというボタンで、htmlフォーマットとソースコードを切り替えて、ソースコードをクリップボードにコピーすれば、最小限のHTMLエディタとして機能させることが出来ます。

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

## やりたいこと
1. 起動時に最大化して起動する
2. ファイルを開くコマンドを追加する
3. 保存ボタンで、ファイルを保存出来るようにする  
 保存ボタンを有効にするには、```<textarea>```タグを```<form>```タグで囲みます  
 保存時にダイアログを表示するには、ブラウザの設定が必要です  
 例：Google Chromeの場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411106/fca4b4d4-f3ad-51a1-3fdd-63fe255dccf7.png)
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 リファレンス](https://ckeditor.com/docs/ckeditor4/latest/api/index.html)
[CKEditor4 Githubリポジトリ](https://github.com/ckeditor/ckeditor4)
[ブログ記事等のエディタを実装する際はCKEditor！さらに便利でカッコよく使い易く！サンプルソースあり](https://qiita.com/kenzooooo/items/ecdce2b12a72cb750a18)
[javascript - CKEditorの[保存]ボタンでクリックイベントをキャプチャする方法](https://cloud6.net/so/javascript/659338)
[Webデザインで使えるWebアイコンのCDNサービス「icongram」](https://co.bsnws.net/article/314)