无法在底部设置 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调整。为Ckeditor元素的父div添加父类，然后添加以下内容:

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']
                    ]});

Answer 4

use this:

.ck.ck-editor {
  display: flex;
  flex-direction: column-reverse;
}