javascript学习笔记:动手打造一个富文本编辑器

网上的富文本编辑器很多,自己使用过的也有很多,大部分都是基于jQuery,而实现简单的富文本编辑器并不难,其主要依赖js的几个指令,现在是我在看书和看司徒正美博客的基础上,结合现在的浏览器情况,动手制作一个简单的富文本编辑器,其功能也包含大多数常用的功能:

字体大小、字体颜色、加粗、斜体、左对齐、居中、右对齐、超链接、图片、上标、下标、清除等。

一、基本页面结构

点击查看:http://sandbox.runjs.cn/show/clgyee3r

说明:
由于框架或者div不可直接编辑,而我们做富文本编辑器需要一个编辑区域,因此可通过如下设置让其处于可编辑状态:

1、designMode = "on"

一般使用iframe来做编辑区域,设置其designMode = "on",我们本次就使用iframe标签做编辑区域。

<iframe name="myEditor" width="470" height="300"></iframe>
<script>
     frames["myEditor"].document.designMode = "on";
</script>

使用iframe标签做编辑区域有诸多好处,这里是别人的总结:

  1. 用iframe可以解决浏览器的兼容性问题。在iframe下可以很方便的获取选中的文字等等。
  2. 在iframe下编辑可以实现所见即所得的效果。相当于是iframe下显示的是浏览器解析源码后的内容。
  3. 在iframe下是直接在iframe下的document中进行操作并不会影响到当前文档的document。
  4. 用iframe解决文本框和样式按钮之间焦点争夺的问题

2、contentEditable = "true"

或者使用div标签,设置其属性contentEditable = "true";

<div id="myEditor" contentEditable="true"></div>

3、我们暂时将各种按钮放到html结构中,后期这些按钮会通过js来添加。我们在此从最简单的方式入手。

4、我们将各种命令放到了span的title属性中,这是命令就是我们进行修改选中文本的重要参数,通过getAttribute()获取。

二、获取命令参数并输出

与富文本编辑器交互的主要方式,就是使用document.execCommand(),这个方法会对文档执行预定义的命令。

document.execCommand()方法传递三个参数:

  • command:要执行的命令名称,我们放到了span标签的title属性中
  • showUI:是否向用户显示命令特定的对话框或消息框(为兼容FF,此项一般设置成false,否则FF会出错)

  • value:要使用该命令分配的值,并非使用所有命令(其实很多命令用不到,没有设置为null)

不同浏览器支持的预定义命令不同,我这里只列举出来支持最多的,也是w3c推荐的:

 命令              说明              value(第三个参数)
backcolor          背景色             颜色字符串
bold               加粗               null
copy               复制到剪贴板        null
createlink         创建链接            URL字符串
cut                剪切到剪贴板        null
delete             删除选中的文本      null
fontname           设置字体            字体名称
fontsize           字体大小             1-7
forecolor          字体颜色             颜色字符串
formatblock        指定html标签格式化   要包含当前文本的HTML标签,如<h1>
indent             缩进                null
inserhorizontalrule  水平线            null
insertimage    插入图像            图像URL
insertorderedlist  有序列表            null
insertunorderedlist无序列表            null
insertparagraph    段落                null
italic             斜体                null
justifycenter      居中对齐             null
justifyleft        左对齐               null
outdent            减少缩进             null
paste              粘贴                 null
removeformat       清空格式             null
selectall          全选                 null
underline          下划线               null
unlink             取消链接             null

好了,到现为止,我们已经熟悉了命令,并且知道了最常用的命令,现在开始获取我们设置在title中的命令了,代码如下:

window.onload = function(){
  var buttons = document.getElementById("buttons");
  var myEditor = document.getElementById("myEditor");
  var tip = document.getElementsByTagName("p")[0];
  buttons.addEventListener("click",function(e){
    target = e.target;
    tip.innerHTML= "你点击了:"+target.title;
  },false)
}

通过事件委托就可以获取到各个按钮需要执行的命令,到这,我们的任务才算刚刚开始,真是的实现富文本编辑器从这里起飞。

代码测试:http://sandbox.runjs.cn/show/gpaowagp

三、对选中的文本执行预定义命令

这将是最酷炫的一步,因为你会在这一步看到你想要的结果,当然如果你的代码出现错误的话,可以看看我酷炫的效果~

闲言少叙,我们要对我们选中的文本执行预定义的命令,比如执行加粗(bold),斜体(italic)等,那么现在出现一个问题,我们该怎么获取到这些文本,我们能做的就是选中这些文本,那么这些选中的文本怎么能让这些命令知道呢?

司徒正美在博客中对选区做了解释,包括各个浏览器的兼容性也进行了分析,这里我就先不讲这些坑,先以做直接的方式做出效果。

我们先不要理会各个浏览器的兼容问题,假设你使用的是高级浏览器,那么完全放心的使用document.execCommand()方法吧!

window.onload = function(){
  var buttons = document.getElementById("buttons");
  var myEditor = document.getElementById("myEditor");
  var tip = document.getElementsByTagName("p")[0];
  buttons.addEventListener("click",function(e){
    target = e.target;
    //tip.innerHTML= "你点击了:"+target.title;
    frames["myEditor"].document.execCommand(target.title,false,null);
  },false)
}

测试地址:http://sandbox.runjs.cn/show/fuwgy1md

看看截图:

样式有点丑,接下来我们对富文本编辑器进行美化,并且增加更多功能,比如字体,字体颜色等。让它看起来更专业一点。

参考链接:

1、http://www.cnblogs.com/rubylouvre/archive/2009/07/30/1534562.html

2、http://www.cnblogs.com/zzcflying/archive/2012/08/31/2658094.html

3、document.execCommand()兼容性:

2 评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注