CKEDITOR 使用 DecoupledEditor 看不到内容区域

Question

我正在将 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>
)}

Answer 1

DecoupledEditor 专用于需要自定义 UI 的集成。确保将样式添加到您的组件：

:root {
  .ck.ck-editor__editable_inline {
    border: 1px solid var(--ck-color-base-border);
  }
}

见@ckeditor5-ui

CKEDITOR 使用 DecoupledEditor 看不到内容区域

CKEDITOR Can't see content area with DecoupledEditor

javascript

ckeditor

reactjs