ドラフトjs。 EditorContent to Database

Question

draft-jsのEditorContentをデータベースに保存してから、もう一度EditorContentオブジェクトを読み込んで再作成しようとしています。 しかし、EditorContent.getPlainText()は、リッチテキストコンテンツを取り除きます。他にどのようにそれをするのか分かりません。

正しく維持する方法EditorContent？

Answer 1

getPlainText()メソッドは、その名前のように、リッチフォーマットなしのプレーンテキストのみを返します。 convertToRaw() and convertFromRaw()関数を使用して、エディタの内容をシリアライズおよびデシリアライズする必要があります。

必要な場合は、それらをこのようにインポートすることができます（あなたがES6を使用していると仮定）

import {convertFromRaw, convertToRaw} from 'draft-js'; 

をあなたがが、https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#9260あなたが戻ってHTMLからコンテンツをインポートすることができます（わからないを参照してください、代わりにHTMLをエクスポートする必要がある場合）

Answer 2

今コンテンツ状態がJSON文字列として永続化することができる

const contentStateJsObject = ContentState.toJS(); 
const contentStateJsonString = JSON.stringify(contentStateJS); 

を持続します。

再作成するにはContentState

const jsObject = JSON.parse(jsonString); 
const contentState = new ContentState(jsObject); 

Answer 3

私が見つけたそのI必要stringifyとparse RawContentStateオブジェクトの読み取りとデータベースに保存します。

import { convertFromRaw, convertToRaw } from 'draft-js'; 

// the raw state, stringified 
const rawDraftContentState = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent())); 
// convert the raw state back to a useable ContentState object 
const contentState = convertFromRaw(JSON.parse(rawDraftContentState)); 

Answer 4

私はこのjsfiddle demoを追加したいので、便利な答えの束がここにあります。それは実際にどのように動作するかを示しています。エディタのコンテンツの保存と取得には、local storageが使用されます。 しかし、データベースの場合、基本原則は同じです。

SAVE RAW CONTENT TO LOCAL STORAGEをクリックすると、簡単なエディタコンポーネントが表示され、現在のエディタの内容がローカルストレージに文字列として保存されます。我々はそれのためにconvertToRawとJSON.stringifyを使用します。

saveRaw =() => { 
    var contentRaw = convertToRaw(this.state.editorState.getCurrentContent()); 

    localStorage.setItem('draftRaw', JSON.stringify(contentRaw)); 
} 

その後あなたはページをリロードする場合は、あなたのエディタは何を保存したコンテンツとスタイルで初期化されます。 Beck of constructorには、適切なローカルストレージプロパティがあり、JSON.parse、convertFromRawおよびcreateWithContentのメソッドでは、以前に格納されたコンテンツでエディタを初期化します。

constructor(props) { 
    super(props); 

    let initialEditorState = null; 
    const storeRaw = localStorage.getItem('draftRaw'); 

    if (storeRaw) { 
    const rawContentFromStore = convertFromRaw(JSON.parse(storeRaw)); 
    initialEditorState = EditorState.createWithContent(rawContentFromStore); 
    } else { 
    initialEditorState = EditorState.createEmpty(); 
    } 

    this.state = { 
    editorState: initialEditorState 
    }; 
}