Reactjs CK编辑器无法设置工具栏位置（react js）

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

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;

从“React”导入React；
从“@CKEditor/ckeditor5 react”导入CKEditor；
从“@ckeditor/ckeditor5 build classic”导入ClassicEditor；
函数App（）{
返回(
{
//您可以存储“编辑器”，并在需要时使用它。
log（'Editor已准备好使用！'，Editor）；
}}
onChange={（事件，编辑器）=>{
const data=editor.getData（）；
log（{event，editor，data}）；
}}
配置={{
工具栏位置：“底部”
}}
/>
);
}
导出默认应用程序；

但工具栏仍然放在顶部

---

任何帮助都是非常感谢的。

您可以使用注释和“关闭”中提到的解耦编辑器。您可以找到关于此的工作示例

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

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

从“React”导入React；
从“@CKEditor/ckeditor5 react”导入CKEditor；
从“@ckeditor/ckeditor5构建解耦文档”导入解耦编辑器；
导入“/styles.css”；
导出默认函数App（）{
返回(
{
log（“编辑器已准备好使用！”）；
log（editor.ui.getEditableElement（））；
editor.ui
.getEditableElement（）
.parentElement.append（editor.ui.view.toolbar.element）；
}}
onChange={（事件，编辑器）=>{
const data=editor.getData（）；
log（{event，editor，data}）；
}}
配置={{
工具栏位置：“底部”
}}
/>
);
}

---

有关详细信息，请参见。

工具栏位置

配置用于

=5

CKEditor。您可以使用自定义工具栏及其位置。