CK Editor cannot set toolbar location (react js)

Question

I am trying to put the toolbar in bottom of my editor. As per the docs I have passed toolbarPosition:bottom property to config but seems like it didn't work. Here is the code

import React from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

function App() {
  return (
    <div className="App">
      <CKEditor
        editor={ClassicEditor}
        data="<p>Hello from CKEditor 5!</p>"
        onInit={editor => {
          // You can store the "editor" and use when it is needed.
          console.log('Editor is ready to use!', editor);
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
        }}
        config={{
          toolbarLocation: 'bottom'
        }}
      />
    </div>
  );
}

export default App;

but still the toolbar was placed on top

Any help would be really thankfull.

Answer 1

You can use decoupled editor as mentioned in the comment and in closed issue 8168. You can find working example on this codesandbox.

Basically, you want to place toolbar append toolbar to container of editor component:

import React from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import DecoupledcEditor from "@ckeditor/ckeditor5-build-decoupled-document";

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <CKEditor
        editor={DecoupledcEditor}
        data="<p>Hello from CKEditor 5!</p>"
        onInit={(editor) => {
          console.log("Editor is ready to use!");
          console.log(editor.ui.getEditableElement());
          editor.ui
            .getEditableElement()
            .parentElement.append(editor.ui.view.toolbar.element);
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          console.log({ event, editor, data });
        }}
        config={{
          toolbarLocation: "bottom"
        }}
      />
    </div>
  );
}

Follow official guide for more information.