javascript - CKEditor 焦点 CSS 更改

Question

我在 symfony 项目中使用 CKEditor 和 FOS\CKEditor-bundle 1.2。我希望包含 CKEditor 的整个元素具有焦点边框，类似于您在 Stackoverflow 上编写或回答问题的方式。 使用较旧的 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(不一样，因为)。如果您想将类添加到特定编辑器实例的 body 元素，请使用 editor.document.getBody();。

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

我还建议将 body 规则中默认的 margin:20px; 替换为 padding: 20px;边距: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