prototype.jsでクロスブラウザなWYSIWIGエディタ

これは何？

prototype.jsベースで、IE、Firefox、Opera、SafariをサポートするWYSIWYGエディタライブラリです。

車輪の再発明もいいところなのですが、なるべくシンプルなWYSIWYGエディタライブラリが欲しくて作りました。

どんなもの？

↓使ってみてください。RSSリーダーで購読されてる方は、こちらからご覧ください。

コードを整える

"コードを整える"のチェックをはずすとブラウザ本来のHTMLを出力します。
文字サイズの変更は、Firefoxのみ動作します。

基本コード
サンプルはこちらからダウンロードできます。
まだ荒削りなので、実際に使えるかわかりませんけれど。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="crosseditor.js"></script>
<link href="crosseditor.css" media="screen,print" rel="Stylesheet" type="text/css">

<ul id="menu"></ul>

<div id="pallete"></div>

<input name="checkbox" type="checkbox" id="translate" value="checkbox" checked="checked">

<label for="translate">コードを整える</label>

<div style="clear: both"><iframe id="edit" frameborder="0"></iframe></div>

<div id="preview"></div>

<textarea name="textfield" id="html"></textarea>

ライセンス

Open Source Initiative OSI - The MIT License:Licensing
http://www.opensource.jp/licenses/mit-license.html

MITライセンスとします。
無償・無保証・無補償ですが、商用・非商用問わず無償でご利用いただけます。

開発動機

数ヶ月前･･･

技術メモ帳 - Iframe の designMode="on" によるリッチテキストエディット
http://d.hatena.ne.jp/lurker/20060930/1159617939

さらに追記:

Firefox only かと思ったらSafari でも普通に動いた。

この調子なら、きっと Opera も大丈夫だ。

な、なんだってーー!!
Safariでも動く!？マジで!!

と思って、自宅のMacで試したところ動かない。
うーん、なぜだ!?と思って調べたところ

Surfin’ Safari - Blog Archive ? WebKit Fixes in Safari 2.0.2 / Mac OS X 10.4.3
http://webkit.org/blog/?p=32

Fixed designMode to allow editing in an <iframe> when the src attribute is "" or about:blank.

とあり、別のMacで試したところ、Safari 2.0.2以降なら動作しました。
Operaももちろん動いたので、じゃあライブラリにしてみようかと。

なので

・Safari1系はサポートしてません

クロスブラウザと謳ってますが、Panther以前のOSXでSafari1系使ってるユーザーは切り捨ててしまいます。

VOXはSafariだと、Firefoxを使ってねという旨のメッセージが表示されます。
僕も家では、まだPanther(OSX 10.3)なので、正直悲しいんですが。FirefoxよりSafariのが軽快に動作するので。Camino使えって話もありますが。

追記：
と書いたのですが、↓どうもSafari1.3系以降でサポートされてる模様。要調査。

WYSIWYG comes to Safari 1.3 » All Forces
http://allforces.com/2005/04/19/wysiwyg-comes-to-safari-13/

各ブラウザの挙動メモ

このリッチテキストエリアは、iframeのdesignMode属性をONにすることで実現してます。
ただしブラウザ毎に微妙に挙動が異なります。

Safariはremoveformatできない。iframeのonloadが効かない。

IEはUndo・Redo効かない。(VOXはできてるので方法はあるのかも)

各コマンド時に出力されるHTML

あとでまとめる。＞誰かまとめて
ブラウザ毎にだいぶ異なります。
それらをなるべくまともなHTMLに整形して出力してます。
Safariの吐くコードは頭おかしい超個性的。

注意点

・Firedoxでの問題

Firefoxユーザーは、mozlessの0.1.11以前のバージョンを入れていると今回のようなリッチテキストエリアでカーソルをキーボードで移動させることができません。
この問題はmozless-0.1.12でfixされています。
ただしFirefox2.0には未対応で更新確認にも出ないので、手作業で入れる必要があります。

しかも、ウチだけなのかもしれませんが、mozless-0.1.12を入れるとmozlessのキーがkeyconfigの"キーボードショートカットのカスタマイズ"メニューに出なくなり、従来カスタマイズしていたmozlessのキーも無効になってしまいます。これはかなり痛い＞＜

それから個人的にsuperscrollというスペースを押した時のスクロールをコントロールする機能拡張をFirefox2.0に無理やり対応させて使っていたのですが、これも同様にカーソルがキーボードで操作できない現象を起こしていました。
↓こちらのGreasemonkeyに乗り換えました。

Out of Sync - スペースキーで LDR っぽいスクロールを実現する Greasemonkey スクリプト
http://d.hatena.ne.jp/nagaton/20060831/1156993415

ずっと、Gmailなどのリッチテキストエリアでカーソルがキーボードで動かせないのはFirefoxの謎仕様だとばかり思ってたorz