标签：
一说起富文本，人们第一印象就是像使用word一样，在网页上操作文档。实际上差不多就是这样。富文本编辑，又称为WYSIWYG (What You See Is What You Get所见即所得)，指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑
有两种编辑富文本的方式，一种是使用iframe元素，另一种是使用contenteditable属性
【1】iframe
在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面<body>元素的HTML代码
designMode属性有两个可能的值："off"(默认值)和"on"。在设置为"on"时，整个文档都会变得可以编辑
只有在页面完全加载之后才能设置designMode属性。因此，在包含页面中，需要使用onload事件处理程序
[注意]此方法必须在服务器端才能执行，否则会提示跨域安全提示
<iframe name="wysiwyg" src="wysiwyg.html" style="height: 100px;width: 100px;"></iframe> <script> window.onload= function(){ frames[‘wysiwyg‘].document.designMode = ‘on‘; } </script>
【2】contenteditable
把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素
设置document.designMode=‘on‘时，页面的任意位置都可以编辑；使用contenteditable=‘true‘则只对具体元素和其包含的元素起作用
[注意]一定要区分contenteditable和contentEditable。contenteditable是元素的特性，而contentEditable是对象的属性
<div id="wysiwyg" style="height: 100px;width: 100px;border:1px solid black"></div> <button id="btn1">打开富文本编辑</button> <button id="btn2">关闭富文本编辑</button> <script> btn1.onclick = function(){wysiwyg.contentEditable = true;} btn2.onclick = function(){wysiwyg.contentEditable = false;} </script>
与富文本编辑器交互的主要方式，就是使用document.execCommand()。这个方法可以对文档执行预定义的命令，而且可以应用大多数格式
document.execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)方法需要传递3个参数
aCommandName表示要执行的命令名称，不可省略
aShowDefaultUI表示是否展示用户界面，默认为false，可省略
aValueArgument表示额外参数值，默认为null，可省略
[注意]为了确保浏览器兼容性，第二个参数应始终设置为false，因为firefox在该参数为true时抛出错误
段落格式
居中 document.execCommand(‘justifyCenter‘);
左对齐 document.execCommand(‘justifyLeft‘);
右对齐 document.execCommand(‘justifyRight‘);
添加缩进 document.execCommand(‘indent‘);
去掉缩进 document.execCommand(‘outdent‘);
<div id="wysiwyg" style="height: 100px;width: 300px;border:1px solid black" contenteditable>测试内容</div> <button data-name="justifyCenter">居中</button> <button data-name="justifyLeft">左对齐</button> <button data-name="justifyRight">右对齐</button> <button data-name="indent">添加缩进</button> <button data-name="outdent">去掉缩进</button> <script> var btns = document.getElementsByTagName(‘button‘); for(var i = 0; i < btns.length; i++){ btns[i].onclick = function(){ document.execCommand(this.getAttribute(‘data-name‘)); } } </script>
文本格式
字体类型 document.execCommand(‘fontname‘,false,sFontName)
字体大小 document.execCommand(‘fontsize‘,false,sFontSize)
字体颜色 document.execCommand(‘forecolor‘,false,sFontColor)
背景色 document.execCommand(‘backColor‘,false,sBackColor)
加粗 document.execCommand(‘bold‘);
斜体 document.execCommand(‘italic‘);
下划线 document.execCommand(‘underline‘);
<div id="wysiwyg" style="height: 100px;width: 300px;border:1px solid black" contenteditable>测试内容</div> <button data-name="fontname" data-value="宋体">宋体</button> <button data-name="fontsize" data-value="5">大字体</button> <button data-name="forecolor" data-value="red">红色字体</button> <button data-name="backColor" data-value="lightgreen">浅绿背景</button> <button data-name="bold">加粗</button> <button data-name="italic">斜体</button> <button data-name="underline">下划线</button> <script> var btns = document.getElementsByTagName(‘button‘); for(var i = 0; i < btns.length; i++){ btns[i].onclick = function(){ document.execCommand(this.getAttribute(‘data-name‘),false,this.getAttribute(‘data-value‘)); } } </script>
编辑
复制 document.execCommand(‘copy‘);
剪切 document.execCommand(‘cut‘);
粘贴 document.execCommand(‘paste‘);(经测试无效)
全选 document.execCommand(‘selectAll‘);
删除 document.execCommand(‘delete‘);
后删除 document.execCommand(‘forwarddelete‘);
清空格式 document.execCommand(‘removeFormat‘);
前进一步 document.execCommand(‘redo‘);
后退一步 document.execCommand(‘undo‘);
打印 document.execCommand(‘print‘);(对firefox无效)
<div id="wysiwyg" style="height: 100px;width: 300px;border:1px solid black" contenteditable>测试内容</div> <button data-name="copy">复制</button> <button data-name="cut">剪切</button> <button data-name="paste">粘贴</button> <button data-name="selectAll">全选</button> <button data-name="delete">删除</button> <button data-name="forwarddelete">后删除</button> <button data-name="removeFormat">清空格式</button> <button data-name="redo">前进一步</button> <button data-name="undo">后退一步</button> <button data-name="print">打印</button> <script> var btns = document.getElementsByTagName(‘button‘); for(var i = 0; i < btns.length; i++){ btns[i].onclick = function(){ document.execCommand(this.getAttribute(‘data-name‘)); } } </script>
插入
插入标签 document.execCommand(‘formatblock‘,false,elementName); 插入<hr> document.execCommand(‘inserthorizontalrule‘); 插入<ol> document.execCommand(‘insertorderedlist‘); 插入<ul> document.execCommand(‘insertunorderedlist‘); 插入<p> document.execCommand(‘insertparagraph‘); 插入图像 document.execCommand(‘insertimage‘,false,URL); 增加链接 document.execCommand(‘createlink‘,false,URL); 删除链接 document.execCommand(‘unlink‘);
<div id="wysiwyg" style="height: 100px;width: 300px;border:1px solid black;overflow:auto" contenteditable>测试内容</div> <button data-name="formatblock" data-value="div">插入div</button> <button data-name="inserthorizontalrule">插入hr</button> <button data-name="insertorderedlist">插入ol</button> <button data-name="insertunorderedlist">插入ul</button> <button data-name="insertparagraph">插入p</button> <button data-name="insertimage" data-value="http://files.cnblogs.com/files/xiaohuochai/zan.gif">插入图像</button> <button data-name="createlink" data-value="www.cnblogs.com/xiaohuochai">增加链接</button> <button data-name="unlink">删除链接</button> <script> var btns = document.getElementsByTagName(‘button‘); for(var i = 0; i < btns.length; i++){ btns[i].onclick = function(){ document.execCommand(this.getAttribute(‘data-name‘),false,this.getAttribute(‘data-value‘)); } } </script>
实现一个富文本编辑器，看似容易，但实际上是一个大工程
给大家推荐几款不错的在线富文本编辑器
欢迎交流
标签：
原文地址：http://www.cnblogs.com/xiaohuochai/p/5884206.html
