30

私は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>
        );
      }
    }
4

5 に答える 5

48

私が使用した便利なライブラリ、draft-js-export-htmlがあります。ライブラリをインポートすると、関数を呼び出すと HTML が表示されるはずですstateToHTML。

console.log(stateToHTML(this.state.editorState.getCurrentContent()));

私はReactにかなり慣れていないので、これがうまくいくことを願っています。ボンネットの下を調べたcontentStateところ、ライブラリを使用してエンティティを解析することをより魅力的にするかなりのことが進行中です。

著者である sstur は、私が彼のライブラリについて学んだところで、接線関連の質問に答えます。

于 2016-04-28T03:52:16.497 に答える
13

イワン。私も 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';

これは rajaraodv によって書かれたHow Draft.js Represents Rich Text Dataという名前の素晴らしいブログです。データ変換について詳しく説明しました。

于 2016-10-05T19:06:06.177 に答える
11

HTML のみを生成するための readonly 属性があります。

<Editor editorState={editorState} readOnly/>
于 2016-09-29T08:59:07.147 に答える