簡易HTMLエディタを実装する

• トップ
• How To
• 簡易HTMLエディタを実装する

サンプル

ウェブ上で簡単なHTMLエディタを実現するサンプルです。IE5.5 以降で動作します。下記の枠内に文字を入力したり、範囲選択して [B] ボタンを押したりしてみてください。

入力したデータをフォーム経由でサーバーに転送すれば、タグを知らなくても入力可能な書式付き掲示板などに応用できると思います。

コード

コードを下記に示します。<div> や <p> などのタグに contenteditable 属性を追加します。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>