你的位置:首页 > Java教程

[Java教程]深入理解javascript中的富文本编辑


前面的话

  一说起富文本,人们第一印象就是像使用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>

最后

  实现一个富文本编辑器,看似容易,但实际上是一个大工程

   给大家推荐几款不错的在线富文本编辑器

  widgEditor

  wangeditor

  ueditor

  欢迎交流