首页 专题 H5案例 前端导航 UI框架

聊聊开发富文本编辑器:execCommand方法

阅读 5210 评论 0
在《聊聊开发富文本编辑器:range对象》一章中,我们介绍了如何获取选区内容、保存恢复鼠标位置、鼠标定位到某个位置等方法,既然可获得光标位置和选区内容,那我们就可以对它们进行一些操作,不过,在进行操作之前,我们必须有操作对象,比如:输入框。

说到输入框,相信大家想的肯定是表单元素(input、textarea),不过表单元素毕竟有限制,比如我们不能输入可视图片,不能输入自定义样式等等,但不要气馁,现在,我们可以自定义输入框了,一般有两种方式:
  • 设置div元素的contenteditable

<div contenteditable="true"></div>


  • javascript设置iframe元素的designMode属性

<iframe id="edit" name="edit"></iframe>


var frame = document.getElementById('edit');

var obj = frame.contentDocument || frame.contentWindow.document;

obj.designMode = 'on';

contentDocument获取到的是iframe窗口的documentcontentWindow获取到的是iframe窗口的window

当然,对于iframe,你也可以这样:

var frame = window.frames['eidt'];

frame.document.designMode = 'on';

window.frames获取到的是当前文档中所有的iframe元素中的window对象,可以传入name属性的值,比如上面的就是得到name属性为edit的iframe的window对象。

实例(看里面的iframe):demo

现在有了输入框,知道鼠标位置,那么接下来就是进行一系列的操作了,如何操作呢?难道像操作DOM一样appendChild、removeChild?当然不是,在JavaScript中,有一个execCommand()方法。

这是神马东东?

我们简单的介绍一下:

document对象被转换为设计模式的时候(选中,设置contentEditable等),document对象就会提供一个execCommand方法,通过给这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对document选中区域的操作 (如bold, italics等), 也可以插入一个元素(如增加一个a链接或图片) 或者修改一个完整行 (如缩进).。当元素被设置了contentEditable,通过执行execCommand() 方法可以对当前活动元素进行很多操作。

语法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

参数说明:
  • aCommandName:String类型,命令名称
  • aShowDefaultUI:Boolean类型,默认为false,是否展示用户界面,一般设为false。Mozilla没有实现。
  • aValueArgument:String类型,一些命令需要额外的参数值(比如insertHTML需要提供HTML内容),默认为null,一般不需要参数时都使用null。

命令名称介绍(aCommandName)

backColor (用法:document.execCommand('backColor',bfalseb,Color); )  

改变文档的背景颜色。 在styleWithCss模式,它影响的是包含元素的背景。 这个命令要求提供一个颜色值<color>作为第三个参数 (Internet Explorer 使用这个命令设置文本背景色)  


bold (用法: document.execCommand('Bold','false',null); )  

对选中文本或者插入元素设置、取消粗体显示. (Internet Explorer 使用<strong>标签 而不是<b>标签。)

contentReadOnly  

转化文档进入只读或者可编辑模式. 这个命令要求提供给一个boolean值给第3个参数(ie不支持)。  


copy 用法:document.execCommand('copy','false',null);   

把当前选中区域复制到系统剪贴板。由于启用这个功能的条件因浏览器不同而不同,所以使用此功能时,请先检查浏览器是否支持。

 

createLink

当有选中区域的时候,将选中区域创建为一个锚点,需要提供一个URI给第3个参数. 这个URI必须至少包含一个字符,空白字符也可。(Internet Explorer会创建一个URI为空的a标签)  

cut 用法:document.execCommand('cut','false',null);   

剪切选中文本到剪切板. 同copy一样需要开启剪切板功能。  


decreaseFontSize  

给选中文本或者插入元素添加一个small标签。(Internet Explorer不支持)  


delete  删除当前选中区域


enableInlineTableEditing  

开启或禁用表的行和列的插入删除功能 ( Internet Explorer不支持)  


enableObjectResizing  

开启或禁用图片或者其他可调整元素大小的(resize)功能 ( Internet Explorer不支持)  

fontName 用法:document.execCommand('fontName','false',sFontName);   

改变选中文本或者插入元素的字体。需要给第3个参数提供一个字体值(例如:"Airal")  


fontSize 用法:document.execCommand('fontSize','false',sSize|iSize);   

改变选中文本或者插入元素的字体大小。需要给第3个参数提供一个数字  


foreColor  

改变选中文本或者插入元素的字体颜色。需要给第3个参数提供一个颜色值


formatBlock

