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

トップ > アラカルト > 簡易HTMLエディタを実装する

サンプル

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

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

コード

コードを下記に示します。仕組みは簡単。<div> や <p> などのタグに contenteditable 属性を追加するだけ。IE5.5 以降でサポートされています。document.execCommand('bold') は、現在選択されている領域を太字にするメソッドです。

<style type="text/css">
<!--
.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>

関連URL


Copyright (C) 2002 杜甫々
初版:2002年7月7日
http://www.tohoho-web.com/wwwxx016.htm