转载来源:https://www.cnblogs.com/xiaohuochai/p/5884206.html

一说起富文本，人们第一印象就是像使用word一样，在网页上操作文档。实际上差不多就是这样。富文本编辑，又称为WYSIWYG (What You See Is What You Get所见即所得)，指在网页中编辑富文本内容。本文将详细介绍如何通过javascript实现富文本编辑

方式

有两种编辑富文本的方式，一种是使用iframe元素，另一种是使用contenteditable属性

【1】iframe

在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面

元素的HTML代码

designMode属性有两个可能的值："off"(默认值)和"on"。在设置为"on"时，整个文档都会变得可以编辑

只有在页面完全加载之后才能设置designMode属性。因此，在包含页面中，需要使用onload事件处理程序

[注意]此方法必须在服务器端才能执行，否则会提示跨域安全提示

window.οnlοad= function(){

frames['wysiwyg'].document.designMode = 'on';

}

【2】contenteditable

把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素

设置document.designMode='on'时，页面的任意位置都可以编辑；使用contenteditable='true'则只对具体元素和其包含的元素起作用

[注意]一定要区分contenteditable和contentEditable。contenteditable是元素的特性，而contentEditable是对象的属性

打开富文本编辑

关闭富文本编辑

btn1.onclick = function(){wysiwyg.contentEditable = true;}

btn2.onclick = function(){wysiwyg.contentEditable = false;}

命令

与富文本编辑器交互的主要方式，就是使用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');

居中

左对齐

右对齐

添加缩进

去掉缩进

var btns = document.getElementsByTagName('button');

for(var i = 0; i < btns.length; i++){

btns[i].onclick = function(){

document.execCommand(this.getAttribute('data-name'));

}

}

文本格式

字体类型 　　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');

宋体

大字体

红色字体

浅绿背景

加粗

斜体

下划线

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'));

}

}

编辑

复制 　　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无效)

复制

剪切

粘贴

全选

删除

后删除

清空格式

前进一步

后退一步

打印

var btns = document.getElementsByTagName('button');

for(var i = 0; i < btns.length; i++){

btns[i].onclick = function(){

document.execCommand(this.getAttribute('data-name'));

}

}

插入

插入标签 　　 document.execCommand('formatblock',false,elementName);

插入

---

　　document.execCommand('inserthorizontalrule');

插入

1. 　　document.execCommand('insertorderedlist');

插入

• 　　document.execCommand('insertunorderedlist');

插入

document.execCommand('insertparagraph');

插入图像 　　 document.execCommand('insertimage',false,URL);

增加链接 　　 document.execCommand('createlink',false,URL);

删除链接 　　 document.execCommand('unlink');

插入div

插入hr

插入ol

插入ul

插入p

插入图像

增加链接

删除链接

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'));

}

}

选区

【getSelection()】

在富文本编辑器中，使用getSelection()方法，可以确定实际选择的文本。这个方法是window对象和document对象的属性，调用它会返回一个表示当前选择文本的Selection对象。每个Selection对象都有下列属性

[注意]IE8-浏览器不支持

anchorNode：选区起点所在的节点

anchorOffset：在到达选区起点位置之前跳过的anchorNode中的字符数量

focusNode：选区终点所在的节点

focusOffset：focusNode中包含在选区之内的字符数量

isCollapsed：布尔值，表示选区的起点和终点是否重合

rangeCount：选区中包含的DOM范围的数量

Selection对象的这些属性并没有包含多少有用的信息。好在，该对象的下列方法提供了更多信息，并且支持对选区的操作

addRange(range)：将指定的DOM范围添加到选区中

collapse(node,offset)：将选区折叠到指定节点中的相应的文本偏移位置

collapseToEnd()：将选区折叠到终点位置

collapseToStart()：将选区折叠到起点位置

containsNode(node)：确定指定的节点是否包含在选区中

deleteFromDocument()：从文档中删除选区中的文本，与document.execCommand("delete",false,null)命令的结果相同

extend(node,offset)：通过将focusNode和focusOffset移动到指定的值来扩展选区

getRangeAt(index)：返回索引对应的选区中的DOM范围

removeAllRanges()：从选区中移除所有DOM范围。实际上，这样会移除选区，因为选区中至少要有一个范围

reomveRange(range)：从选区中移除指定的DOM范围

selectAllChildren(node)：清除选区并选择指定节点的所有子节点

toString()：返回选区所包含的文本内容

Selection对象的这些方法都极为实用，它们利用了DOM范围来管理选区。由于可以直接操作选择文本的DOM表现，因此访问DOM范围与使用execCommand()相比，能够对富文本编辑器进行更加细化的控制。下面来看一个例子

var selection = document.getSelection();

//取得选择的文本

var selectionText = selection.toString();

//取得代表选区的范围

var range = selection.getRangeAt(0);

//突出显示选择的文本

var span = document.createElement("span");

span.style.backgroundColor = "yellow";

range.surroundContents(span);

以上代码会为富文本编辑器中被选择的文本添加黄色的背景。这里使用了默认选区中的DOM范围，通过surroundContents()方法将选区添加到了带有黄色背景的元素中

HTML5将getSelection()方法纳入了标准，IE8-浏览器不支持DOM范围，但可以通过它支持的selection对象操作选择的文本。IE中的selection对象是document的属性，要取得富文本编辑器中选择的文本，首先必须创建一个文本范围，然后再像下面这样访问其text属性

var range = document.selection.createRange();

var selectedText = range.text;

虽然使用IE的文本范围来执行HTML操作并不像使用DOM范围那么可靠，但也不失为一种有效的途径。要像前面使用DOM范围那样实现相同的文本高亮效果，可以组合使用htmlText属性和pasteHTML()方法

var range = document.selection.createRange();

range.pasteHTML("");

以上代码通过htmlText取得了当前选区中的HTML，然后将其放在了一对标签中，最后又使用pasteHTML()将结果重新插入到了选区中

表单提交

因为富文本编辑不是使用表单控件实现的，因此富文本编辑器中的HTML不会被自动提交给服务器，而需要手工来提取并提交HTML。为此，通常可以添加一个隐藏的表单字段，让它的值等于从iframe或使用contenteditable属性的元素中提取出的HTML。具体来说，就是在提交表单之前提取出HTML，并将其插入到隐藏的字段中。下面就是通过表单的onsubmit事件处理程序实现上述操作的代码

form.onsubmit = function(e){

e = e || event;

var target = e.target || e.srcElement;

target.elements["comments"].value = frames["richedit"].document.body.innerHTML;

}

在此，通过文档主体的innerHTML属性取得了iframe中的HTML，然后将其插入到了名为"comments"的表单字段中。这样可以确保恰好在提交表单之前填充"comments"字段。如果在代码中通过submit()来手工提交表单，那么一定不要忘记事先执行上面的操作。对于contenteditable元素，也可以执行类似操作

form.onsubmit = function(e){

e = e || event;

var target = e.target || e.srcElement;

target.elements["comments"].value = document.getElementById('wysiwyg').innerHTML;

}