Draft js saving and rendering or displaying content

问题

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.

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.

回答1:

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.

Plugins user were draft-js, draft-convert, react-render-html. Database used was mongo

create post:

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>
        )
    }
}

render the post:

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>
        )
    }
}

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.

回答2:

There is a great example in the documentation demonstrating this process. Here is a link to the source code on Github.

Essentially the code snippet you're looking for is this:

const sampleMarkup =
  '<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
  '<a href="http://www.facebook.com">Example link</a>';

const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(blocksFromHTML);

this.state = {
  editorState: EditorState.createWithContent(state),
};

The utility function is called convertFromHTML

来源：https://stackoverflow.com/questions/41634473/draft-js-saving-and-rendering-or-displaying-content

标签

javascript

reactjs

meteor

blogs

draftjs