javascript - document.execCommand 在 FireFox 中出现奇怪的结果

Question

所见即所得的文本格式化功能

/*
 * myEditor - iframe element
 */
function doFormat(what) {

    var cWin = $('#myEditor', window.parent.document)[0].contentWindow; 

    cWin.$('body').attr({ 'contentEditable': true, 'designMode': 'On'} );

    var what = 'justifyright';

    cWin.document.execCommand(what, false, arguments[2]);

    cWin.$('body').attr({'contentEditable': 'false'} );
    return;
}

HTML:

<span id="obj_123" contenteditable="true"> 
    text<br /> 
    moretext<br /> 
    alot of text <br /> 
</span>

如果单击或突出显示跨度内容的 PART(仅当选择了部分)并调用函数 doFormat(具有任何对齐函数)

结果是:

<span id="obj_123" contenteditable="true"> 
    text<br /> 
</span>

<div align="right">
    <span id="obj_123" contenteditable="true">
        moretext<br /> 
    </span>
</div>

<span id="obj_123" contenteditable="true">
    alot of text <br /> 
</span>

预期结果:

<span id="obj_123" contenteditable="true"> 
    text<br /> 

    <div align="right">
        moretext<br /> 
    </div>
    alot of text <br /> 
</span>

好像它复制了父节点，然后在每次格式化时复制它。

其他 execCommand 调用如粗体/斜体/下划线等按预期工作。

如果您能就此主题提供任何帮助，我将不胜感激。非常感谢。

编辑:添加了一个 fiddle 测试用例 http://jsfiddle.net/n7SgJ/

Answer 1

事实证明，只有当富文本包装器是 SPAN 标记时才会发生这种情况。如果使用 DIV 标签，一切正常。

这有合理的解释吗？