js兑现网页文本编辑器
日期：2014-05-16 浏览次数：20855 次
js实现网页文本编辑器
1,漂亮的网页文本编辑器：
的js实现：
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="js/color.js"></script>
<script type="text/javascript" src="js/portrait.js"></script>
<script type="text/javascript" src="js/editor.js"></script>
<style type="text/css">
@import url("style/global.css");
</style>
</head>
<body>
<div id="MyEditor">
<ul id="toolBar">
<li><a href="###"><img src="images/4.gif" alt="字体" title="字体" /></a></li>
<li><a href="###"><img src="images/5.gif" alt="字号" title="字号" /></a></li>
<li class="line"> </li>
<li><a href="###" id="boldButton"><img src="images/6.gif" alt="加粗" title="加粗" /></a></li>
<li><a href="###" id="italicButton"><img src="images/7.gif" alt="倾斜" title="倾斜" /></a></li>
<li><a href="###" id="underLineButton"><img src="images/8.gif" alt="下划线" title="下划线" /></a></li>
<li class="line"> </li>
<li><a href="###" id="leftAlign"><img src="images/9.gif" alt="左对齐" title="左对齐" /></a></li>
<li><a href="###" id="centerAlign"><img src="images/10.gif" alt="居中对齐" title="居中对齐" /></a></li>
<li><a href="###" id="rightAlign"><img src="images/11.gif" alt="右对齐" title="右对齐" /></a></li>
<li class="line"> </li>
<li><a href="###" id="setFontColor"><img src="images/16.gif" alt="字体颜色" title="字体颜色" /></a></li>
<li><a href="###" id="setBgColor"><img src="images/17.gif" alt="背景颜色" title="背景颜色" /></a></li>
<li class="line"> </li>
<li><a href="###" id="insertLink"><img src="images/18.gif" alt="插入超链接" title="插入超链接" /></a></li>
<li><a href="###" id="insertImage"><img src="images/19.gif" alt="插入图片" title="插入图片" /></a></li>
<li><a href="###" id="insertQQ"><img src="images/20.gif" alt="插入QQ表情" title="插入QQ表情" /></a></li>
<li class="line"> </li>
<li class="viewHTML"><input type="checkbox" name="viewHTML" title="查看HTML源代码" id="viewHTML" /></li>
</ul>
<textarea name="content" id="content"></textarea>
<iframe id="EditorFrame" frameborder="0"></iframe>
</div>
</body>
</html>
? globle.css
* {
margin:0;
padding:0;
}
body {
font-size:12px;
background:white;
}
div#MyEditor {
margin:10px;
border:1px solid #C5C5C5;
}
ul#toolBar {
padding-left:4px;
list-style-type:none;
background:url(../images/bg.gif) repeat-x left center;
height:30px;
border-bottom:1px solid #C5C5C5;
}
ul#toolBar li {
display:inline;
}
ul#toolBar li.line {
width:4px;
height:20px;
display:block;
float:left;
margin:0 2px;
margin-top:5px;
background:url(../images/line.gif) no-repeat center;
}
ul#toolBar li.viewHTML {
display:block;
float:left;
width:20px;
height:20px;
overflow:hidden;
margin-top:5px;
}
ul#toolBar li.viewHTML input {
display:block;
width:20px;
height:20px;
margin:0;
float:left;
}
ul#toolBar li a {
display:block;
height:22px;
float:left;
width:28px;
margin:5px 2px 5px 2px;
}
ul#toolBar li a img {
display:block;
margin:1px auto;
}
ul#toolBar li a:hover img {
border:1px solid #EEE;
border-bottom-color:#999;
border-right-color:#999;
margin:0 auto;
}
ul#too
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
