草稿JS保存和呈现或显示内容 [英] Draft js saving and rendering or displaying content

问题描述

问题是:如何将草稿js内容另存为html，然后在页面上呈现该内容(此时为html字符串).

The question is: How do I save draft-js content as html and later render the content (which is a html string at this point) on the page.

应该分享我所学到的知识.

Thought I'd share what I've learnt.

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

Please find in the solution one approach to saving and rendering content using draft.js.

还请发布您自己的解决方案，以便我们所有人都可以学习.

Also please post your own solutions so that we can all learn.

推荐答案

在无休止地搜索和搜索互联网以了解如何在我们正在构建的博客中使用draft.js以后，我想我将分享我所学到的东西. Draft.js令人赞叹，但由于没有官方渲染解决方案，因此保存后如何渲染数据尚不十分清楚.

after endless searching and scouring the internet for how to use draft.js for a blog we are building, i thought I would share what I learnt. Draft.js is AMAZING but its not very clear how to render the data after saving since there is no official render solution.

这是一个有关如何执行此操作的抽象演示.

Here is an abstract demo on how one could do this.

插件用户为draft-js，draft-convert，react-render-html.使用的数据库为mongo

Plugins user were draft-js, draft-convert, react-render-html. Database used was 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脚本标签已转义.

Note: Html script tags have been escaped.

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

While the solution above might not be perfect for every use case, I hope someone can find it useful for basic usage.

免责声明:对于因使用上述代码而造成的任何损害或伤害，我不承担任何责任.

Disclaimer: I am not liable for any damage, or harm caused through the use of the above code.

这篇关于草稿JS保存和呈现或显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！