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

在使用CK Editor时，可以通过设置config属性中的toolbarLocation来确定工具栏的位置。下面是一个React JS中使用CK Editor的示例，展示如何设置工具栏的位置为顶部。

首先，确保已安装了CK Editor的React组件，可以使用以下命令进行安装：

npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

然后，在你的React组件中导入必要的库和组件：

import React, { Component } from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

接下来，在你的组件类中使用CKEditor，并通过设置config属性来指定工具栏的位置：

class MyEditor extends Component {
  render() {
    return (
      <div>
        <h2>My CKEditor</h2>
        <CKEditor
          editor={ClassicEditor}
          config={{
            toolbarLocation: "top", // 设置工具栏位置为顶部
          }}
        />
      </div>
    );
  }
}

最后，将MyEditor组件添加到你的应用中，并确保在React根组件中渲染了CKEditor的样式：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import MyEditor from "./MyEditor";

ReactDOM.render(
  <React.StrictMode>
    <MyEditor />
  </React.StrictMode>,
  document.getElementById("root")
);

在上述示例中，设置toolbarLocation属性为"top"将工具栏位置设置为顶部。你可以根据需要设置为"top"、"bottom"或"inline"来调整工具栏的位置。

记得在你的项目中引入相应的CSS文件，以确保CK Editor的样式能够正确加载和显示。