如何预防| Mozilla FireFox (3.6) ContentEditable -- 将 CSS 应用到可编辑容器而不是其内容

Question

我有一些页面是这样的：

<div id="editor" contenteditable="true">SomeText</div>

我有一个自制的 JS 编辑器，

document.execCommand(some_command,false,optional_value);

当用户按下编辑器中的按钮时，它实际上会发出问题。 （例如我有简单的[粗体]按钮）。

只要我对“SomeText”的一部分进行编辑，一切就都很好。例如，用鼠标选择“Text”并按 [Bold] 按钮（这会导致 document.execCommand("bold",false,false);）将产生：

<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>

但是当我选择 div 的整个内容时（此中的“SomeText”）例如）并在我的编辑器中按 [Bold]，FF 不会产生预期的结果

<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>

，而是

<div id="editor" contenteditable="true"  style="some-css-here">SomeText</div>

注意“style”属性进入了可编辑的 div！

为什么这对我有影响？ --这是因为编辑完成后，我想获取可编辑 div 的内容以及所有样式、格式等，并在页面上进一步使用它。但我不能——所有的样式现在都位于 div 内。 当我被建议从 div 中提取样式时，解决方案是不可接受的 - div 在其生命周期中从页面的其他活动元素中获取大量样式（大量使用 jQuery）

简单来说： 如何告诉 FF 永远不要碰可编辑的 div 并将所有样式仅应用于其内部内容？

真诚感谢您的宝贵时间。 （刚刚扯下我最后的头发，与许多其他人一起浏览 FF 开发网站（（（（ ）

Answer 1

在任何其他 execCommand 之前调用一次并将 FF 切换到标签模式

document.execCommand('StyleWithCSS', false, false);

Answer 2

有时整理和写下我的想法会给我带来非常积极的结果。

我已经找到了满意的解决方案。

1）将隐藏的 div 作为第一个子节点插入到您的编辑 div 中：

<div id="editor" contenteditable="true">
   <div class="edit_text_mozilla_hack"></div>
   SomeText
</div>

2）它的 CSS：

.edit_text_mozilla_hack {
    display: block;
    width: 0;
    height: 0;
    -moz-user-edit: none;
    -moz-user-select: none
}

3）现在您可以编辑。我用这个小测试测试了它（实际上我需要所有这些东西来编辑简短的文本，例如标题，新闻主题等）

4）在使用内容之前 - 显而易见 - 删除该 div。
5)当您想返回编辑时——再次插入。

来自工作（最后！）））项目的一些代码：

//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
    if (!editables) {
        editables = editGetEditables();
    }
    $("." + adminOptions["admin_loader"]).remove();
    editables.each(function() {
        $(this).prepend('<div class="edit_text_mozilla_hack"></div>')
    });
}

//removes the hack from all regions
function editRemoveMozillaHack() {
    $(".edit_text_mozilla_hack").remove();
}

//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
    return $("[contenteditable=\"true\"]");
}

当然 - 测试待定。
我想听听你的消息；）
问候。

Answer 3

我遇到了类似的问题，例如，当用鼠标选择 contenteditable 区域中的所有内容或使用 CTRL-A 然后按 CTRL+B 时，Firefox 将样式放入 contenteditable 容器而不是内容。

<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>

同样适用于斜体、字体大小、字体系列和其他内联样式。
我写了一个函数来解决这个问题。它在内容下方创建新元素并更改所选范围直到该元素：

function checkSelectAll (container, cmd, args) {
    if(document.getSelection) {
        var     cn = container.childNodes,
            s = document.getSelection(),
            r = s.getRangeAt(0);

        if(r.startContainer == container && r.endContainer == container){
            var endMarker = document.createElement('SPAN')
            container.appendChild(endMarker);
            r.setEndBefore(endMarker);
            s.removeAllRanges();
            s.addRange(r);
            document.execCommand(cmd,false,args);
            container.removeChild(endMarker);

        } else {
            document.execCommand(cmd,false,args);
        }
    } else {
        document.execCommand(cmd,false,args);
    }
};

此代码仅影响 FF，对于其他浏览器，它将仅应用 execCommand