これは何?
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