Question

我正在使用CKEditor5 React Component Framework。我已成功将CKEditor集成到我的项目中，并且能够使用它。但是问题是我必须将编辑器的内容保存到数据库中，然后将其显示到网站上。我所得到的全部内容

<blockquote><p>Hello from CKEditor 5!</p></blockquote>

并且在显示时不应用CkEditor的css显示..

CKEDITOR的设置为

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


export class ClassicEditor extends Component {
    constructor(){
        super();
        this.state = {
            content : ""
        }
    }
    onCashange  = data => { 
        console.log( "Called" );
        this.setState({
            content : data.getData()
        })
     }
    render() {
        Classiceditor.builtinPlugins.map( plugin => console.log(plugin.pluginName) );

        console.log("State", this.state.content);
        return (
            <>
            <div className='App'>
                <h2> Using CKEditor</h2>
                <CKEditor
                    editor = { Classiceditor }
                    data = "<p>Hello from CKEditor 5!</p>"
                    onInit = { editor => { 
                        //console.log( 'Editor is ready to use!', editor )
                     } }
                     onChange = { ( event, editor ) => { 
                         this.onCashange( editor );
                         
                        // const data = editor.getData();
                        // this.onChange( data );
                        // //console.log( { event, editor, data } );
                      }}
                    onBlur = { editor => 
                    console.log("Blur", editor) }
                    onFocus = { editor => { 
                        //console.log( "Focus", editor )
                     } }  
                />
            </div>
            
            <div className='editor'>
                     { this.state.content }
            </div>
            </>
        )
    }
}

export default ClassicEditor

Answer 1

有两个选项：

下载或使用脚本获取完整的 CSS 并将其包含在您的项目中。 Link here

注意：你必须添加一个类名ck-content

的父容器

从源代码创建自定义 CKEditor 5 构建，并将所有 CSS（UI 和内容）提取到单独的文件中 Advance Guide

您可以在此处查看更多文档： Content Styles

Answer 2

你可以像 npm i react-render-html 这样安装 npm 包 enter link description here 并像这样使用它：

 <div className='...'>
    {renderHTML(someHTML)}
  </div>

Answer 3

React不允许您直接呈现html代码。相反，您必须使用dangerouslySetInnerHTML属性。请执行以下操作以解决您的问题，

<div dangerouslySetInnerHTML={this.createMarkup()} className='editor'></div>

，并且在类上有一个方法

    createMarkup = () => {
      return { __html: this.state.content };
    }

这将确保您不向页面呈现原始HTML。

您可以了解有关此here

的更多信息

Answer 4

以下是上述问题的答案：

<div style={{wordWrap:'break-word',display:'inline-block'}}>
<div className="editor" dangerouslySetInnerHTML={{_html:this.state.content}}/>
</div>

如何在React Js中显示CKEditor5的保存内容

4 个答案: