Question

我正在尝试ckeditor，但我无法将工具栏位置设置为底部（默认设置为顶部）。我阅读了文档，并在config.js文件中写了这个snipet：

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

在config.js中我定义了一个工具栏和config.toolbarLocation = 'bottom'然后我在这种模式下调用ckeditor：

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

我是否忘记了别的什么？它不起作用。我只看到没有工具栏的textarea（顶部的工具栏消失了）。你能帮帮我吗？

Answer 1

我想这是优先考虑的问题。试试这个：

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

Answer 2

试试这段代码：

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 3

在Ckeditor 4中，他们可以选择将工具栏移至底部，但不能在Ckeditor 5中。

检查配置表here

因此，我做了CSS调整。将父类添加到Ckeditor元素的父div中，然后添加以下内容：

1。使用弹性方向翻转工具栏和编辑区域的顺序：

 .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
    }

无法在底部设置ckeditor工具栏位置

3 个答案: