CK Editor 无法设置工具栏位置(react js)
CK Editor cannot set toolbar location (react js)
我正在尝试将工具栏放在编辑器的底部。根据文档,我已将 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;
但工具栏仍然放在最上面
如有帮助将不胜感激。
您可以使用评论中提到的解耦编辑器和关闭 issue 8168. You can find working example on this codesandbox。
基本上,您想将工具栏 append 工具栏放置到编辑器组件的容器中:
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了解更多信息。
我正在尝试将工具栏放在编辑器的底部。根据文档,我已将 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;
但工具栏仍然放在最上面
如有帮助将不胜感激。
您可以使用评论中提到的解耦编辑器和关闭 issue 8168. You can find working example on this codesandbox。
基本上,您想将工具栏 append 工具栏放置到编辑器组件的容器中:
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了解更多信息。