添加一个HTML块式标签在包含当前选择的行,如果已经存在了,更换包含该行的块元素(在Firefox中的blockquote例外,它将包含任何包含块元素)。需要提供一个标签名称作为参数(比如:H1、P、DL、BLCOKQUOTE等)(IE仅支持标题标签H1-H6,ADDRESS和PRE,使用时还必须包含标签分隔符<>,比如<H1>)


forwardDelete

删除光标所在位置的字符,和按下删除键一样。


heading

添加一个标题标签在光标处或所选文字上。需要提供标签名称字符串作为参数(比如:H1、H6)(IE和Safari不支持)


hiliterColor

更改选择或插入点的背景颜色。需要提供一个颜色值作为参数。(IE不支持)


increaseFontSize

在选择或插入点周围添加一个BIG标签(IE不支持)


indent

取消或缩进选择或插入点所在的行。


insertBrOnReturn

控制当按下Enter键时,是插入br标签还是把当前块元素变成两个(IE不支持)


insertHorizontalRule

在插入点插入一个水平线(删除选中的部分)


insertHTML

在插入点插入一个HTML字符串(删除选中部分)。需要提供一个HTML字符串作为参数(IE不支持)


insertImage

在插入点插入一张图片(删除选中部分)。需要提供一个image src URI作为参数。这个URI至少包含一个字符(空字符也行)。(IE会创建一个值为null的链接)


insertOrderedList

在插入点或选中文字上创建一个有序列表


insertUnorderedList

在插入点或选中文字上创建一个无序列表


insertParagraph

在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中部分)


insertText

在光标插入位置插入文本内容或覆盖所选的文本内容


italic

在光标插入点开启或关闭斜体字。(IE使用<em>标签,而不是<i>)


justifyCenter

对光标插入位置或所选内容进行文字居中


justifyFull

对光标插入位置或所选内容进行文本对齐(两端对齐)


justifyLeft

对光标插入位置或所选内容进行文本左对齐


justifyRight

对光标插入位置或所选内容进行文本右对齐


outdent

对光标插入行货所选行内容减少缩进量


paste

在光标位置黏贴剪贴板的内容。(对选中内容替换)


redo

重做被撤销的操作


removeFormat

对所选内容去除所有格式(比如:加粗)。


selectAll

选中编辑区里的全部内容


strikeThrough

在光标插入点开启或关闭删除线


subscript

在光标插入点开启或关闭下角标


superscript

在光标插入点开启或关闭上角标


underline

在光标插入点开启或关闭下划线


undo

撤销最近执行的命令


unlink

去除所选的锚链接的<a>标签


useCSS

切换使用HTML tags还是CSS来生成标记。需要一个布尔值作为参数。该属性已废除,使用styleWithCSS代替。


styleWithCSS

用这个取代useCSS命令。切换使用HTML tags还是CSS来生成标记。需要一个布尔值作为参数。(false使用CSS,true使用HTML)



实例:编辑器

额外篇:自定义右键菜单

function setContextMenu() {   

  var edit = document.querySelector('.edit');   

  edit.oncontextmenu = function(e) {   

    e = e || window.event;   

    e.preventDefault();         


    var top = e.pageY || e.clientY + document.body.scrollTop + document.docuemntElement.scrollTop;       top -= this.scrollTop;   

    var left = e.pageX || e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;   

    left -= this.scrollLeft;


    var menu = '<div class="contextmenu" style="background:#fff;color:#333;padding:10px;position:fixed;top:' + top + 'px;left:' + left + 'px">';   

    menu += '<a>右键菜单</a>';   

    menu += '</div>';   

    var box = document.createElement('div');   

    box.innerHTML = menu;   

    var menuBox = document.querySelector('.contextmenu');   

    if(menuBox) {   

      menuBox.style.top = top + 'px';   

      menuBox.style.left = left + 'px';   

    } else {   

      document.body.appendChild(box.firstChild);       

    };     

  }; 

  /*失去焦点时关闭右键菜单*/

   window.addEventListener('click',function(e){   

    e = e || window.event;     

    var menuBox = document.querySelector('.contextmenu');

    if(menuBox){

      var target = e.target;

      var parent = target.parentNode;   

      if(parent.nodeName != 'DIV' || !parent.classList.contains('contextmenu')){ 

        document.body.removeChild(menuBox);   

      } 

    }  

  }); 

};

实例(在编辑框里点击右键试试):Demo

到这里,关于开发富文本编辑器已经讲完了,至于怎么使用,就要靠你多敲了。

如有不对之处,欢迎指正!如有疑惑,也欢迎提问!



关注”全栈技术杂货铺“

全栈技术杂货铺