Javascript CKEDITOR Can'；不使用解耦编辑器查看内容区域

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

import React，{Component}来自“React”
从“@CKEditor/ckeditor5 react”导入CKEditor；
从“@ckeditor/ckeditor5构建解耦文档”导入解耦编辑器；
导出新扩展组件的默认类{
render（）{
返回(
{
editor.ui.getEditableElement（）.parentElement.insertBefore(
editor.ui.view.toolbar.element，
editor.ui.getEditableElement（）
);
} }
onChange={（事件，编辑器）=>{
const data=editor.getData（）；
this.setState（{text:data}）
}}
/>
)}

DecoupledEditor专用于需要定制UI的集成。 确保将样式添加到构件中：

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

见@