書式付きの文字編集を可能とする contentEditable の簡単な使い方

ブラウザ内で、文字を編集するときに textarea や input の text などは簡単ではありますが、表示方法に気をつけないと少々野暮ったい表示になりがちです。

しかも、いわゆる WYSIWYG な編集ができません。

念のために言うと、WYSIWYG は What You See Is What You Get の略で文書編集ソフトウェアで、編集中の表示と、出来上がりの表示が一致することをいいます。

逆に WYSIWYG ではないものは、例えば TeX などのように、マークアップされた文書を編集し、それをコンパイルすることでドキュメントを作る場合などがあげられます。

ま、TeX の例を挙げるまでも無く HTML もマークアップしてブラウザでみるものの間には大きな隔たりがあります。

書いたままの出来上がりになったらいいな、というのは昔から要望としてありました。

書式付きのリッチな文字編集機能を実装するために、以前よりマイクロソフトの IE や Firefox などでは contentEditable 属性を設定することで、編集可能な DOM 要素などがサポートされていました。

HTML5 では仕様の中にこれらが組み込まれています。

ここでは簡単なサンプルで、contentEditable の使い方を示します。

ここで作るのは次のような画面です。

書式付きの編集

div 要素に contentEditable 属性を true として設定すれば、編集モードにはいります。編集モードの要素はそのまま編集可能になります。

contentEditable は "false" と設定すれば false、それ以外は true にマップされます。

HTML は次の通りです。

<!DOCTYPE html>
<html>
<head>
<script src="//.../jquery/1.10.1/jquery.min.js"></script>
<script src="contentedit1.js"></script>
<link rel="stylesheet" href="contentdtit1.css">
</head>
<body>
<div id="div1" class="editableDiv" contentEditable="true"></div>
<div><button id="button1">Show Code</button>
<button id="uButton">U</button>
<button id="bButton">B</button>
<button id="colButton">Color</button>
</div>
</body>
</html>

CSS は次の通り。ここでは単に基本的なフォントと div 要素の縦横、枠線を設定しています。

body {
  font-family: sans-serif;
}

div.editableDiv {
  width:300px;
  height:100px;
  border:1px dotted #800;
  padding:10px;
}

選択箇所に対して "コマンド" を実行することによって、書式を編集します。

コマンドを実行するには execCommand メソッドを呼びます。これにコマンドの識別子を渡し実行します。

識別子は多数あり、ここでは全てを紹介することはしません。今回の例では、下線を引く "underline"、太文字にする "bold"、そして文字の色を変える "foreColor" が識別子として利用しています。

最後の foreColor だけが、パラメータを受け取り、ここでは赤色 "#f00" を渡しています。

JavaScript は次の通り。

$(function(){  
  $('#button1').click(function(){ alert( div1.html() ); });
  $('#uButton').click(function(){ doCmd('underline'); });  
  $('#bButton').click(function(){ doCmd('bold'); });
  $('#colButton').click(function() { doCmd('foreColor', '#f00'); });
  
  function doCmd(cmdId, param){
    document.execCommand (cmdId, false, param);
  }
});

尚、Android 上の Chrome でも試しに動作確認してみましたが、次のように PC 上のブラウザと同様に動作しました。

Android 上の Chrome での書式付きの編集

しかしながら、Firefox (on Android) ではボタンを押したタイミングで文字の選択状態が解除されるためか、書式の変更ができませんでした。書式を設定する何か方法があるのかもしれませんが、このままのコードでは動作しないようです。