facebook推出的draft-js富文本编辑器并不是一个开箱可用的编辑器,如果我们按照github上面的配置引入的话,得到一个类似输入框的编辑器。
但是draft-js提供了一个 RichUtils函数库,里面提供了丰富的函数,让我们可以自己设计自己的编辑器。
在开发的过程中,如下,我按照官方的例子写了一个简单的编辑器
import React, { Component } from 'react'
import {Editor, EditorState, RichUtils} from 'draft-js';
export default class app extends Component {
constructor(props) {
super(props)
this.state = {
editorState: EditorState.createEmpty(),
styles : {
editor: {
border: '1px solid gray',
minHeight: '6em'
}
}
}
this.setEditor = (editor) => {
this.editor = editor
}
this.focusEditor = () => {
this.editor.focus()
};
this.onChange = (editorState) => this.setState({editorState});
this.toggleInlineStyle = this.toggleInlineStyle.bind(this);
}
componentDidMount() {
this.focusEditor();
}
toggleInlineStyle() {
this.onChange(
RichUtils.toggleCode(
this.state.editorState
)
);
}
render() {
const {editorState, styles} = this.state
return (
<div style={styles.editor} onClick={this.focusEditor} >
<div>
<span onClick={() => this.toggleInlineStyle()}>Bold</span>
</div>
<Editor
ref={this.setEditor}
editorState={editorState}
onChange={this.onChange}
/>
</div>
);
}
}
但是很遗憾,我点击加粗的时候它没有任何反应。后来查了一下,stackoverflow有人回答说,引入
Draft.css文件就可以了。但是我引入了之后发现还是不起作用。
最后我将代码段中的
focusEditor函数中的
this.editor.focus()函数删掉之后就可以了。
这是效果图:
这是修改后的代码:
import "draft-js/dist/Draft.css";
import React, { Component } from 'react'
import {Editor, EditorState, RichUtils} from 'draft-js';
export default class app extends Component {
constructor(props) {
super(props)
this.state = {
editorState: EditorState.createEmpty(),
styles : {
editor: {
border: '1px solid gray',
minHeight: '6em'
}
}
}
this.onChange = (editorState) => this.setState({editorState});
this.toggleInlineStyle = this.toggleInlineStyle.bind(this);
}
toggleInlineStyle() {
this.onChange(
RichUtils.toggleCode(
this.state.editorState
)
);
}
render() {
const {editorState, styles} = this.state
return (
<div style={styles.editor} onClick={this.focusEditor} >
<div>
<span onClick={() => this.toggleInlineStyle()}>Bold</span>
</div>
<Editor
editorState={editorState}
onChange={this.onChange}
/>
</div>
);
}
}
虽然不知道前一个版本的为什么不可以,也不知道为什么删掉那个函数之后就可以,但是好歹起作用了