KISSY Editor 源码学习笔记

2009-12-9

KISSY Editor是淘宝的开源编辑器，基于YUI2.x开发，但感觉YUI在里面起到的就一个工具的作用，我没学过YUI2.x，对阅读源代码似乎也没多大影响。不过貌似YUI2.x本来就是一个工具库的角色。

觉得边看代码边写下来效果会好得多，以后尽量这样做~对这个源码看得并不仔细，只是试图把主要部分框出来，第一次这样做，写出来挺乱，确实是一个“笔记”来着，零零散散。以下记录和分析可能有挺多错误，望发现者指正。

基础

KISSY Editor由多个模块组成，除核心模块外，其他各个模块相互独立（配置模块除外，如smilies~config~wangwang）。各个插件也相互独立，方便日后扩展。
模块上用到的HTML模板都在开头定义，用全大写字母命名，模板上的参数用大括号括起，使用时用replace替换参数。所有的编辑器外观样式都通过className在css里定义。

创建一个编辑器可用KISSY.Editor(textarea, config)也可用new KISSY.Editor(textarea, config)，第一种当成函数调用，会返回new KISSY.Editor(textarea, config)

基础函数：

  • 添加模块：add: function(name, fn, details)，把所有模块都保存在属性mods里。
  • 添加插件：addPlugin: function(name, p)， 把所有插件都保存在属性plugins里，不允许同名插件覆盖。
  • 加载所有模块：_loadModules 执行所有模块的fn，并把执行过的模块加入属性_attached里

核心模块

core~config: 配置模块
lang~*: 语言模块，保存在E.lang[*]，自由扩展多种语言
core~plugin: 定义插件种类
core~dom: 封装一些与编辑器dom相关的方法到E.Dom
core~color: 封装颜色值转换相关方法和正则表达式E.Color
core~command: 不明
core~range: 封装Range方法（获取选中对象、选中文本等）到E.Range

core~instance: 实例化编辑器

  • render编辑框，在此模块开头定义编辑框模板，在传入的textArea前面插入编辑框，隐藏textArea
  • 创建工具栏和菜单栏，并调用各自的init()初始化: this.toolbar = new E.Toolbar(this); this.statusbar = new E.Statusbar(this);
  • 初始化所有插件（工具栏和状态栏的插件在各自的对象里初始化），给每个插件的属性editor传入当前编辑器实例 p.editor = this;
  • 连接到编辑框的三个属性：container contentWin contentDoc

core~toolbar: 工具栏模块

  • init(): 按照config.toolbar的参数用_addItem加载插件
  • _addItem(): 初始化插件，把插件加入工具栏
  • _bindItemUI: 给插件绑定事件
  • 三个updateState相关方法让鼠标点击编辑框时插件根据情况改变状态

core~statusbar: 状态栏模块 与工具栏类似

core~menu: 下拉菜单模块

工具栏有些插件点击后有下拉菜单供选择，例如字体、颜色等，在此模块定义通用方法，需要用到的插件可以调用。

插件模块

smilies~config~default、smilies~config~wangwang: 表情插件的配置文件 每一个为一套表情图片。

plugin~*: 插件模块

  • 每个模块使用E.addPlugin添加相应的插件
  • 每个插件里：
    • 如果定义了init()，则在初始化插件时会调用。
    • 每个插件都有属性type，指定它是哪个类型的插件
    • 放在toolbar上的插件，点击时执行插件的exec() 方法
    • 插件与外部的连接：editor: 编辑器实例，即Editor.Instance

暂时到这里~

分类:技术文章 Tags:
评论