YUI2 RTE分析－2：execCommand兼容性

承续，YUI2 RTE分析－1：核心函数 ，分析一下yui editor如何解决最头疼的execCommand兼容性问题，RTE的主要作用之一就是用户可以对自己输入的内容进行格式调整，而这一功能主要是通过浏览器提供的exeCommand来实现的，但是这个函数各个浏览器间的运行效果差异很大，详见：execCommand Compatibility    ，yui editor很多格式化功能实际上没有调用 execCommand的对应参数，而是通过自己产生包装标签来实现的。

解释：

格式化的关键在于合适的标签Tag与css的生成。

对于不直接采用execCommand处理格式化的情景，yui对应着的就是 _createCurrentElement 函数，参数为 (tagName,cssStyle) ，解释如下：

1。如果当前没有选中内容则在当前位置插入新dom结点，结点标签为tagName，css为cssStyle，并定位到新结点内，用户再输入即采用新格式。

2。如果当前有选中，则把当前选中元素包裹在新生成的结点中，该结点标签为tagName，css为cssStyle，当前选中内容立即采用新格式。

则完成了格式化的任务。

演示：

rte@yui3 createCurrentElement 演示@google code

输入合适的tagName以及json 格式的css描述，点击按钮进行相应的格式操作。

实现原理：

仔细观察execCommand Compatibility  可见，有两条参数情景各个浏览器还是达成了一致，即fontname与insertimage，yui editor即是利用了这点实现了上述1，2（若完全不用execCommand，又是要涉及range，尚不知如何实现）

1。若没有选中内容，调用 execCommand('insertimage', false, 'yui-tmp-img') 在当前位置插入 css class为yui-tmp-img的图片结点，然后再将该图片结点替换为格式要求的标签为tagName,css为cssStyle的新建节点。

2.若选中内容，调用 execCommand('fontname', false, 'yui-tmp') 生成 <span class="yui-tmp">选择内容</span> 结点替换当前选择内容。

注意： 这点非常巧妙，特别是对应跨越结点的内容选择，浏览器可以生成合适的包裹标签，而避免了自己分析超级复杂的跨边界选择问题。

最后同1：再将该span结点替换为格式要求的标签为tagName,css为cssStyle的新建节点，并把新建结点的innerHtml赋值为span结点的innerHTML。