实现一个简易的富文本编辑器(一)
富文本编辑器又称为WYSIWYG(所见即所得)，其本质就是在一个页面元素中嵌入HTML代码，并且这个元素可以像文档输入框一样进行文本的编辑，它同时还可以设置文本样式。写博客的工具就是一个功能丰富的富文本编辑器，编辑邮件以及论坛发贴都用到富文本编辑器。
启动富文本编辑：设置contenteditable
让元素的内嵌HTML可以编辑，有三种实现方法：
1.在HTML标签里写入contenteditable即可。
<div style="border:1px solid #f00;width:100px;height:100px" contenteditable>
2.在脚本中设置对应元素的contentEditable值为true。这个属性有三种取值，false/true/inherit分别对应“关闭”/“开启”/“继承”。
document.getElementById("editor").contentEditable = true;
3.对于内嵌框架可以设置designMode=”on”，不过这种方式兼容性不太好。
富文本编辑器样式命令：document.execCommand()
其实元素设置contentedable后就已经实现了一个最基本的富文本编辑器，只是这个编辑器和文本输入框一样，实在简陋。如果它能很便捷的设置内容的样式，那就完美了。
与富文本样式交互的方法是document.execCommand()。execCommand函数传递三个参数，第一个参数为命令，第二个参数表示是否需要提示用户提供给该命令一个值，第三个参数表示执行当前命令的参数值。有些浏览器设置第二个参数为true会报错，所以为了便于移植，通常我们设置为false。
比如要给选中文本字体加粗，命令表达式当如下所示：
document.execCommand(bold, false, null);
常用命令有：
backcolor:设置文档背景颜色、bold:文本加粗、copy:复制到剪切板、createlink:给选中文本设置连接、cut:剪切、delete:删除文本、fontname:字体名称
fontsize:字体大小、forecolor:字体换色、formatblock:用HTML标签格式化选中文本、indet:缩进、inserthorizontalrule:插入<hr>、insertimage:插入图片
insertorderedlist:插入<ol>、insertunorderedlist:插入<ul>、insertparagraph:插入<p>、italic:文本斜体、justifycenter:文本居中、justifyleft:左对齐
outdent:减少缩进、paste:粘贴剪切板内容、removeformat:删除样式、selectall:选中所有文本、underline:添加下划线、unlink:撤销链接。
实现简易富文本编辑器
一个简易的富文本编辑器应该有一系列的样式按钮，一个编辑框。这里我就简单实现四个样式操作按钮。
<!-- 样式操作按钮 --> <button id="btn1"></button> <button id="btn2"></button> <button id="btn3"></button> <button id="btn4"></button> <!-- 编辑框 --> <div id="editor"> Click to Editor... </div> <input id="printContent" type="button" value="打印编辑器内容">
稍微给按钮以及编辑器设置下样式。
<style type="text/css"> #editor { width:600px; height:200px; border:1px solid #ccc; } button { margin:1px; border:1px solid #aaa; background:#ffe; cursor:pointer; overflow:hidden; } button:hover { background:#ccc; border:1px solid #00f; } </style>
页面画出来后，接下来我们来实现其功能。
让编辑器生效只需
1.开启元素的编辑功能editor.contentEditable = true;
2.给所有样式按钮绑定启动document.execCommand的事件。
//初始化 function initEditor() { openOrCloseEditor("editor", "true");//开启元素编辑 bindBtnCommand();//给样式按钮绑定命令 }
开启元素编辑的openOrCloseEditor函数实现如下：
/** * * 功能： 开启元素编辑功能 * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭 */ function openOrCloseEditor(el, operate) { var editor = document.getElementById(el); editor.contentEditable = operate; }
绑定样式按钮bindBtnCommand函数实现如下：
//按钮绑定命令 function bindBtnCommand() { var btns = document.getElementsByTagName("button"), btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体".split(" "), len = btnConfigs.length; for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) { (function(btnConfig, btn) { var msg = btnConfig.split("|"), lab = msg[0], value = msg[1], title = msg[2]; btn.innerHTML = lab; btn.title = title; btn.onclick = function(e) { document.execCommand(lab, false, value); } })(btnConfig, btns[i]); } }
接下来实现“打印编辑内容”按钮功能：
//获取编辑器内嵌内容 function getContent(el) { var editor = document.getElementById(el); return editor.innerHTML; } //打印按钮绑定触发事件 document.getElementById("printContent").onclick = function(e) { var content = getContent("editor"); document.write(content); };
最后调用initEditor使编辑器生效
initEditor();
完整代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简易富文本编辑器.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#editor {width:600px;height:200px;border:1px solid #ccc;
}
button {margin:1px;border:1px solid #aaa;background:#ffe;cursor:pointer;overflow:hidden;}
button:hover {background:#ccc;border:1px solid #00f;}
</style>
</head>
<body>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
<div id="editor">
Click to Editor...
</div>
<input id="printContent" type="button" value="打印编辑器内容">
<script type="text/javascript">
initEditor();
//初始化
function initEditor() {
openOrCloseEditor("editor", "true");//开启元素编辑
bindBtnCommand();//给样式按钮绑定命令
}
/**
*
* 功能： 开启元素编辑功能
* 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
*/
function openOrCloseEditor(el, operate) {
var editor = document.getElementById(el);
editor.contentEditable = operate;
}
//按钮绑定命令
function bindBtnCommand() {
var btns = document.getElementsByTagName("button"),
btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体".split(" "),
len = btnConfigs.length;
for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
(function(btnConfig, btn) {
var msg = btnConfig.split("|"),
lab = msg[0],
value = msg[1],
title = msg[2];
btn.innerHTML = lab;
btn.title = title;
btn.onclick = function(e) {
document.execCommand(lab, false, value);
}
})(btnConfig, btns[i]);
}
}
//获取编辑器内嵌内容
function getContent(el) {
var editor = document.getElementById(el);
return editor.innerHTML;
}
//打印按钮绑定触发事件
document.getElementById("printContent").onclick = function(e) {
var content = getContent("editor");
document.write(content);
};
</script>
</body>
</html>
简易富文本编辑器达成！