Javascript 草稿js保存和呈现或显示内容

问题是：如何将草稿js内容保存为html，然后在页面上呈现内容（此时为html字符串）

我想分享我学到的东西

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

---

另外，请发布您自己的解决方案，以便我们大家都能学习。

在互联网上不断搜索和搜索如何使用draft.js创建我们的博客后，我想我会分享我学到的东西。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}来自'React'；
进口{
块
编辑
createEditorState
}从"中稿",；
从“草稿转换”导入{convertToHTML}；
类PostEditor扩展组件{
建造师（道具）{
超级（道具）；
此.state={
stateEditor:createEditorState（）
}
this.onChange=（editorState）=>{
this.setState（{editorState}）；
};
this.publishPost=this.publishPost.bind（this）；
}
publishPost（）{
//将状态转换为html
const html=convertToHTML（this.state.editorState.getCurrentContent（））；
常数桩={
内容：html，
createdAt:新日期（）
//更多的东西。。。
}
//将数据发布到mongo存储。
}
render（）{
//从组件状态获取编辑器状态
const{editorState}=this.state；
返回(
提交
)
}
}

发布帖子：

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

import React，{Component}来自'React'；
从“react render html”导入renderHTML；
类PostArticle扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文本：空
}
}
组件willmount（）{
//从数据库中获取数据
const post=getMyBlogPostFunction（）；//用自己的逻辑替换getMyBlogPostFunction以获取数据
this.setState（{text:post.content}）
}
render（）{
返回(
{renderHTML（this.state.text）}
)
}
}

注意：Html脚本标记已转义

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

---

免责声明：对于使用上述代码造成的任何损坏或伤害，我不承担任何责任。

演示此过程有一个很好的例子。这是一本书

实际上，您要查找的代码段如下所示：

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

const sampleMarkup=
'粗体文本，斜体文本
'+
'';
const blocksFromHTML=convertFromHTML（sampleMarkup）；
const state=ContentState.createFromBlockArray（blocksFromHTML）；
此.state={
editorState:editorState.createWithContent（状态），
};

---

该实用程序函数名为

convertFromHTML

文档链接已断开。谢谢@CullenBond–我已更新了指向的链接。感谢您指出这一点。还有一个替代软件包，让您可以从原始状态渲染自定义React组件：