いわゆるwysiywgですね。
html5のcontentEditableというものを使うと簡単にできます。
こんな感じです。
<button type='button' onclick='return bold()'>太字</button>
<button type='button' onclick='return underline()'>下線</button>
<div contentEditable='true' style='width:200px; height:100px; border:solid 1px #ddd'></div>
<script>
function bold() {
document.execCommand('bold', false);
}
function underline() {
document.execCommand('underline', false);
}
</script>
そのほかにも色をつける、リンクを作成、画像挿入などもでき、一般的なリッチテキストエディタの機能は実装可能です。