WYSIWYGエディタって何？

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

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

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

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

作成手順

1. ダウンロードするパッケージの種類を選ぶ

中に入っているプラグインの数が変わります。カスタマイズしたいのであれば右のCustomizeを選択

2. プリセットの選択

先ほどと同じですが、ベースとなるプリセットを選びます。

3. プラグインの追加と削除

必要なプラグインを取捨選択します。右側から左側に必要なプラグインをドラッグ&ドロップで移動させます。（不要なプラグインは逆方向）
英語ですが簡単に説明もあり、詳細ページのリンクもあります。

4. 好きな見た目と、言語の選択

5. ダウンロード！

これで作成されたパッケージは以下の構成になっていると思います。
(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側からのリンク変わるだけなので正直どこでも良いですが…）

2. 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 で行います。


/**
 * @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

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も

.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;
}

結果

　送信データ

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

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

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

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