editor

富文本及 Markdown 编辑器

基于 braft-editor 和 react-mde 的富文本编辑器。

install

$ npm install git+https://git.links123.net/node/editor.git --save

使用

import React from 'react'
import { RichEditor } from 'editor';

export default class RichEditor extends React.Component {

    state = {
        // 创建一个空的editorState作为初始值
        editorState: EditorState.createFrom('')
    }

    async componentDidMount () {
        // 假设此处从服务端获取html格式的编辑器内容
        // const htmlContent = await fetchEditorContent()
        const htmlContent = '<h1>ss</h1>'
        // 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
        this.setState({
            editorState: EditorState.createFrom(htmlContent)
        })
    }

    submitContent = async () => {
        // 在编辑器获得焦点时按下ctrl+s会执行此方法
        // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
        const htmlContent = this.state.editorState.toHTML()
        console.log('htmlContent: ', htmlContent)
        // const result = await saveEditorContent(htmlContent)
    }

    handleEditorChange = (editorState) => {
        this.setState({ editorState })
    }

    render () {

        const { editorState } = this.state
        return (
            <div>
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                />
            </div>
        )

    }

}