KISSY Editor 源码mg游戏平台官方网站笔记

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:
评论

*

*

Baidu
sogou