CKEditor на изменение CSS фокуса

Question

Я использую CKEditor в проекте Symfony с FOS\CKEditor-bundle 1.2.Мне бы хотелось, чтобы весь элемент, включающий в себя CKEditor, имел фокус на границе, аналогично тому, как вы пишете или отвечаете на вопрос по 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, когда вы сосредотачиваетесь на текстовой области, он получает добавленный класс cke_focus. Используя этот класс и второй div элемент с идентификатором cke_1_contents, вы можете создать некоторую CSS, чтобы создать рамку для содержимого (текстовой области), когда на нем сосредоточено внимание. Как это:

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

Как говорит Свидерски: в вашем классе исправлений необходимо добавить! Важное для границы, потому что редактор cke_reset устанавливает его в 0. Вы также можете добавить его как встроенный стиль.

Answer 2

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 rule на 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