CKEditor 的焦点 CSS 改变

Question

我在 FOS\CKEditor-bundle 1.2 的 symfony 项目中使用 CKEditor。我希望包含 CKEditor 的整个元素在焦点上有一个边框，类似于您在 Whosebug 上编写或回答问题的方式。使用较旧的 question 和 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() {}
    }
} );

或作为 demo of JSFiddle。在 fiddle 上一切看起来都很好，但是对于我的 CKEditor 版本，边框实际上设置在主页的 body 上并且与 CKEditor 不符。

我不明白为什么它不起作用或需要更改什么。想法？

Answer 1

CKEDITOR.document等同于window.document（不一样是因为）。如果要将 class 添加到特定编辑器实例的 body 元素，请使用 editor.document.getBody();.

另一个问题是编辑器实例的 body 保存在内部文档中，所以如果你想让 fix class 生效，你需要将它添加到例如ckeditor/contents.css 或分配给 https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss.

的文件

我还建议将 body 规则中的默认 margin:20px; 替换为 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
有必要在你的修正 class 中将 !important 添加到边框，因为编辑器的 cke_reset 将其设置为 0。你也可以将其添加为内联样式。

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

Answer 2

在 CKEditor 中，当您关注文本区域时，它会添加一个 class cke_focus。使用此 class 和 ID 为 cke_1_contents 的第二个 div 元素，您可以创建一些 css 以在聚焦时在内容（文本区域）上创建边框。像这样：

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

就像 Swiderski 所说：有必要在你的修复 class 中添加 !important 到边框，因为编辑器的 cke_reset 将它设置为 0。你也可以将它添加为内联样式。

CKEditor 的焦点 CSS 改变

CKEditor on focus CSS change

javascript

ckeditor

symfony