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

HOME > ダイナミックHTML > 簡易HTMLエディタを実装する


■ サンプル

■ ソース
<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>
<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>

[HOME]