先看效果图:
最简单的编辑器
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>我是在线的html简易文本编辑器</title>
<STYLE>
textarea{padding: 10px 10px 10px 10px;border:1px solid #7f9db9; font-size:9pt; width:100%;height:300px;color:#000}
.code {
padding: 10px 10px 10px 10px;
font-size: 13px;
line-height: 18px;
background-color: #fff;
font-family: "Lucida Console", Consolas, Monaco;
white-space: pre-wrap;
word-break: break-all;
position: relative;
overflow: hidden;
}
</STYLE>
</head>
<body>
<fieldset>
<legend>编辑区</legend>
<div>
<form>
颜色:
红色</option>
蓝色</option>
绿色</option>
黑色</option>
</select>
样式:
加粗</option>
斜体</option>
下划线</option>
删除线</option>
</select>
字体:
Serif</option>
Sans-serif</option>
Monospace</option>
Comic Sans</option>
</select>
</form>
</div>
<br/>
</div>
</fieldset>
function setFontColor(obj)
{
document.execCommand("forecolor",false,obj.value);
}
function setFontStyle(obj)
{
document.execCommand(obj.value,false,null);
}
function setFontFamily(obj)
{
document.execCommand("fontname",false,obj.value);
}
</script>
</body>
</html>