nextjs中使用braft-editor

1. 依赖

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

2. 将编辑器简单封装成组件

   // 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 (
         <BraftEditor value={this.state.editorState} onChange={this.handleChange}/>
       )
     }
   
     handleChange = (editorState) => {
       this.setState({ editorState })
     }
   
   }
   

3. 在页面中使用

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

   // pages/pageDemo.jsx
   import dynamic from 'next/dynamic'
   
   export default () => {
       const Editor = dynamic(() => import ('../components/Editor'), { ssr: false })
       return (
           <Editor/>
       )
   }