CK Editor无法设置工具栏位置（反应js）

Question

我正在尝试将工具栏放在编辑器的底部。根据文档，我已将 toolbarPosition:bottom 属性传递给配置，但似乎它不起作用。这是代码

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;

但工具栏仍然放在顶部

任何帮助都会非常感谢。

Answer 1

您可以使用评论中提到的解耦编辑器和封闭的issue 8168。您可以在 codesandbox 上找到工作示例。

基本上，您希望将工具栏追加工具栏放置到编辑器组件的容器中：

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

关注official guide了解更多信息。