#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;
}
#結果
UI
送信データ
意外と簡単に実装できてびっくりでした！
余計なプラグイン入れてるのでごちゃごちゃしてますが、取捨選択することでイイカンジのエディタが簡単に作れそうです
何か気づきや不備あればぜひコメントください