みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて．Python, Javascript, Processing, Unityなど．

WYSIWYGエディタの分類とまとめ

セキュリティ JavaScript

ユーザーが入力した文字列に，太字や斜体などの書式を見たまま編集できるエディタをWYSIWYGエディタ　(ウィジウィグエディタ)と呼びます．広義にはMicrosoft WordやPages, LibreOffice Writerなどのワープロソフトウェアも含まれるかもしれませんが，この記事では，Javascriptを利用してブラウザで動作する見たまま編集できるエディタを指すこととします．WYSIWYGエディタを公開日が古い順番でまとめてみました．

エディタ

CKEditor 4

Smart Visual Text Editor for HTML

GPLライセンス，2006年公開

<iframe>
    #document
    <html>

    <body contenteditable="true">
        <!-- html elements -->
    </body>

    </html>
</iframe>

CLEditor

jqueryで扱えるエディタ

MITライセンス，2010年公開

<textarea style="border: none; margin: 0px; padding: 0px; display: none;"></textarea>
<iframe>
    #document
    <html>

    <body>
        <!-- html elements -->
    </body>

    </html>
</iframe>

Simple Demo - CLEditor

XSSで攻撃可能な脆弱性が報告されており，2022/03/13現在修正されていません．

Quill

Quill is a free, open source WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need.

BSDライセンス，2014年公開

<div contenteditable="true">
    <!-- html elements -->
</div>

Quill.js

CKEditor 5

GPLライセンス，2016年公開

CKEditor 5 provides every type of WYSIWYG editing solution imaginable. From editors similar to Google Docs and Medium, to Slack or Twitter like applications, all is possible within a single editing framework.

<div contenteditable="true">
    <!-- html elements -->
</div>
CKEditor 5

ProseMirror

A toolkit for building rich-text editors on the web

MITライセンス，2016年公開

<div contenteditable="true">
    <!-- html elements -->
</div>

See the Pen ProseMirror Demo by Jessie (@JessieWooten) on CodePen.

ProseMirror basic example

Draft.js

Rich Text Editor Framework for React

MITライセンス，2016年公開

<div contenteditable="true">
    <!-- html elements by React.js -->
</div>

See the Pen Rich Text Editor - Draft.js example by Avanthika (@AvanthikaMeenakshi) on CodePen.

Draft.js

Slate

Slate is a completely customizable framework for building rich text editors.

MITライセンス，2016年公開

<div contenteditable="true">
    <!-- html elements by React.js -->
</div>

https://www.slatejs.org/examples/richtext

2022/03/13現在ベータ版です．

TinyMCE 5

The WYSIWYG editor known, and loved, by millions of developers worldwide. TinyMCE is built to fit seamlessly into your product or website. From workflow automation to email builders and more, TinyMCE is the professional development team editor of choice.

LGPLライセンス，2018年公開

<textarea style="display: none;"></textarea>
<iframe>
    #document
    <html>

    <body>
        <!-- html elements -->
    </body>

    </html>
</iframe>

See the Pen TinyMCE Autosave by Afroze Khan (@auk2) on CodePen.

Features | The World's Most Advanced Rich Text Editor Full Feature List | TinyMCE

はてなブログの見たままモードで採用されていると思われます．

まとめ

代表的なエディタを列挙しました．もちろん，上記に挙げたライブラリ以外にもたくさんのエディタがあります．

原理

多くのエディタは，contenteditable="true"を利用してDOMを編集可能にして，Javascriptで実現しているようです．iframeに入れたり入れなかったり，もとのtextareaを消したり残したり，仮想DOMを利用したりjqueryを利用したり純粋なJavascriptで実現したりと，エディタによって差があるようです．

クロスサイトスクリプティング（XSS）

WYSIWYGエディタを選択したり，新規に開発する場合は，特にXSSに注意しなければなりません．ユーザーが入力する文字列からそのままDOMを生成するのはセキュリティに問題があります．多くのエディタではDOMの生成に制限をつけて対策しているようですが，一部のエディタでは脆弱性が報告されているので注意が必要です．

IMEとの相性

contenteditable="true"を設定した場合は，input eventのみ利用可能です．input eventはIMEの未確定文字列も取得してしまうので，問題が生じる場合があり，デモで動作を確認するべきです．日本語を扱うサイトならばIME対応は必須だと思われます．change eventならばIMEが確定した文字列のみを扱えるので便利ですが，一部のinput, select, textareaのみが対応しており，contenteditable="true"を設定してもchange eventは発生しません．

WYSIWYGのデメリット

機能が増えるに従って，ボタンの数が増えてしまうので，どこに何があるのがわかりにくくなります．使いやすいUXにするためには工夫が必要です．

WYSIWYG(見たままを得られる)という名前がついていますが，常に正しい仕上がりになるわけではありません．内部データは単なるhtmlの文字列なので，スタイルシートが変わるだけで見た目は変わりますし，エディタの幅を変えるだけでも行数が変わったりします．内部データをユーザーに隠蔽して，常に見たままを得られるようなソフトウェアを設計したり，ある程度は内部データをユーザーに見せる設計のソフトウェアにしたりするなど，工夫が必要です．

WYSIWYGのメリット

あまりパソコンに詳しくないユーザーでも，ある程度直感で操作できる可能性が高い仕組みだと思われます．やはり大きなメリットがあるから，世の中でも頻繁に使用されています．需要があるからこそ，上記にたくさんエディタを列挙しましたが，それ以外にもまだまだたくさんのエディタが作られて公開されているのだと思います．