javascript中的富文本编辑

一说起富文本，人们第一印象就是像使用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事件处理程序

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

【2】contenteditable

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

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

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

打开富文本编辑关闭富文本编辑    

命令

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

测试内容

居中左对齐右对齐添加缩进去掉缩进    

文本格式

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

测试内容

宋体大字体红色字体浅绿背景加粗斜体    下划线        

编辑

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

测试内容

复制剪切    粘贴    全选删除    后删除    清空格式前进一步    后退一步打印    

插入

插入标签    　　 document.execCommand('formatblock',false,elementName);
插入
    　　document.execCommand('inserthorizontalrule');
插入
    　　document.execCommand('insertorderedlist');
插入
    　　document.execCommand('insertunorderedlist');
插入
        document.execCommand('insertparagraph');
插入图像   　　 document.execCommand('insertp_w_picpath',false,URL);
增加链接   　　 document.execCommand('createlink',false,URL);
删除链接   　　 document.execCommand('unlink');

测试内容