nextjs中使用braft-editor

依赖

npm install braft-editor --save
# or
yarn add braft-editor

将编辑器简单封装成组件

// components/Editor.jsx

import 'braft-editor/dist/index.css'
import React from 'react'
import BraftEditor from 'braft-editor'

export default class Editor extends React.Component {

  state = {
    editorState: BraftEditor.createEditorState(null)
  }

  render () {
    return (
      
    )
  }

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

}

在页面中使用

引入组件需要借助next/dynamic来防止Editor组件以ssr的方式编译

// pages/pageDemo.jsx
import dynamic from 'next/dynamic'

export default () => {
    const Editor = dynamic(() => import ('../components/Editor'), { ssr: false })
    return (
        
    )
}