web-dev-qa-db-ja.com

ドラフトjs。 EditorContentをデータベースに永続化する

_draft-js_のEditorContentをデータベースに永続化してから、EditorContentオブジェクトを読み取って再作成しようとしています。ただし、EditorContent.getPlainText()はリッチテキストコンテンツを削除します。他にどのようにすればいいのかわかりません。

EditorContentを適切に永続化するにはどうすればよいですか？

javascriptreactjsdraftjs
25
Dulguun Otgon

getPlainText()メソッドは、その名前が示すように、リッチな書式設定なしでプレーンテキストのみを返します。 convertToRaw（）およびconvertFromRaw（） 関数を使用して、エディターのコンテンツをシリアライズおよびデシリアライズする必要があります。

必要に応じて、この方法でインポートできます：（ES6を使用していると仮定）

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

代わりにHTMLをエクスポートする必要がある場合は、 https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2#926 （インポートできるかどうかわからないただし、HTMLから返されたコンテンツ）

40
christophetd

データベースを読み込んで保存するときに、RawContentStateオブジェクトをstringifyおよびparseする必要があることがわかりました。

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) );
10
sealocal

ここには便利な答えがたくさんあるので、これを追加したいと思います 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));
}

その後、ページをリロードすると、保存した内容とスタイルでエディターが初期化されます。 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
  };
}
3
Mikhail Shabrikov

持続する

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

コンテンツの状態をJSON文字列として保持できるようになりました。

ContentStateを再作成するには

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