React 版本的真开箱即用的富文本编辑器
这篇文章推荐的react 版的富文本编辑器名字叫做wysiwyg,第一时间你可能觉得这个名字起的很烂,很难记,但是当你知道它的全称后就很好记了,全称为 What you see is what you get(所见即所得)。这个富文本编辑器是偶然在掘金上看到的,宣传上主打开箱即用,在用过后,确实基本能做到开箱即用,基本下载后,不需要进行什么配置。
import React, { Component } from 'react'
import { EditorState, convertToRaw } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
export default class RichTextEditor extends Component {
state = {
editorState: EditorState.createEmpty(), //构建一个初始化状态的编辑器 + 内容
}
onEditorStateChange = (editorState) => {
this.setState({
editorState,
});
};
//在父组件中通过ref调用该方法获得转义之后的带html标签的文字
getRichText=()=>{
return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())) //返回转化为html文本的文本信息
}
render() {
const { editorState } = this.state;
return (
<div>
<Editor
editorState={editorState}
// wrapperClassName="demo-wrapper" //最外侧容器类名
// editorClassName="demo-editor" //编辑区域类名
onEditorStateChange={this.onEditorStateChange}
editorStyle={{border: '1px solid slategrey',paddingLeft:'10px',lineHeight:'10px',minHeight:'200px'}}
/>
{/* <textarea
disabled
value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
/> */}
</div>
);
}
}
父组件中调用:
//创建ref
richTextEditor = React.createRef();
//需要时使用
let richText = this.richTextEditor.current.getRichText();
//renderf()方法中引用组件
<RichTextEditor ref={this.richTextEditor}/>