React Js如何顯示CKEditor5保存的內容

Question

我正在使用 CKEditor5 React Component Framework。我已經成功地將 CKEditor 集成到我的項目中。並且能夠使用它。 但問題是我必須將編輯器的內容保存到數據庫中，然后將其顯示到網站..我在內容中得到的所有內容

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

並且在顯示時它不會應用 CkEditor 的 css 來顯示 ..

CKEDITOR IS 的設置

 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 並將其包含在您的項目中。 鏈接在這里

注意：您必須添加一個類名為ck-content的父容器

• 從源代碼創建自定義 CKEditor 5 構建，並將所有 CSS（UI 和內容）提取到單獨的文件高級指南

您可以從文檔中看到更多信息： 內容樣式

Answer 2

React 不允許你直接渲染html代碼。 相反，您必須使用dangerouslySetInnerHTML屬性來執行此操作。 執行以下操作來解決您的問題，

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

並在類上有一個方法

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

這將確保您不會將原始 HTML 呈現到頁面。

您可以在此處閱讀有關此內容的更多信息

Answer 3

你可以像npm i react-render-html一樣安裝 npm 包，在此處輸入鏈接描述並使用它：

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

Answer 4

以下是對上述問題的回答：

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