本文介绍了mini-editor，一个基于Javascript的Web编辑器项目。设计目标是轻量级和所见即所得，主要利用jQuery实现，注重浏览器兼容性。编辑器具备多种格式编辑功能，支持多语言，通过iframe实现，使用execCommand和自定义方式处理格式。文章详细阐述了编辑器的设计思路、功能实现、文件目录结构以及使用方法。
一、源码路径
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、ho
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
