リッチ テキスト エディタ

| | コメント(9)

WYSIWYG Editor, Rich Text Editor, HTML Editor いろいろ呼び方あるけれど

カズキ先生との HTML の編集についての話で出てきたリッチ テキスト エディタについて調べてみました。

リッチ テキスト エディタとは、入力したデータと出力したデータの見た目が一致するテキスト エディタの事を指します。 今作りながら見ている物がそのまま出力結果となる、この事を用語で

WYSIWYG: "What You See Is What You Get"

と言います。

というわけで、今回作るのがこちらです。

作り方

  1. エディタの基礎
  2. 編集領域を準備する
  3. 内容を編集する
エディタの基礎

今見ているブラウザがそのままエディタになります。エディタにするには、JavaScript で document オブジェクトの designMode プロパティを "on" にします。

window.document.designMode = "on";
編集領域を準備する

designMode はドキュメント全体に適用されます。そこで、編集領域となるドキュメントを IFRAME 要素、もしくは OBJECT 要素で埋め込みます。ここでは XHTML 1.1 でも通用するように、OBJECT 要素で埋め込む方法を示します。

<object id="editWindow" type="text/html" data="blank.html" width="200" height="150"></object>

data 属性に指定されている blank.html は空のファイルです。(blank.html とエディタのドメインが異なっているとセキュリティの問題でアクセスできない場合があります)

OBJECT 要素で埋め込んだドキュメントの window オブジェクトは、次の方法で取得します。手段はブラウザによって若干違います。

Internet Explorer の場合。

// 編集領域の window オブジェクト
var w = window.document.getElementById("editWindow").object.parentWindow;

Firefox, Opera の場合。

// 編集領域の window オブジェクト
var w = window.document.getElementById("editWindow").contentDocument.defaultView;
内容を編集する

デザイン モードになったドキュメントへは、TEXTAREA 要素と同じように文章を編集できます。文章を装飾するには、document オブジェクトの execCommand メソッドを使用します。

書式
[document object].execCommand(command, userInterface, value)
引数
command (string)
Bold や Italic、JustifyCenter 等のコマンドを表す文字列。
userInterface (bool)
指定したコマンドがユーザへ情報を要求する場合、インターフェイスを表示させるかどうか。 例) document.execCommand("InsertImage", true, null) // IE ではファイル選択ダイアログが表示されます。
value (mixed)
指定したコマンドに対する引数。 例) document.execCommand("FontColor", false, "#ff0000");

次の例では、ボタンをクリックすると、選択範囲もしくはカーソルの位置が太字になります。

<object id="editWindow" type="text/html" data="blank.html" width="200" height="150"></object>
<button type="button" onclick="executeCommand('bold', false, null);">太字</button>

<script type="text/javascript">
window.onload = function ()
{
    getEditWindow().document.designMode = "on";
}

function getEditWindow()
{
    var container= window.document.getElementById("editWindow");
    var w;

    if (window.document.all && !window.opera)
    {
        w = container.object.parentWindow;
    }
    else
    {
        w = container.contentDocument.defaultView;
    }

    return w;
}

function executeCommand(command, userInterface, value)
{
    getEditWindow().document.execCommand(command, userInterface, value);
}
</script>

execCommand で使用できるコマンドや引数については、以下のサイトを参照ください。

できあがり

以上の点をまとめて作ったサンプルがこちらです。

TODO

こういうのが実装されたら便利。

  • execCommand の userInterface をサポートしていないブラウザ用にダイアログを自作する。
  • 出力する HTML の正規化。
  • キャレットがある場所のテキストのスタイル、コンテキスト スタイルをツールバーに反映させる。

その他

アイコンは famfamfam.comSilk Icon を利用させて頂きました。

コメント(9)

カヅキ@駄 :

すごい、そんな便利なメソッドがあるなんて。
またいでも別々にマークアップしてくれたり、なんて優秀!

JavaScriptがオンならOBJECTとツールバーを表示、
オフならテキストエリアを表示するようにして
正規化云々はPHPに渡してやればできそうね。

zenith :

>正規化云々はPHPに渡してやればできそうね。
うんうん、form の submit イベント時に DOM 操作で正規化しちゃう手もあるね。

例えば、Firefox だと Bold コマンドでは SPAN 要素 style 属性で指定され、IE や Opera だと B 要素で指定される。この辺の例外対応がとってもめんどうだねぇ。
誰かやってくれないかしら?

カヅキ :

execCommandのstyleWithCSSをfalseにしたら、
SPANを使わない方向で統一できそう・・・かも?(←リファレンス流し読み。)
できればstyle属性でなくclass属性にしたいところなので、
統一できた方が置換しやすいね。

zenith :

> styleWithCSS
おおおよく見つけた!
doc.execCommand("styleWithCSS", false, false);
で出力結果が同じになってる、これは使えるなぁ…感動w

Excellent weblog, many thanks a lot for your awesome posts!

I found your blog site on google and check several of the early posts. Continue to keep up the good work. I just added up your RSS feed to my MSN News Reader. Looking forward to reading through far more from you later on!

I saw this actually excellent post these days!

Free download Windows Apps & Software with just one click. Safe and easy get the apps or software free download. Download the wanted ones now!

おっぱい :

VOINVOIN!!!!!

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、zenithが2007年6月 7日 23:03に書いたブログ記事です。

ひとつ前のブログ記事は「Yahoo!がPHPエンジニアを雇う時に聞く質問、に挑戦」です。

次のブログ記事は「皆様さようなら。」です。

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

Powered by Movable Type 4.12