html实现最简单的文本编辑器

先看效果图:

最简单的编辑器

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>
发布了32 篇原创文章 · 获赞 40 · 访问量 5980

猜你喜欢

转载自blog.csdn.net/qq_43102934/article/details/102369590
今日推荐