如何从内联CKEditor可编辑区域中删除边框？

Question

我在我的网页上使用内联CKEditor（因此它只是工具栏和可编辑的行）。在Chrome中，此可编辑行具有蓝色边框。在Firefox中它没有边框（你只看到闪烁的光标和CKEditor的工具栏）。

我希望Chrome和Firefox中的可编辑行具有相同的边框。我试过这个

CKEDITOR.addCss(".cke_editable{border-color: #FF0000;}");

但它没有取代那个蓝色边框 - 只添加了另一个（更确切地说，它们是部分重叠）。

Answer 1

CKEDITOR.addCss用于内部目的，例如插件开发。您遇到的蓝色边框也不是border，而是outline。使用以下规则扩展您的contents.css（或直接在该页面上指定），它应该没问题：

div[contenteditable] {
    outline: 1px solid blue;
}

JSFiddle

Answer 2

同时我自己找到解决方案，但它再次使用CKEDITOR.addCss方法。当我来到这里发帖时，我注意到oleq's answer，所以我根据这个更新了我的解决方案。

正如我所写，Firefox并没有显示该轮廓，所以如果我想在Chrome和Firefox中使用相同的边框，我必须删除轮廓并用边框替换它（在两个浏览器中都能正确显示）。所以我将此附加到CKEditor的contents.css：

div[editable] {
    border-color: #a0c0e4; 
    border-radius: 2px; 
    outline: none;
}