can't set ckeditor toolbar location at bottom - editor

Question

I'm trying ckeditor, but I can't set the toolbar location to the bottom (by default it is set to the top).
I read the documentation, and I wrote this snipet in config.js file:
CKEDITOR.editorConfig = function( config )
{
config.toolbarLocation = 'bottom';
}
In config.js I have defined a toolbar and config.toolbarLocation = 'bottom' then I call ckeditor in this mode:
CKEDITOR.replace('editor', { toolbar : 'Full' });
Did I foget something else? It doesn't work. I see only textarea without toolbar (the toolbar at the top disappears).
Can you help me, please?

Answer 1

I guess it is priority to be covered. Try this:
CKEDITOR.replace('editor', { toolbar : 'Full', toolbarLocation : 'bottom' });

Answer 2

In Ckeditor 4 they have option to move toolbar to bottom but not in Ckeditor 5.
Check configuration table here
So, I did the CSS tweak.
Add a parent class to parent div of Ckeditor element and then add these:
1. Using flex-direction to flip order of toolbar and editing area:
.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. Assign less height to Toolbar and more to edit area:
.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. Remove shadow and outline when focusing on edit area (optional, only if you want):
.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

try this code :
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;
}