转载来源: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');