textareaで一部の文字だけ装飾する

textareaで一部の文字だけ装飾する方法をネットで調べると Jquery を使った方法がいくつか見つかった。しかし自分のしたかったものとはちょっと違った。見つかった方法のソースをいじって自分のやりたかったことができればいいのだが、そこまで詳しくなので、理解するの時間がかかって面倒くさい。

で、タイトルとちょっと違うのだが、html や css で装飾した文字を textarea の文字のように簡単に編集できる方法を発見。やり方も超簡単だったので採用した。

サンプル

この文字は直接編集できます。textarea は使っていません。

html
--------------------------------
<div id="box" contenteditable=true>この文字は直接編集できます。textarea は使っていません。</div>
--------------------------------

css
--------------------------------
#Box {
border: 1px solid #999;
width:300px;
height:100px;
}

.font1 {
color: red;
}

.font2 {
color: blue;
}

.font3 {
font-weight: bold;
}
--------------------------------

大事なのは「contenteditable=true」の部分のみ。これは html5 の属性。たったこれだけで box 内の装飾された文字を、あたかも textarea 内に書かれた文字のように編集できる。