[HTML5API] contentEditable 属性を使用したリッチテキストエディタの実現


HTML5 から要素に contentEditable 属性が指定できるようになりました。

今回は contentEditable 属性について紹介するとともに、とかく疑問に思われがちな contentEditable 属性の使いかたについて紹介していきます。


contentEditable 属性とは?

contentEditable 属性は、designMode 属性と同じく、Web コンテンツの内容をユーザーから編集可能にするものです。

designMode 属性がドキュメント全体に対するものに対し、 contentEditable 属性はここのエレメントに対して作用します。

contentEditable 属性を true に設定することで、ユーザーに当該エレメントのコンテンツの編集を許可します。

(※) contentEditable 属性は designMode 属性と同じく、もともとは Internet Explorer 5.5 からの独自機能でしたが HTML5 で標準的な API として採用されました。

さて、ここで実際に contentEditable 属性を true に設定した div タグをこのページ上に表示してその機能を体験していただきたかったのですが、ここのブログシステムがそういったものを制限しているようなので、以下のに ifame で貼りつけました。ぜひお試しください。

なお、実際に記述しているタグは以下のとおりです。

<div contenteditable="true">
        <p>この文字列は div タグで書かれていますがユーザーから編集することができますよ。</p>
        < p>他のページから書式のついた文字列をコピーし、こちらに貼りつけてみてください。</p>
        <p>あなたが使用している Web ブラウザーがイカしたものなら他のページ内の画像も貼り付けられますよ。</p>
   </div>

上記のタグを使用して、div タグ内に記述されたコンテンツが Web ブラウザーから編集できることを確認できたと思います。

当時にある感情が芽生えたのではないでしょうか?


contentEditable 属性の機能を試した多くの人が抱く
モヤっとした感情

contentEditable 属性の機能を試した多くの人がこう思うはずです。

「で、なにに使えばいいの?」

contentEditable 属性を試した大半の人がその使いどころについて疑問を持ち途方に暮れることでしょう。

contentEditable 属性によって編集可能になった領域は、多くの場合、リッチなテキスト、いわゆるリッチテキストをサポートしています。

ではその「リッチなテキスト」とはなにか? それは文字列に対するさまざまな書式の設定と表示を可能しているということです。


contentEditable 属性は意外とできる子

contentEditable 属性が true に設定され、コンテンツが編集可能となった領域はリッチテキストをサポートしています。

すくなくとも Internet Explorer 11 や、今日時点 (2014/2/13) の最新の Google Chrome や Mozzilla Firefox では contentEditable 属性のリッチテキストがサポートされています。

この機能は、特別な実装をしなくても有効になっており、書式のついた文字列の貼り付けや、ショートカットキーで確認することができます。

ここで前述の iframe 内の文字列を選択し、以下のショートカットキーによる文字列への書式の設定をお試しください。

  • [Ctrl] + [B] (太字)
  • [Ctrl] + [U] (アンダーライン)
  • [Ctrl] + [I] (イタリック)
  • [Ctrl] + [C] (書式をともなったコピー)
  • [Ctrl] + [V] (書式をともなった貼り付け)

文字列の書式が変更できたと思います。

もしかしたら「え、これだけ!?」と思われたかもしれません。

あえて言いましょう、はい、それだけです。

エレメントの属性値を変えたくらいではこんなものでしょう。こんな簡単な操作で Windows Live ライターのような UI が出現していろいろなことができるようなったらプログラマは職を失って実家に帰り家業の温泉旅館を継ぐしかなくなってしまうでしょう。(ちなみにうちの実家は農家です)

マークアップの設定のみで可能になる機能はこの程度ですが、JavaScript と組み合わせることにより基本的なリッチテキストエディタの機能を実装することができます。


execCommad メソッドが引き出す contentEditable 属性の可能性

エレメントへの contentEditable  属性の追加くらいでは、ショートカットによる操作がせいぜいですが、JavaScript から execCommand メソッドを使用すると、文字列のさまざまな書式の設定に加え、リンクや画像の挿入も可能になります。

execCommand メソッドももともとは Internet Explorer 5.5 の独自仕様で、その後 HTML5 の機能に採用されたという経緯があります。

ちなみに当時の標準的な HTML + JavaScritp の機能では、高機能なアプリを作るには充分でなかったため、(そもそも本来は HTML はページ = ドキュメントを記述するためのマークアップであるためアプリのプラットフォームとしての正式な仕様はなかった)各 Web ブラウザーがそれぞれの特色を活かした独自実装をさかんにおこなっており、その時代のドキュメントには contentEditable 属性と execCommand メソッドについて以下のような興味深いものがあります。

Internet Explorer 5.5 を使った 編集可能な Web ページの作成方法
http://msdn.microsoft.com/ja-jp/library/dd163916.aspx

execCommad メソッドの使い方

このブログの記事では「contentEditable 属性が有効になっているエレメントの文字列の書式を JavaScript から設定できるニクいやつ」的に紹介をしてしまっていますが、execCommand メソッドの本来の機能は、対象となるドキュメントやエレメントに対し、引数で渡されたコマンドを実行するというものです。

つまり、コマンドの実行は文字列の書式設定にとどまりません。

詳しくは以下のリンクを参照してください。

execCommand メソッド
http://msdn.microsoft.com/ja-jp/library/dd591349%28v=office.11%29.aspx

例えば以下は、contentEditable 属性が true になっているエレメントにて選択されている文字列のフォントをメイリオに変更する例です。

document.execCommand(‘fontName’, false, ‘メイリオ’);

サンプルへのリンクを iframe で貼りつけましたので Internet Exlorer 11 もしくは最新の Chrome、Firefox を用い、 [編集の開始] ボタンをクリックしてお試しください。

実際の使用にあたっては、文書の編集後に innerHTML でエレメントの HTML を取得して、localstorage とかに保存して使ったりとかすると良いと思います。

ソースはこんな感じです。

execCommand コマンドは、Web ブラウザーによってサポートされている機能に違いがあります。

今回紹介したような単純な機能であれば、現在のメジャーなモダン Web ブラウザーであれば問題なく動作するでしょう。

しかしながら、複雑な機能になると Web ブラウザー毎の実装の差異があり、すべての Web ブラウザーについて期待した動作とならない可能性がありますのでご注意ください。

お勧めの方法としては Windows ストア アプリ で使用することです。

Window 8.1 の Windows ストアアプリ (HTML + JavaScript) はイマーシブ版の Internet Explorer 11 と同じレンダリングエンジンと JavaScript のエンジンを使用しています。

Windows ストア アプリには、まだインテリセンスのように入力支援機能を備えた高機能なコードエディタがないので、これらを使用してぜひどなたか開発いただければと思います。

Real Time Analytics

Clicky

Comments (2)

  1. d より:

    ソースdiv id="editAreaのとこ"が'になってるよ

  2. お?、と思ったら、その下の style 属性の先頭が ' (シングルクォーテーション) でしたね。

    あとでなおしておきますね。

    ご報告、ありがとうございました。

Skip to main content