meditor开发总结

meditor是战总ueditor的ipad版，GMU同学一起开发的，目前这一阶段算是开发完成，整合demo可看了，可以从http://ueditor.baidu.com/website/meditor.html上看，趁今天比较闲，将这几周来的工作总结一下。

1. 代码设计

meditor架子基本上与ueditor一样，分为核心core，插件plugin和界面ui层，以命令形式驱动ui操作，ui与底层完全分开，逻辑操作通过桥接层来处理。meditor基本只在adapter层和ui层上进行开发。底层最核心的算是对range，selection及editor的封装，昨天把w3c的range操作大致看了一遍，本来想把战总封装的range看一遍，看了1/3，实在看不下去了，太细太复杂了，以后要是真有这方面的需求，再细看吧，不过在ipad 上应该可以有很多精简。adapter层主要是初始化toolbar中的按钮并绑定相应的操作命令，根据ui类型的不同，分为一级buttons, dialog, popups的初始化。ui层就是各个ui插件了，这次做的功能还比较少，归类下来包括toolbar, dialog, button, popup这几类的ui，当然如果应用ui的业务逻辑比较麻烦，比如说表情，图片上传，单独在这相应ui上进行了封装。

2. hack及bug

移动上的bug总是有那么那么多。这次遇到的神奇问题也不少，有些解决了，有些还在~，等着以后慢慢解决

（1）focu, blur的键盘问题

直接调用input的focus，是不能真正将其focus的，出虚拟键盘的，通过其他元素来触发input的focus，光标和键盘均可以出来。同样，直接blur，也不会收起键盘，发现先focus，再blur可以将键盘收起

（2）chrome中font-size默认最小值

chrome中默认字体最小值是12px，如果要再进一步缩小字体，需设置-webkit-text-size-adjust: none

（3）Ipad上在document的click无效

Ipad上在document上注册的点击事件无效，在某一个具体元素上绑的click事件才有效，需将click转化成touchstart

（4）iframe不响应事件

如果页面上有iframe时，鼠标点击在iframe内时，包含iframe的document是不响应任何事件的，所以需要给iframe绑定类似的事件

（5）ipad上对元素绑上click ，有默认操作

当键盘出来focus时，页面默认会上弹一段距离，导致在横屏时，每点一个操作按钮，页面就上跳一下，因为在每个按钮上绑定了click事件，后来把click给禁了，通过采用tap

（6）输入input时，会触发页面scroll

发现在编辑框中每输入一下，就会触发页面的一次滚动，这个还未解决，所以会导致toolbar算位置的函数调好多次。。。

3. 交互设计

交互设计这块一直让我们好纠结，先开始说toolbar放在右边，滑动时出来，由于高度问题不好自适应，决定放在下边，结果又由于键盘高度未知及是否切中文不可知，高度不好算而放弃，最后决定放在上边。放在上边时出现原生的剪切档住toolbar，又增加可拖动功能，真是摸索着前进呀。在视觉风格这一块，当时也想了很久，最开始想保持与现在ueditor的淡雅风格，后来大家都偏向于ios原生风格，最后所有的ui均按原生的风格走~

开发了三周，算高一段落，后续可能也不归GMU做了，但不管怎么样，觉得meditor还是一个很好的产品，不是是功能上，还是交互和视觉上都有很大的改进空间