[code="JS"] // *: any element // E: an element of type E // E[foo]: an E element with a "foo" attribute // E[foo="bar"]: an E element whose "foo" attribute value is exactly equal to "bar" // E.warning: an E element whose class is "warning" (the document language specifies how class is determined) // E#myid: an E element with ID equal to "myid" // E F: an F element descendant of an E element // E > F: an F element child of an E element [/code]
KindEditor 4.0 最新进展
KindEditor是一套开源的HTML可视化编辑器,目前 KindEditor 已经开始 4.0 版本的开发。
所有代码都在http://kindeditor.googlecode.com/svn/branches/4.0/里,并每天有大量更新。
目前框架基本已形成,node、range、command、部分UI基本都写完,完成度应该50%左右。接下来的主要开发工作是plugin的开发,HTML格式化和样式系统的完善。
4.0最大的特点是每个模块可以单独调用,基础库设计参考了jQuery的API设计,内置选择器,大量节省UI方面的代码。
部分亮点:
--------
1) 轻量级选择器,200行左右的代码,目前支持以下选择器语法。
[code="JS"]
// *: any element
// E: an element of type E
// E[foo]: an E element with a "foo" attribute
// E[foo="bar"]: an E element whose "foo" attribute value is exactly equal to "bar"
// E.warning: an E element whose class is "warning" (the document language specifies how class is determined)
// E#myid: an E element with ID equal to "myid"
// E F: an F element descendant of an E element
// E > F: an F element child of an E element
[/code]
性能测试:http://kindeditor.googlecode.com/svn/branches/4.0/benchmark/selector.html
2)w3c range:完整实现W3C标准range,并进行了大量的单元测试。
单元测试:http://kindeditor.googlecode.com/svn/branches/4.0/test/range.html
3)类似jQuery的node操作。
例子:http://kindeditor.googlecode.com/svn/branches/4.0/examples/node.html
4)menu、dialog单独调用。
例子:
http://kindeditor.googlecode.com/svn/branches/4.0/test/menu.html
http://kindeditor.googlecode.com/svn/branches/4.0/test/dialog.html
5) 灵活的自定义样式系统。
加粗例子:下面代码表示已经有span、b、strong时取消加粗,当前没有加粗则用strong加粗。strong标签改成b、span都可以。
[code="JS"]
this.toggle('', {
span : '.font-weight=bold',
strong : '*',
b : '*'
});
[/code]
6)dialog放弃iframe,打开时用户体验更好,并可以跨域。比如,在www.aaa.com页面上可以调用www.abc.com的kindeditor.js。
7)使用大量开发补助工具,现在的开发模式和代码质量接近jQuery、ckeditor等世界顶级项目的水平。
js-doc:文档生成
firebug-lite:非FF浏览器上调试js
qunit:js单元测试
jslint:js语法检测
ant:批处理
sIEve:IE内存使用情况检测
8)创建编辑器更直观,可用选择器指定textarea,放在textarea下面时可以直接使用KindEditor.create,也可以用jQuery的ready代替KE的ready函数。
[code="JS"]
KindEditor.ready(function(K) {
K.create('#id textarea');
});
[/code]
目前实现了这么多功能,所有代码加起来才90KB左右(包含部分插件),通过google closure压缩后50多KB,所以核心部分有望控制在100KB以内。
最终发布文件:
--------
kindeditor.js - 核心代码,100KB左右(源代码,没有压缩)
lang/zh_CN.js - 语言包
plugins/xxx.js - 插件代码,功能越多体积越大,如果功能和3.5一样多,体积应该和3.5差不多。
themes/default/default.css - CSS文件,代码比3.5少很多,因为table容易发生CSS冲突,打算全部用div。
themes/default/default.gif - 图标文件
如果把三个js合并成一个js的话,调用kindeditor只需要三个文件(1个js、1个css、1个gif)。