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.

toolbarLocation config is not supported any more for >= 5 CKEditor. You can customize the toolbar and its position by using a decoupled editor. — Christos Lytras
– Christos Lytras, Commented Sep 28, 2020 at 9:47

Dipen Shah · Accepted Answer · 2020-09-30 21:14:19Z

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.

Collectives™ on Stack Overflow

CK Editor cannot set toolbar location (react js)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related