CKEditor关注CSS更改

Question

我在一个带有FOSCKEditor-bundle 1.2的符号项目中使用CKEditor。我希望包括CKEditor的整个elment都有一个焦点边界，类似于你在Stackoverflow上写或回答问题的方式。使用一个老问题和JSFiddle，我已经走到了这一步：

Js

// Set focus and blur listeners for all editors to be created.
CKEDITOR.on( 'instanceReady', function( evt ) {
var editor = evt.editor,
body = CKEDITOR.document.getBody();
editor.on( 'focus', function() {
// Use jQuery if you want.
body.addClass( 'fix' );
} );
editor.on( 'blur', function() {
// Use jQuery if you want.
body.removeClass( 'fix' );
} );    
} );
CKEDITOR.replace( 'editor', {
plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar',
on: {
// Focus and blur listeners can be set per-instance,
// if needed.
// focus: function() {},
// blur: function() {}
}
} );

或者作为JSFiddle的演示。一切看起来都很好，但在我的CKEditor版本中，边界实际上设置在主页的body上，而不是CKEditor。

我不明白为什么它不起作用，也不明白该改变什么。想法？

Answer 1

CKEDITOR.document等效于window.document(因为(。如果要将类添加到特定编辑器实例的body元素，请使用editor.document.getBody();。

另一个问题是编辑器实例的body保存在内部文档中，因此如果您希望fix类具有效果，则需要将其添加到例如ckeditor/contents.css或分配给https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-内容密码。

我还建议用padding: 20px; margin : 0;替换body规则中的默认margin:20px;。

编辑：

根据你的评论，我认为更好的方法是：

<style>
.fix {
border: 5px solid black !important;
}
</style>
...
var editor = CKEDITOR.replace( 'editor1', {/*instance configuration goes here*/});
CKEDITOR.on( 'instanceReady', function( evt ) {
var main_container = document.getElementById( 'cke_' + evt.editor.name ),
content_container = main_container.getElementsByClassName( 'cke_contents' )[0];
editor.on( 'focus', function() {
content_container.classList.add( "fix" );
} );
editor.on( 'blur', function() {
content_container.classList.remove( "fix" );
} ); 
} );

注意：

• 样式规则可以放在CSS文件中，但在这种情况下，它需要是主页面CSS文件，而不是contents.css
• 有必要在修复类中将!important添加到边界，因为编辑器的cke_reset将其设置为0。您也可以将其添加为内联样式

下面是一个工作示例：https://codepen.io/j_swiderski/pen/XyMyme

Answer 2

在CKEditor中，当您关注文本区域时，它会得到一个添加的类cke_focus。使用这个类和id为cke_1_contents的第二个div元素，您可以创建一些css来在内容(文本区域(上创建边框

.cke_focus #cke_1_contents {
border: 5px solid black !important;
}

就像Swiderski说的：有必要添加！在修复类中使用border很重要，因为编辑器的cke_reset将其设置为0。您也可以将其添加为内联样式。

Answer 3

对于2022年偶然发现这一点的人…

我需要为React中的CKEditor4实例定制常规边界和聚焦边界。我是从一个父组件完成这项工作的，该组件使用了一个围绕CKEditor的包装器组件。我不想直接修改包装器或CKEditor实例，也不想创建contents.css文件，因为包装器已用于应用程序的其他部分，我想要最轻松的操作。对我有效的样式覆盖看起来是这样的(注意，我使用的是material ui和JSS语法，但原理是一样的(：

.parent-container {
.cke {
border: 2px solid #111111 !important;
border-radius: 2px !important;
}
.cke.cke_focus {
border-color: #222222 !important
}
}