braft-editor使用

本文的示例代碼參考braft-editor

目錄

• DvaJS

• braft-editor

• 七牛雲

DvaJS

cnpm i -g dva-cli

dva -v
# dva-cli version 0.9.2

dva new braft-editor && cd braft-editor

cnpm i

braft-editor

cnpm i --save braft-editor

vim src/routes/IndexPage.js

import React from 'react'
// 引入編輯器組件
import BraftEditor from 'braft-editor'
// 引入編輯器樣式
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.Component {
    state = {
        // 創建一個空的editorState作爲初始值
        editorState: BraftEditor.createEditorState(null)
    }

    async componentDidMount() {
        // 假設此處從服務端獲取html格式的編輯器內容
        const htmlContent = 'Hello World!'
        // 使用BraftEditor.createEditorState將html字符串轉換爲編輯器需要的editorStat
        this.setState({
            editorState: BraftEditor.createEditorState(htmlContent)
        })
    }

    submitContent = async () => {
        // 在編輯器獲得焦點時按下ctrl+s會執行此方法
        // 編輯器內容提交到服務端之前，可直接調用editorState.toHTML()來獲取HTML格式的內容
        const htmlContent = this.state.editorState.toHTML()
        // const result = await saveEditorContent(htmlContent)
    }

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

    render() {
        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                />
            </div>
        )
    }
}

• 測試

cnpm start

瀏覽器打開http://localhost:8000

七牛雲

cnpm i --save qiniu-js

vim src/routes/IndexPage.js

import React from 'react'
import * as qiniu from 'qiniu-js'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.Component {
    state = {
        editorState: BraftEditor.createEditorState(null)
    }

    async componentDidMount() {
        const htmlContent = 'Hello World!'
        this.setState({
            editorState: BraftEditor.createEditorState(htmlContent)
        })
    }

    submitContent = async () => {
        // 在編輯器獲得焦點時按下ctrl+s會執行此方法
        // 編輯器內容提交到服務端之前，可直接調用editorState.toHTML()來獲取HTML格式的內容
        const htmlContent = this.state.editorState.toHTML()
        // const result = await saveEditorContent(htmlContent)
    }

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

    uploadFn = (param) => {
        const token = 'HhUn8qmWzyd2im3VicF18d32zFB14OL142IxJafU:Va2RRYOz2tQXYWVdoJ4dfU92U9c=:eyJzY29wZSI6InN0YXRpYy1pbWFnZSIsImRlYWRsaW5lIjoxNTQ0NDYyMTk1fQ=='
        const putExtra = {
        }
        const config = {
        }
        const observer = {
            next(res) {
                param.progress(res.total.percent)
            },
            error(err) {
                param.error({
                    msg: err.message
                })
            },
            complete(res) {
                param.success({
                    url: 'http://pjid0qjkn.bkt.clouddn.com/' + res.key
                })
            }
        }
        qiniu.upload(param.file, param.name, token, putExtra, config).subscribe(observer)
    }

    render() {
        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                    onSave={this.submitContent}
                    media={{ uploadFn: this.uploadFn }}
                />
            </div>
        )
    }
}

• 測試

cnpm start

瀏覽器打開http://localhost:8000上傳圖片文件

七牛雲存儲的上傳憑證在線生成

參考

• 可以用七牛嗎