これは何？
prototype.jsベースで、IE、Firefox、Opera、SafariをサポートするWYSIWYGエディタライブラリです。
車輪の再発明もいいところなのですが、なるべくシンプルなWYSIWYGエディタライブラリが欲しくて作りました。
どんなもの？
↓使ってみてください。RSSリーダーで購読されてる方は、こちらから ご覧ください。
コードを整える
基本コード こちらからダウンロード できます。
<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>
ライセンス
Open Source Initiative OSI - The MIT License:Licensinghttp://www.opensource.jp/licenses/mit-license.html
MITライセンスとします。
開発動機
数ヶ月前･･･
技術メモ帳 - Iframe の designMode="on" によるリッチテキストエディットhttp://d.hatena.ne.jp/lurker/20060930/1159617939
さらに追記:
Firefox only かと思ったらSafari でも普通に動いた。
この調子なら、きっと Opera も大丈夫だ。
な、なんだってーー!!
と思って、自宅のMacで試したところ動かない。
Surfin’ Safari - Blog Archive ? WebKit Fixes in Safari 2.0.2 / Mac OS X 10.4.3http://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を使ってねという旨のメッセージが表示されます。
追記 ：
WYSIWYG comes to Safari 1.3 » All Forceshttp://allforces.com/2005/04/19/wysiwyg-comes-to-safari-13/
各ブラウザの挙動メモ
このリッチテキストエリアは、iframeのdesignMode属性をONにすることで実現してます。
Safariはremoveformatできない。iframeのonloadが効かない。
IEはUndo・Redo効かない。(VOXはできてるので方法はあるのかも)
各コマンド時に出力されるHTML
あとでまとめる。＞誰かまとめて頭おかしい 超個性的。
注意点
・Firedoxでの問題
Firefoxユーザーは、mozlessの0.1.11以前のバージョンを入れていると今回のようなリッチテキストエリアでカーソルをキーボードで移動させることができません。
しかも、ウチだけなのかもしれませんが、mozless-0.1.12を入れるとmozlessのキーがkeyconfigの"キーボードショートカットのカスタマイズ"メニューに出なくなり、従来カスタマイズしていたmozlessのキーも無効になってしまいます。これはかなり痛い＞＜
それから個人的にsuperscrollというスペースを押した時のスクロールをコントロールする機能拡張をFirefox2.0に無理やり対応させて使っていたのですが、これも同様にカーソルがキーボードで操作できない現象を起こしていました。
Out of Sync - スペースキーで LDR っぽいスクロールを実現する Greasemonkey スクリプトhttp://d.hatena.ne.jp/nagaton/20060831/1156993415
ずっと、Gmailなどのリッチテキストエリアでカーソルがキーボードで動かせないのはFirefoxの謎仕様だとばかり思ってたorz
