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

| コメント(2) | トラックバック(1)

これは何?

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

謝辞

パレットのイベント登録は↓の方法を使わせていただきました。

最速インターフェース研究会 :: Shibuya.js #2 でしゃべってきました
http://la.ma.la/blog/diary_200607031938.htm

アイコンは↓を使わせていただきました。

famfamfam.com: Icons
http://www.famfamfam.com/lab/icons/

todo

パレットが一回で開かない。
Greasemonkeyでテキストエディタに組み込む。


関連資料

日本語での解説

リッチテキスト編集の差分 (Rev.23,最新版) - とみぞーノート
http://wiki.bit-hive.com/tomizoo/pgdiff/?pg=%A5%EA%A5%C3%A5%C1%A5%C6%A5%AD%A5%B9%A5%C8%CA%D4%BD%B8&rev=23


IEの仕様

Command Identifiers
http://msdn.microsoft.com/workshop/author/dhtml/reference/commandids.asp
Undo、Redoともに
Not currently supported.


Firefox 日本語での解説

リッチテキスト編集 仕様
http://www.mozilla-japan.org/editor/midas-spec.html


Firefox 英語での解説

Midas - MDC
http://developer.mozilla.org/en/docs/Midas

Midas Specification
http://www.mozilla.org/editor/midas-spec.html


↓firefoxでクリップボードを有効にするには、ややこしい設定が必要?>必要ないような・・・?

Setting Prefs for the Mozilla Rich Text Editing Demo
http://www.mozilla.org/editor/midasdemo/securityprefs.html


はー、いろんな意味で長かった。

トラックバック(1)

トラックバックURL: http://a-h.parfe.jp/mt6/mt-tb.cgi/180

prototype.js関連のUrl一覧 Prototype 【別窓】 prototype.jsとは - はてなダイアリー 【別窓... 続きを読む

コメント(2)

はじめまして。

「リッチテキスト フォーム」で検索した結果、このブログエントリーに
たどり着きました。アイコンやシンプルな機能が程よくまとまっていて、
とても気に入りました。これ、とってもイイです!!

突然のお願いで恐縮なのですが、現在構築中のサイトで
このサンプルコードを改造して使用してもよろしいでしょうか?

神経質かもしれませんが、著作権がらみで後々、問題を引き起こしたくないもの
ですから…。

お忙しいところ恐縮ですが、ご検討をよろしくお願い致します。

> nyajilaさん

お問い合わせありがとうございます。
そうですね、ライセンス形態を明示するのを忘れてましたm(__)m

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

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

ぜひぜひ気軽にお使いください。

コメントする

このブログ記事について

このページは、AUSGANG SOFTが2006年12月13日 12:46に書いたブログ記事です。

ひとつ前のブログ記事は「ワンキーで、"ページのタイトルとURLをコピー"」です。

次のブログ記事は「これまで作ったGreasemonkeyスクリプト まとめ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