我将CKEDITOR5与React一起使用,并且已经成功在项目中实现CKEDITOR,但是当我继续查看时,只能看到工具栏。
内容区域是不可见的,直到我单击它并出现蓝色边框。
如果我不再关注它,那就没有边界了。
这是我的代码
import React, { Component } from 'react'
import CKEditor from '@ckeditor/ckeditor5-react';
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
export default class BlogNew extends Component {
render() {
return (
<div>
<CKEditor
editor={ DecoupledEditor }
onInit={ editor => {
editor.ui.getEditableElement().parentElement.insertBefore(
editor.ui.view.toolbar.element,
editor.ui.getEditableElement()
);
} }
onChange={(event, editor) => {
const data = editor.getData();
this.setState({ text: data })
}}
/>
</div>
)}
最佳答案
DecoupledEditor专门用于需要自定义UI的集成。
确保将样式添加到组件中:
:root {
.ck.ck-editor__editable_inline {
border: 1px solid var(--ck-color-base-border);
}
}
参见@ ckeditor5-ui
关于javascript - CKEDITOR使用DecoupledEditor无法看到内容区域,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57406956/