これは何?
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
はー、いろんな意味で長かった。
はじめまして。
「リッチテキスト フォーム」で検索した結果、このブログエントリーに
たどり着きました。アイコンやシンプルな機能が程よくまとまっていて、
とても気に入りました。これ、とってもイイです!!
突然のお願いで恐縮なのですが、現在構築中のサイトで
このサンプルコードを改造して使用してもよろしいでしょうか?
神経質かもしれませんが、著作権がらみで後々、問題を引き起こしたくないもの
ですから…。
お忙しいところ恐縮ですが、ご検討をよろしくお願い致します。
> nyajilaさん
お問い合わせありがとうございます。
そうですね、ライセンス形態を明示するのを忘れてましたm(__)m
The MIT License:Licensing
http://www.opensource.jp/licenses/mit-license.html
MITライセンスとします。
無償・無保証・無補償ですが、商用・非商用問わず無償でご利用いただけます。
ぜひぜひ気軽にお使いください。