node 6e96a5c6e1 feat: add default props of richeditor | 6 vuotta sitten | |
---|---|---|
build | 6 vuotta sitten | |
config | 6 vuotta sitten | |
lib | 6 vuotta sitten | |
public | 6 vuotta sitten | |
scripts | 6 vuotta sitten | |
src | 6 vuotta sitten | |
.gitignore | 6 vuotta sitten | |
README.md | 6 vuotta sitten | |
package.json | 6 vuotta sitten | |
yarn.lock | 6 vuotta sitten |
基于 braft-editor 和 react-mde 的富文本编辑器。
$ 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>
)
}
}