WYSIWYGエディタをCKEditorで作ってみた

#WYSIWYGエディタって何？
「What You See Is What You Get（見たままが得られる）」エディタ。うぃじうぃぐって読むらしけど誰が読めるんやろう。

ユーザー側からタグ付けとかスタイリングとかをさせることなく、
簡単に良い感じに文章が作れるエディターです。
イメージでいうとQiitaとかWordpressの投稿のエディタ画面みたいな感じです。

これを簡単に実装できる方法を紹介します:rolling_eyes:

##CKEditor vs Draft.js

実装しようと思い、調べましたがものすごく種類あるみたいですね。
https://qiita.com/rana_kualu/items/fc752de7d4f2224b29ee

最終2候補で悩みましたが、結局表題の通りCKEditorを使用しました。
理由はReact案件ではないことがメインです。（Reactが入ってるか否かで使い分けてもいいかも）

###CKEditor
2003年から存在する老舗の安定したWYSIWYGエディター。
高水準のプラグインが多く、プラグインをCKEditorに組み込むことでほとんどのニーズがカバーできそう。

###Draft.js
Facebook製で、単純な編集動作を備えたReactベースのWYSIWYGエディターコンポーネント
Reactを使ったプロジェクトなら相性良いと思う
参照：https://qiita.com/mottox2/items/9534f8efb4b09093a304

#パッケージ作成方法
早速作成方法についてです。
webpackでもcdnでも作成できますが、パッケージをダウンロードするのが個人的にはおすすめです。

理由としては以下の通り！

- CKEditorのダウンロードページを通して直感的に好みのパッケージを作成できる。
- パッケージ内のコードを変更することで簡単にカスタマイズができる。

##作成手順

https://ckeditor.com/ckeditor-4/download/

### 1. ダウンロードするパッケージの種類を選ぶ
中に入っているプラグインの数が変わります。カスタマイズしたいのであれば右のCustomizeを選択
![スクリーンショット 2019-10-01 19.08.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/334e5452-f53d-4393-fdf5-d1c38c25a750.png)

### 2. プリセットの選択
先ほどと同じですが、ベースとなるプリセットを選びます。
![スクリーンショット 2019-10-01 19.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/e003c3d0-c171-1125-3fbc-54b5d6dcded4.png)

### 3. プラグインの追加と削除
必要なプラグインを取捨選択します。右側から左側に必要なプラグインをドラッグ&ドロップで移動させます。（不要なプラグインは逆方向）
英語ですが簡単に説明もあり、詳細ページのリンクもあります。
![スクリーンショット 2019-10-01 19.09.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/ddea0ac5-1726-79e7-5b68-fd0738d4eb48.png)

### 4. 好きな見た目と、言語の選択
　　![スクリーンショット 2019-10-01 19.10.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/2c79c0d3-8473-e1d1-8133-d99f772ef68d.png)

### 5. ダウンロード！
![スクリーンショット 2019-10-01 19.10.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/a0122158-2521-4262-440f-76c59279cd0f.png)

これで作成されたパッケージは以下の構成になっていると思います。
(Imageとか、要らないファイルとか多いです。必要に合わせて消しても良いかと思います）

```
├── ckeditor
│   ├── CHANGES.md
│   ├── LICENSE.md
│   ├── README.md
│   ├── adapters
│   │   └── jquery.js
│   ├── build-config.js
│   ├── ckeditor.js
│   ├── config.js
│   ├── contents.css
│   ├── lang
│   │   ├── ...
│   ├── plugin.js
│   ├── plugins
│   │   ├──...
│   │   │ 
│   ├── samples
│   │   
│   ├── skins
│   │   └── ...
│   ├── styles.js
│   └── vendor
│       └── promise.js
```

## 使用方法

### 1. ファイル設置

先ほどの呼び出すHTMLと同階層に設置してください
（HTML側からのリンク変わるだけなので正直どこでも良いですが…）
![スクリーンショット 2019-10-02 10.30.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/c98f9432-b828-b566-5ba2-32dfeb528520.png)

### 2. HTML記述

```html
<body>
    <div class="container">
      <form id="editor">
        <!-- textareaのクラス名にckeditorを指定するとcekditorに置き換わる -->
        <textarea class="ckeditor" name="editor"></textarea>
        <input id="editor__submit" type="submit" value="SEND">
      </form>
      <div class="preview"></div>
    </div>
    <!-- ckeditor下のckeditor.jsを呼び出す -->
    <script src="../ckeditor/ckeditor.js"></script>
    <script src="./js/app.js"></script>
  </body>
```

### 3. ckeditor編集

ckeditorの編集は `ckeditor/config.js` で行います。

```js

/**
 * @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 ) {
	// 必要なボタンはtoolbarGroupに追加
	config.toolbarGroups = [
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'forms' },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'tools' },
		{ name: 'others' },
		{ name: 'about' }
	];
	// 環境問わず表示を日本語にする
	config.language = 'ja';
	// デフォルトのheightを変更
	config.height = 300;
};

```

＊注記
heightはデフォルトで200,widthは100%になっている
https://ckeditor.com/docs/ckeditor4/latest/features/size.html

configで変えられる設定はこちら
https://ckeditor.com/docs/ckeditor4/latest/features/

### 4. おまけ

変換後が見えるようにプレビュー画面を作成 
(send押したらデータを下のプレビュー画面に反映）
`js/app.js`

```js
import $ from "jquery"

$(function(){
    const editorSubmit = $('#editor__submit')
    editorSubmit.on("click",function(e){
        e.preventDefault();
        // 送られるデータはCKEDITOR.instances.name属性名.getData()で取得可能
        const data = CKEDITOR.instances.editor.getData();
        // プレビュー画面に表示
        $(".preview").html(data)
    })
})
```

テキトーにCSSも

```css
.container {
  margin: 50px;
  width: 60%;
}
#editor__submit {
  margin: 30px auto;
  padding: 10px;
  border-radius: 2px;
  border: 1px solid #d3d3d3;
  background: #d3d3d3;
  width: 100%;
}
.preview {
  min-height: 500px;
  border: 1px solid #d3d3d3;
  padding: 20px;
  line-height: 3;
}
```

#結果

　UI
![スクリーンショット 2019-10-02 11.31.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/86576e27-1527-68dd-de2b-dd8f1f71a278.png)

　送信データ
![スクリーンショット 2019-10-02 11.34.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325594/6855fb24-c82d-4cf7-457e-3e98319903c0.png)

意外と簡単に実装できてびっくりでした！

余計なプラグイン入れてるのでごちゃごちゃしてますが、取捨選択することでイイカンジのエディタが簡単に作れそうです:sunglasses:

何か気づきや不備あればぜひコメントください:relieved: