javascript - Draft js 保存和渲染或显示内容

Question

问题是:如何将 draft-js 内容保存为 html，然后在页面上呈现内容(此时是 html 字符串)。

我想分享我学到的东西。

请在解决方案中找到一种使用 draft.js 保存和呈现内容的方法。

也请把自己的解决方法贴出来，大家一起学习。

Answer 1

在互联网上无休止地搜索和搜索如何将 draft.js 用于我们正在构建的博客之后，我想我应该分享我学到的东西。 Draft.js 很棒，但由于没有官方的渲染解决方案，所以保存后如何渲染数据并不是很清楚。

这是一个关于如何做到这一点的抽象演示。

插件用户是draft-js、draft-convert、react-render-html。使用的数据库是 mongo

创建帖子:

import React, {Component} from 'react';
import {
    Block,
    Editor,
    createEditorState
} from 'medium-draft';
import { convertToHTML } from 'draft-convert';

class PostEditor extends Component {
    constructor(props) {
        super(props);

        this.state = {
            stateEditor: createEditorState()
        }

        this.onChange = (editorState) => {
            this.setState({ editorState });
        };

        this.publishPost = this.publishPost.bind(this);
    }
    publishPost() {
        // turn the state to html
        const html = convertToHTML(this.state.editorState.getCurrentContent());

        const post = {
            content: html,
            createdAt: new Date()
            // more stuff...
        }

        // post the data to you mongo storage.
    }
    render() {
        // get the editorState from the component State
        const { editorState } = this.state;
        return (
            <div>
                <Editor
                    ref="editor"
                    editorState={editorState}
                    placeholder="Write your blog post..."
                    onChange={this.onChange} />
                <div>
                    <button onClick={this.publishPost} type="button">Submit</button>
                </div>
            </div>
        )
    }
}

渲染帖子:

import React, { Component } from 'react';
import renderHTML from 'react-render-html';

class PostArticle extends Component {
    constructor(props) {
        super(props);

        this.state = {
            text: null
        }
    }
    componentWillMount() {
        // get the data from the database
        const post = getMyBlogPostFunction(); // replace getMyBlogPostFunction with own logic to fetch data
        this.setState({ text: post.content })
    }
    render() {
        return (
            <div className='article-container'>
                {renderHTML(this.state.text)}
            </div>
        )
    }
}

注意:Html 脚本标签已被转义。

虽然上述解决方案可能并不适合所有用例，但我希望有人能发现它对基本用法有用。

免责声明:对于因使用上述代码而造成的任何损害或损害，我概不负责。