Question

我在带有System.out.print("Please enter a uncoded string: "); String first = in.next(); String first = first.toUpperCase(); System.out.println("The decoded string is: "first );的symfony项目中使用CKEditor。我希望包括CKEditor在内的整个组件都具有焦点，类似于您在Stackoverflow上编写或回答问题的方式。使用较旧的question和JSFiddle，我已经走到了这一步：

Js

FOS\CKEditor-bundle 1.2

或作为demo of JSFiddle。一切看起来都很不错，但是在我的CKEditor版本中，边框实际上是在主页的// 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() {} } } );上设置的，然后点了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-contentsCss的文件。

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

编辑：

根据我的意见，我认为更好的方法是：

        <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为div的第二个cke_1_contents元素，您可以创建一些CSS，以便在关注时在内容（文本区域）上创建边框。像这样：

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

就像Swiderski所说的那样：有必要在修订类的边框中添加！important，因为编辑器的cke_reset将其设置为0。您还可以将其添加为内联样式。

CKEditor专注于CSS更改

2 个答案: