ウェブ上で簡単なHTMLエディタを実現するサンプルです。IE5.5 以降で動作します。下記の枠内に文字を入力したり、範囲選択して [B] ボタンを押したりしてみてください。
入力したデータをフォーム経由でサーバーに転送すれば、タグを知らなくても入力可能な書式付き掲示板などに応用できると思います。
コードを下記に示します。仕組みは簡単。<div> や <p> などのタグに contenteditable 属性を追加するだけ。IE5.5 以降でサポートされています。document.execCommand('bold') は、現在選択されている領域を太字にするメソッドです。
<style>
.btn {
width: 70px;
margin: 5px;
}
.edit {
text-align: left;
background-color: #ffffff;
height: 100px;
width: 80%;
padding: 3px;
border: 1px solid #666666;
overflow: auto;
}
</style>
<center>
<button class="btn" onclick='document.execCommand("bold");'><b>B</b></button>
<button class="btn" onclick='document.execCommand("italic");'><i>I</i></button>
<button class="btn" onclick='document.execCommand("underline");'><u>U</u></button>
<button class="btn" onclick="alert(e1.innerHTML)">ソース</button>
<div class="edit" id="e1" contenteditable></div>
</center>