web-dev-qa-db-ja.com

draft-jsからhtml出力を取得できませんか？

Facebookでdraft-jsをいじってみましたが、実際にエディターのhtml出力を取得する方法を理解できません。次の例のconsole.logは、いくつかの_mapプロパティが、実際のコンテンツが含まれていないようですか？

class ContentContainer extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          value: '',
          editorState: EditorState.createEmpty()
        };
        this.onChange = (editorState) => this.setState({editorState});
        this.createContent = this.createContent.bind(this);
      }

      createContent() {
        console.log(this.state.editorState.getCurrentContent());
      }

      render() {
        const {editorState} = this.state;
        const { content } = this.props;
        return (
          <Template>
            <br /><br /><br />
            <ContentList content={content} />
            <div className="content__editor">
              <Editor editorState={editorState} onChange={this.onChange} ref="content"/>
            </div>
            <FormButton text="Create" onClick={this.createContent.bind(this)} />
          </Template>
        );
      }
    }
javascriptreactjsdraftjs
16
Ewan Valentine

HTMLのみを生成する読み取り専用属性があります。

<Editor editorState={editorState} readOnly/>
11
farincz

ユアン。私もDraft.jsで遊んでいて、同じ問題に遭遇しました。実際、Victorは優れたソリューションを提供しました。

ここに私が見つけた2つのライブラリがあります。ビクターが言及したものは、GitHubでより多くの星を獲得しています。

https://github.com/sstur/draft-js-export-html

https://github.com/rkpasia/draft-js-exporter

外部ライブラリを使用せずにコンテンツを（JSON形式で）印刷する方法があることを付け加えます。データ変換セッションで文書化されています。

「convertToRaw」関数を使用してユーザー入力を印刷する方法は次のとおりです

console.log(convertToRaw(yourEditorContentState.getCurrentContent()));

次のように記述して、必ずDraft.jsからconvertToRaw関数をインポートしてください。

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

これは、Draft.jsがリッチテキストデータを表す方法という名前のrajaraodvによって書かれた素晴らしいブログです。データ変換について詳しく説明しました。

10
Jun Yin

コードに別のライブラリを追加したくない場合、@ farinczのアプローチはうまく機能します。

<Editor editorState={this.state.editorState} readOnly/>

エディターの状態はストレージレイヤーに直接保存でき、DOMにレンダリングするときに簡単に利用でき、編集に役立ちます。

テキストをクリックすると、編集可能にしたり、そのクリックを編集ボタンでバインドしたりできます。クリックを「エディター」コンポーネントに直接バインドすることはできませんが、「エディター」を含むラッパーでクリックすることはできます。

<div className="editor" onClick={this.editContent.bind(this)}>
  <Editor
    editorState={this.state.editorState}
    onChange={this.onChange}
    handleKeyCommand={this.handleKeyCommand}
    readOnly={this.state.edit}
  />
</div>

状態に 'edit'をtrueとして追加し、readOnlyがtrueであることを確認します（混乱している場合は、状態の 'edit'という名前をより明確にすることができます）。

this.state = {
 editorState: EditorState.createEmpty(), 
 edit: true
};

最後に、クリック時に「編集」の値をfalseに変更します

editContent() {
  this.setState({
    edit: false
  })
}
2
Paritosh Pundir

私がやった方法は：

EditorStateをhtml文字列editorState.toString('html')として保存し、出力を表示するときに<div className="content__editor" dangerouslySetInnerHTML={{__html: this.state.editorState}}>

これは、HTMLマークアップをあまり追加せずに単にdraft-jsのコンテンツを出力するだけで、ステートレス機能コンポーネントで行うのと同じように小道具として渡す場合に非常に便利です。

また、Reactのガイドラインに従って、dangerouslySetInnerHTMLに対するXSS攻撃を防ぎます

https://reactjs.org/docs/dom-elements.html

0
carkod