从 7.19 开始调研并开发到现在,经过两周的测试算是基本稳定了,下一步就是重构以及插件规划,完善插件层次,抽象公共功能,先放出预览地址:
kissy editor 2.0 beta
也有必要整理一下思路。
功能:
由左至右包括:源代码查看,预览,模板,撤销与重做,清除格式,大小,字体,加粗,倾斜,下划线,删除线,标题格式,背景色,文本色,项目列表,编号列表,左缩进,右缩进,左对齐,居中对齐,右对齐,链接,插入flash,插入音乐,表情,表格编辑,分页符,最大化
代码结构:
通用核心:
事件以及dom操作采用 kissy
,改进 kissy loader 从公共插件源载入插件功能到编辑器单个实例。
编辑器核心:
格式化以及节点遍历采用 ckeditor core
,移植到 kissy ,包括 :
iframe 初始化兼容性处理
编辑器 iframe firefox 焦点兼容
ie 自定义域( domain )处理
dom节点的各种遍历,抽象的walker以及dom node iterator(迭代器)
dtd 的 javascript 简便表示
html parser 的 javascript 实现
range以及selection在ie下的标准实现
最终标签格式化体系的整合应用(styles)
核心插件:
将插件注册到全局空间 KISSY.Editor,编辑器实例通过 use 来使其获取对应插件功能,其中UI组件作为一种特殊的插件对待:
UI组件:
紧密结合编辑器的功能需求以及特性,形成:
0.triplebutton
三态按钮,包括可选(on),不可选(disabled),已选中(off)三个状态。
1.overlay
弹出框功能,必定附属于某个插件,弹出前后处理与其关联的编辑器焦点。
2.bubble view
(泡泡弹出)
继承自 overlay ,属于仿google doc实现,是图片以及链接编辑的快捷方式,集中控制筛选特定元素,在选中时弹出tip操作提示。
3.下拉框
组合自overlay,模拟系统自带的下拉框,解决ie6 原生下拉框干扰编辑器内部焦点问题
4.popup
overlay的简单应用,直接结合插件,在其下方弹出
5.右键
组合自 overlay ,集中控制筛选特定元素,右键弹出对应功能菜单。
辅助功能:
拖放
参考 yui3 dd
的实现,目前只有 drag,但是已经足够。
离线存储
:
使用flash模拟html5对应特性。
多文件上传:
进行中,使用多文件上传flash
处理进度以及文件多选问题。
主题:
集成 google 以及 taobao清爽主题,主题以文件为目录分插(组)件组织,发布时利用ant按照各自主题打包出对于单个css文件。
打包工具:
采用 ant 编写具有一定扩展性的自动build脚本
,分离核心插件以及业务插件。
预览地址:
kissy editor 2.0 beta
- 大小: 10.1 KB
- 大小: 6.3 KB
- 大小: 12.3 KB
- 大小: 17.4 KB
- 大小: 6.5 KB
- 大小: 104.8 KB
- 大小: 6 KB
- 大小: 4.6 KB
- 大小: 4.5 KB
- 大小: 857 Bytes
- 大小: 727 Bytes
- 大小: 530 Bytes
分享到:
相关推荐
在 Web 编辑器领域, CKEditor – 七年的专注,赢取的是王者风范。 TinyMCE – 五年前的小家碧玉,如今已成长为大家闺秀。...于是有了今天发布的淘宝开源编辑器:KISSY Editor, 已在 淘帮派 上线试用。
淘宝帮派编辑器 kissy editor 2.0
KISSY Editor 是开源项目 KISSY UI Library 的一个组件。KISSY 目前基于 YUI 2.x 开发,目标是打造一系列小巧灵活、简洁实用、使用起来让人感觉愉悦的 UI 组件。目前已有 CSS 基础框架、搜索提示 Suggest 和今天发布...
兼容所有主流浏览器,界面漂亮,功能不多,不过做前台足够了. 内有demo 欢迎大家下载
KISSY Editor 一个小巧灵活的网页编辑器
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。 KISSY ...
KISSY Gallery 说明 展览馆,存放社区贡献的正式组件 组件目录结构 0) assets 统一使用 UTF-8; 1) github上 Gallery 目录结构说明: gallery 根目录下, 提交各个组件目录, 拿 pagination 举例: gallery | -- ...
NULL 博文链接:https://chen-miao.iteye.com/blog/1759793
淘宝发布开源编辑器:KISSY Editor,和我们在 WordPress 后台使用的富文本编辑器 TinyMCE 一样,它可以让我们在线编辑和格式化文本,但是相比 TinyMCE KISSY Editor 更加轻巧,更加适合国内的网络环境。
在线的文本编辑器,可以在前台使用kissy_editor_1.0.0_build242
非常实用的网页编辑器。淘宝官方所用的编辑器。点开即可使用。
KISSY提供稳定的核心,包括 oo、dom、Event、Anim、Ajax 等;强大且易用的脚本加载器,特有的 loader;丰富的UI组件,包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全...
KISSY 1.4.8,一个淘宝用的类似jQuery的前端框架
kissy-1.4.8.zip,淘宝最新前端开发包
js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码 js KISSY框架阿里云滑动下拉导航菜单效果代码
Kissy 15天学会.zip欢迎下载!!!
Web常用UI库 kissy ,kissy 是淘宝一个开源的 JavaScript 库,包含的组件有:日历、图片放大镜、卡片切换、...
高发展前途的web前端开发利器--kissy,中文文档。拥有该文档后不必再上网到处找,一切尽在其中。
淘宝kissy帮助文档 学习文档 用法等
Kissy学习教程.rarKissy学习教程.rarKissy学习教程.rarKissy学习教程.rar