CK编辑器无法设置工具栏位置（反应js）

Question

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

 $.ajax({
        url: pathtoBuyerDetails,
        type: "Get",
        **headers: { Authorization: 'Bearer ' + sessionStorage.getItem('AuthorizeToken')},**
        data: { Time: Time, UID: UID },
        success: function (values) {something}

但工具栏仍位于顶部

任何帮助都会非常感谢。

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，以获取更多信息。