не могу установить расположение панели инструментов ckeditor внизу

Question

Я пытаюсь ckeditor , но я не могу установить расположение панели инструментов внизу (по умолчанию оно установлено вверху).Я прочитал документацию и написал этот фрагмент в файле config.js:

CKEDITOR.editorConfig = function( config )
{
   config.toolbarLocation = 'bottom';
}

В config.js я определил панель инструментов и config.toolbarLocation = 'bottom', после чего я вызываю ckeditor в этом режиме:

CKEDITOR.replace('editor', { toolbar : 'Full'    }); 

Разве я не заметил что-то еще?Не работаетЯ вижу только текстовую область без панели инструментов (панель инструментов вверху исчезает).Можете ли вы помочь мне, пожалуйста?

Answer 1

Полагаю, это приоритет.Попробуйте это:

CKEDITOR.replace('editor', { toolbar : 'Full', toolbarLocation : 'bottom' }); 

Answer 2

В Ckeditor 4 есть возможность переместить панель инструментов вниз, но не в Ckeditor 5.

Проверить таблицу конфигурации здесь

Итак, я сделал CSS-твик.Добавьте родительский класс в родительский div элемента Ckeditor, а затем добавьте:

1.Использование flex-direction для изменения порядка панели инструментов и области редактирования:

 .ck.ck-reset.ck-editor {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
    }

2.Назначьте меньше высоты панели инструментов и больше для области редактирования:

.ck.ck-editor__main>.ck-editor__editable {

        height: 200px;
    }

    .ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar,
    .ck-sticky-panel__content {
        height: 54px;
    }

2.Удалите тень и контур при фокусировке на области редактирования (необязательно, только если вы хотите):

.ck-focused, .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
        border: none;
        border: none;
outline: none !important;
-moz-outline: none !important;
-webkit-outline: none !important;
-ms-outline: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
    }

Answer 3

попробуйте этот код:

CKEDITOR.replace('editor1', {
                    /*
                     * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
                     */
                    //                extraPlugins: 'htmlwriter',
                    toolbarLocation: 'bottom',
                    height: 200,
                    width: '100%',
                    toolbar: [
                        ['Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink'],
                        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                        ['TextColor']
                    ]});