JavaScript: 2007年6月アーカイブ

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 を利用させて頂きました。

このアーカイブについて

このページには、2007年6月以降に書かれたブログ記事のうちJavaScriptカテゴリに属しているものが含まれています。

前のアーカイブはJavaScript: 2007年4月です。

次のアーカイブはJavaScript: 2008年2月です。

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

Powered by Movable Type 4.12