Wiki for 3arrows制作日記 6 WYSIWYGエディターの試作

CMS やブログについている WYSIWYGエディターは、<p>タグで段落を囲んだり、基本的にクラスで見栄えを指定できないといった不満が、Webに携わる人にはあるかと思います。

自分のサイトに用意したcssのクラスや、その適用ルール(Pタグの下にimgがある場合は、イメージを左右に寄せるクラスを選べるとか)を簡単なjsonとかで用意して、WYSIWYGエディターの機能をカスタマイズしたいとか。

と、そんなことを半年前から、思っていました。

html Editorについてちょっと考え始める 2011/03/03

またはそんな動機じゃなくても、なにか特殊な俺様エディタを作りたいとか。

js製のWYSIWYGエディターはいくつか公開されていますが、いったいどうやっているのでしょう?カーソルを動かしたり、入力したり、スクロールしたり、を実装すると思うと頭が痛くなります。

iframeをdesignModeにするらしい

実は多くのjs製のWYSIWYGエディターはdesignModeというブラウザ自体が持つリッチテキスト編集機能を使っているそうです。jsをひたすら駆使して頑張っている、というわけでもないようです。

幸いにして、日本語で試作を公開しているページがあります。コードも短いのでいいですね。

簡易WYSIWYGエディタを作る
サンプルのWYSIWYGエディタ

このサンプルを触ってみると、件の改行時の<br>はブラウザのテキスト編集機能に由来しているのが分かります。

designModeを使わないWYSIWYGエディタ

そのdesignModeを使わないで、inputタグ等を使用したエディタの試作を公開しているページがあります。designModeはいくつか問題があるらしいということで試作に取り組まれたそうです。

designModeを使わないWYSIWYGエディターの試作
miceditorのサンプル
勉強会 Sugamo.cssでの発表の模様

  • 最小限の機能もまだ備えていませんが、コードが短いので理解しやすいです。
  • ブラウザのサポートが得られるdesignModeのようにはいかず、操作時の文字のカタツキ・チラツキが起こってしまいます。
  • タグで囲まれた文字の削除がうまくできません。
  • miceditorはMicroEngineというCMS用のjsエディタの候補として試作したそうです。MicroEngineのオンラインデモサイトを拝見しましたが、現在はniceditというエディタが使われていました。

で、以上のエディタを改造して見ました

琴線に触れるものがあったようで、気が付いたら手元でいじってました。

非designModeなWYSIWYGエディターの試作 - jsdo.it - share JavaScript, HTML5 and CSS

  • textNodeの操作を律儀に行うことで、操作時のカタツキを減らせました。
  • タグ内の文字、入れ子のタグに対しても正しく削除を行えます。多分。
  • エディタとして普通の水準に持っていくには、履歴やテキストのドラッグとかスクロールとか、まだまだたくさんの機能が要りますね (^-^;;

最後に

オレオレなエディタを作るための取っ掛かりが得られたので、良かったです。

ちなみに、jsDo.itデビューでした。開発は Aptana Studio で行ってコピペですが、サクサク公開できて便利ですね!