实现一个简易的富文本编辑器(一)
富文本编辑器又称为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>
简易富文本编辑器达成!