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

Question

我正在使用CKEditor5 React组件框架。我已经成功地将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

有 2 个选项:

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

注意:您必须添加一个类名为ck-content的父容器

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

您可以从文档中看到更多信息: Content Styles