[錐] ブラウザ上でのリッチテキスト編集コマンドの比較表とテスト場を作ってみたよ。

■ [javascript]ブラウザ上でのリッチテキスト編集コマンドの比較表とテスト場を作ってみたよ。

ブラウザ上でリッチテキストが編集できるというのは最近 CMS などでよく見かけるようになりました。Google Docs や Wordpress あたりは有名ですね。

今回は、リッチテキスト編集のコマンド群を IE ・ Firefox で比較をした表と、実際に試し打ちをして挙動をチェックできる、コマンド全部盛りのテスト場を作ってみました。開発のお供にどうぞ。

まず、ブラウザ上でリッチテキストを編集させるようなコードは書いたことないよ聞いたことないよという方のために、簡単に解説します。IFRAME の一部属性をちょっといじることで、WYSWYG な編集のできるフィールドを追加することができます。そのフィールドに対して、各種コマンドを投げてやると、「太字にする」とか「リストを挿入する」とか、そういったワープロっぽい操作ができます。

HTML 文書内にてきとうな iframe を作って、

(Firefox の場合)
var editor = iframe.contentDocument;
editor.editableMode = 'on';

(IE の場合)
var editor = document.frames[index].document;
editor.editableMode = 'on';

で編集可能に。あとは適当に

editor.execCommand([コマンド名], [ユーザインターフェイスサポートの有無], [パラメタ]);

とコマンドを投げてやればOKです。成功すれば真、失敗すれば偽がかえってきます。コマンド名はケースインセンシティブです。大文字とか小文字とか気にする必要はありません。

で、そのコマンドがやたら色々あったり、ブラウザによって激しくサポート状況・挙動が違ったりするので、まとめておきました。それから、実際にどんな挙動をするか試せる遊び場を作ったので、もふもふしていってください。

→【もふもふ】リッチテキスト編集コマンド体験場【もふもふ】(コマンド全部盛り)

まちがっているところがあったら、twitter とかコメント欄とかでどんどんつっこんでください。

使ったのは Firefox 3.5 と IE6 です。コマンド一覧は

で見られます。

Firefox では、 userCss または styleWithCss コマンドでモードを切り替え、style 属性でのマークアップと、HTML タグ (I とか STRING とか) によるマークアップのどちらかを選ぶことがあります。デフォルトは CSS モードなので、そっちの挙動を書いておきます。

コマンド名	IE	Fx	意味	パラメタ	IEの挙動	Fxの挙動	注
AbsolutePosition	○	×	位置指定を絶対座標モードにする(position:absolute)		スタイルに “POSITION: absolute" を追加
BackColor	○	○	背景色を変更		BACKGROUND-COLOR: ${parameter}; を現在の要素に追加	background-color: ${parameter}; を現在の要素に追加
Bold	○	○	太字にする		<STRONG> 追加	<span style="font-weight: bold;">を追加
ClearAuthenticationCache	○	×	キャッシュ消去
ContentReadOnly	×	○	編集OK・編集付加を切り替える	boolean		true なら編集不可、false なら編集可能
Copy	○	×	クリップボードにコピー			セキュリティ上の理由により封印
CreateBookmark	○	×	アンカーをつける	string	<A name=${parameter}> を追加
CreateLink	○	○	リンクにする	string	<A href="${parameter}"> を追加	<a href="${parameter}"> を追加
Cut	○	×	カットする			セキュリティ上の理由により封印
DecreaseFontSize	×	○	文字サイズを相対的に小さく			<small> を追加 or <big> を除去
Delete	○	○	削除
FontName	○	○	フォント名を変更	string	<FONT face=${parameter}> 追加	<span style="font-family: ${parameter};"> を追加
FontSize	○	○	文字サイズを変更	string	<FONT size=${parameter}> 追加	<font size="${parameter}"> を追加
ForeColor	○	○	文字色を変更	string	<FONT color=${parameter}> 追加	<span style="color: ${parameter};">
FormatBlock	○	○	タグで囲う	string	指定したタグ (<H2> など) を追加	指定したタグ (<H2> など) を追加	使えないタグもある
Heading	×	○	H1～H6を追加	string			H1～H6を挿入。パラメタには “H1" などを渡せばよい(括弧不要)
HiliteColor	×	○	色をつける	string		<span style="background-color: ${parameter};"> を追加
IncreaseFontSize	×	○	文字を大きくする			<big>を追加 or <small> を除去
Indent	○	○	インデントを深く		margin-left を40px増加	margin-left を40px増加
InsertButton	○	×	ボタン追加		<BUTTON> を追加
InsertFieldset	○	×	フィールドセット追加		<FIELDSET> を追加
InsertHorizontalRule	○	○	区切り線の挿入		<HR> を追加	<hr style="width: 100%; height: 2px;"> を追加
insertHTML	×	○	HTML 直書き	string		文字列そのまま追加(タグを含めてよい)
InsertIFrame	○	×	インラインフレーム追加		<P><IFRAME></IFRAME></P> を追加
InsertImage	○	○	画像の挿入	string	<image src="${parameter}"> を挿入	<image src="${parameter}"> を挿入
InsertInputButton	○	×	ボタン追加		<BUTTON id=null></BUTTON>		Fx では InsertHTML で入れられる
InsertInputCheckbox	○	×	チェックボックス追加		<INPUT id=null type=checkbox>		Fx では InsertHTML で入れられる
InsertInputFileUpload	○	×	ファイルアップロード追加		<P><INPUT id=null type=file></P>		Fx では InsertHTML で入れられる
InsertInputHidden	○	×	隠しフィールド追加		<P><INPUT id=null type=hidden></P>		Fx では InsertHTML で入れられる
InsertInputImage	○	×	画像ボタン追加		<P><INPUT id=null type=image></P>		Fx では InsertHTML で入れられる
InsertInputPassword	○	×	パスワード入力追加		<P><INPUT id=null type=radio></P>		Fx では InsertHTML で入れられる
InsertInputRadio	○	×	ラジオボタン追加		<P><INPUT id=null type=radio></P>		Fx では InsertHTML で入れられる
InsertInputReset	○	×	リセットボタン追加		<P><INPUT id=null type=submit value="Submit Query"></P>		Fx では InsertHTML で入れられる
InsertInputSubmit	○	×	送信ボタン追加		<P><INPUT id=null type=submit value="Submit Query"></P>		Fx では InsertHTML で入れられる
InsertInputText	○	×	テキストボックス追加		<P><INPUT id=null></P>		Fx では InsertHTML で入れられる
InsertMarquee	○	×	マーキー追加		<P><MARQUEE id=null></MARQUEE></P> 追加		Fx では InsertHTML で入れられる
InsertOrderedList	○	○	番号つきリスト追加		<OL> を追加	<ol> を追加
InsertParagraph	○	○	段落追加		<P> を追加	<p> を追加
InsertSelectDropdown	○	×	ドロップダウン追加		<SELECT id=null></SELECT>		Fx では InsertHTML で入れられる
InsertSelectListbox	○	×	リストボックス追加		<P><SELECT id=null multiple></SELECT></P>		Fx では InsertHTML で入れられる
InsertTextArea	○	×	テキストエリア追加		<P><TEXTAREA id=null></TEXTAREA> </P>		Fx では InsertHTML で入れられる
InsertUnorderedList	○	○	番号なしリスト追加		<UL>を追加	<ul> を追加
Italic	○	○	斜体にする		<EM> 追加	<span style="font-style: italic;"> を追加
JustifyCenter	○	○	中央寄せにする		<P align=center>	<div style="text-align: center;">
JustifyLeft	○	○	左寄せにする		<P align=left>	<div style="text-align: left;">
JustifyRight	○	×	右寄せにする		<P align=right>	<div style="text-align: right;">
LiveResize	○	×	サイズを自在に編集できるようにする
MultipleSelection	○	×	Select を複数選択可能にする		multiple 属性を付加
Outdent	○	○	インデント解除		margin-left を40px減少	margin-left を40px減少
OverWrite	○	×	上書きモード・挿入モードを切り替え	boolean
Paste	○	○	ペースト			セキュリティ上の理由により封印
Print	○	×	印刷		編集している部分を印刷(ダイアログが出る)
Redo	×	○	リドゥ
Refresh	○	×	リフレッシュ
RemoveFormat	○	○	タグ除去		選択範囲のタグを除去	選択範囲のタグを除去
SaveAs	○	×	保存		編集している内容を保存(保存ダイアログが出る)
SelectAll	○	○	すべてを選択		すべてを選択	すべてを選択
StrikeThrough	○	○	字消し線		<STRIKE> を追加	<span style="text-decoration: line-through;"> を追加
StyleWithCSS	×	○	スタイルシートを適用する
Subscript	×	○	下付き文字をトグル
Superscript	×	○	上付き文字をトグル
UnBookmark	○	×	アンカー除去		<A name=...> を除去
Underline	○	○	下線		<U> を追加	<span style="text-decoration: underline;"> を追加
Undo	○	○	アンドゥ
Unlink	○	○	リンク解除		<a> を削除	<a> を削除
Unselect	○	○	選択解除
UseCSS	×	○	CSS によるマークアップと通常タグ(EM とか STRONG とか) によるマークアップを切り替える	boolean			非推奨らしい。コマンド名の割に、false にすると CSS を使い始めるというキモい挙動のため注意。
styleWithCSS	×	○	CSS によるマークアップと通常タグ(EM とか STRONG とか) によるマークアップを切り替える	boolean

傾向として、

クリップボードを使う操作は Firefox ではデフォルトでは使えない (あまりホイホイ使えるとセキュリティ上もあまりよろしくないので user.js で切り替えてやらないと使えない)
インデント量はどちらで編集しても一緒
MSDN のドキュメントを見たところ、未対応コマンドがいろいろあるらしい……
IE では使えるのに……というコマンドはいっぱいあるけれど、insertHTML と FormatBlock があれば気合でなんとかなる

ってところでしょうか。

コーヒーサーバは香炉である

2009年07月09日

■ [javascript]ブラウザ上でのリッチテキスト編集コマンドの比較表とテスト場を作ってみたよ。