mini-editor项目设计介绍（一个基于Javascript的Web编辑器）

来源：互联网发布：淘宝没有达人淘编辑：程序博客网时间：2024/05/22 14:54

一、源码路径

https://github.com/weiganyi/mini-editor

二、界面

你用浏览器打开源目录下的test.html文件，就可以看到一个样例Web编辑器的外观。

三、背景

网上有许多开源的Web编辑器项目可以方便我们使用，但是它们的功能通常都比较丰富，体积也较大，并且很多功能通常都用不到，所以我萌生了做一个轻量级Web编辑器的想法。

Web编辑器的使用环境决定了要使用Javascript来实现，有些开源项目需要前后台代码来配合完成功能，我考虑到编辑器的通用性，所以主要依靠HTML/CSS/Javascript来实现，尽量不依赖后台代码的配合。

Web前端开发一个很重要的问题是要保证不同浏览器的兼容性，所以我尽量使用jQuery库而不是原生API来完成DOM树的操作，并且实测了主流的IE、Firefox、chrome三个浏览器的兼容性。

一些编辑器需要用户手动输入html或者自定义的标签来实现格式，需要用户有编程基础或者学习一套格式标签，非常不方便，所以实现一个所见即所得的编辑器是项目的首要目标。

四、功能实现

编辑器主要完成如下功能：

1、提供一个编辑框工具条，工具条提供如下功能：bold、italic、underline、strikethrough、font、orderedlist、unorderedlist、indent、outdent、horizontalrule、link、unlink、hostimage、nwkimage、removeformat、emoticon、table。

2、对font、link、hostimage、nwkimage、emoticon、table等编辑功能提供下拉菜单风格的具体配置页框。

3、提供支持界面多语言的机制。

4、选择三个主流浏览器IE8、Firefox24、chrome31来验证兼容性。

5、要能够比较方便的集成到Web页面中。

五、总体设计思路

1、编辑器使用jQuery来提高浏览器兼容性，通过给jQuery库增加插件函数和对象的方式来组织代码。同时由于给jQuery增加插件函数或对象，会污染jQuery的名字空间，考虑到要尽量减少名字空间污染，整体控制在只给jQuery增加一个创建函数和一个编辑器对象来实现所有功能。

2、编辑器用到的html和css要尽量独立出来，这样便于阅读和维护，减少直接通过Javascript对DOM树的操作。

3、下拉菜单风格的命令配置页框，使用css的absolute视图来实现，通过鼠标事件触发页框的显示与隐藏。

4、Web编辑器实现主要有两种方式，一种是通过textarea的多行文本框，另一种是使用iframe框架，然后把它的contentEditor属性设为true，前者的优点是能够跟表单无缝集成，缺点是如果插入图片，不能够所见即所得的显示出来，考虑到用户友好性，我选择后一种方式来实现。

5、在实现格式编辑功能时，也有两种选择，一种是通过浏览器支持的execCommand来完成，另一种是自己获取选中范围，然后修改范围的样式，再重新插入文本中的手工方式。前者的优点是简单，后者的优点是灵活，但是需要自己处理不同浏览器的兼容性。考虑方便和兼容性方面，我主要依靠execCommand来实现格式功能，除了execCommand不支持的表格插入功能用第二种方式来实现。

6、因为iframe本身不能提交，所以在提交时需要另外创建一个隐藏的表单，表单包含一个textarea多行文本框，然后获取iframe的内容并赋值给textarea多行文本框，来实现提交功能。

7、多语言机制设计上通过定义一个包含界面文本的字符串数组，每种语言独立一个js文件，文件里包含这种语言对应的字符串数组。然后通过Javascript脚本把配置语言对应的js文件链接到Web页面的<head>标签里，来实现界面文本的多语言定义，最后再对界面文本进行替换。

8、在实现本地图片提交功能时，也有几种选择。第一种是采用传统input type=file控件来实现，在选择文件后，通过val()获取选择文件的路径，但在chrome和firefox下浏览器由于安全考虑要隐藏本地文件的路径，只能获取到文件名，不能获取到完整路径，所以没法把图片实时插入iframe中并显示出来。第二种是采用ajax来提交本地图片，但是在chrome下也是因为安全原因不能通过ajax来访问本地文件，并且用ajax提交时要创建FormData类型的数据，IE却不支持这个，所以这种方法不具有浏览器通用性。第三种是创建一个隐藏的iframe，然后再创建一个表单，表单的target属性指向这个隐藏的iframe，表单包含input type=file控件，当提交这个表单时，只会刷新这个隐藏的iframe，不会刷新页面，所以页面看起来是没有刷新的。再通过监听iframe的load事件，可以获取服务器的响应，从中取得服务器端生成的图片路径。所以最后采用第三种方式来实现本地图片的提交功能。

9、为了预防重复提交文章，我在每次提交表单时增加一个timestamp随机字符串参数，供后台判断是否是重复的请求。

10、不提供同一Web页面的多个编辑器支持，主要有如下考虑：1）用户体验不好，如果一个页面有多个编辑器，提交其中一个编辑器内容时页面会刷新，会导致其他编辑器也被刷新，即便通过提交的编辑器触发其他编辑器也同时提交，还是需要用户保证所有编辑器的内容都是处于最终可提交状态的，不好控制。2）编辑器主要应用的博客之类网站可以不需要一个页面有多个编辑框。3）如果要实现一个页面有多个编辑器，同时要在提交一个编辑器时不刷新页面，需要为每个编辑器准备一个隐藏页框来实现，提交时刷新这个页框。另外工具条以及编辑器对象需要采用动态创建的方式，以便于根据编辑器的名字来给它们设置名字，以避免同一Web页面中对象的名字冲突。

六、文件及目录介绍

jquery-1.10.1.js：jQuery库代码。

mini_editor.css：定义了工具条所使用的css样式基础。

mini_editor.js：编辑器的主要Javascript代码，同时包括工具条的html基础代码。

test.html：一个使用编辑器的样例Web页面。

images目录：包含工具条所用到的图片。

images/emoticons目录：包含表情图片。

lang目录: 包含界面文本不同语言的js文件。

七、使用方法

1、怎样应用Web编辑器到页面

首先需要链接jQuery库、编辑器CSS/JS文件到<head>标签：
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<link type="text/css" rel="stylesheet"href="mini_editor.css"/>
<script type="text/javascript"src="mini_editor.js"></script>

其次在Web页面中定义一个iframe，iframe的外观自己控制并决定最终编辑框的外观：
<p>
<iframe src="" frameborder="0" id="editor"name="editor" width="800" height="300"style="border:1px solid #ccc;"></iframe>
</p>

最后在定义的iframe下面插入一段Javascript脚本来生成编辑器：
<script type="text/javascript">
$("#editor").mini_editor_create({lang:"ch",
image_page:"http://172.125.102.146/image.php",
text_page:"http://172.125.102.146/text1.php"});
</script>

经过上述步骤后，Web编辑器就可以在页面中工作了。

2、Web编辑器的参数介绍

lang：语言参数，取值可以是en（英语）、ch（中文），还可自己扩充，但要和lang目录下的语言js文件名对应上。

image_page：提交本地图片的服务器页面地址。

text_page：提交文章的服务器页面地址。

base_url：编辑器根目录在目标系统的路径。

max_img：可以插入的本地图片最大数量，默认值是10。

load_callback：编辑器加载完后的回调函数，可以实现这个函数对加载完后的编辑器做一些修改动作。

submit_callback：按了提交按钮之后的回调函数，可以实现这个函数对即将提交前的表单做一些修改动作。

（完）