react-富文本编辑框遇到的问题 react-富文本编辑框遇到的问题

项目需求实现一个划词功能，由于textarea的局限性，考虑到使用div来实现，通过设置div的contentEditable来模拟文本框。实现代码如下：

class ContentEditable extends Component { constructor(props) { super(props) }shouldComponentUpdate(nextProps) { return nextProps.html !== this.elem['innerText'] }onChange = (e) => { const value= https://www.it610.com/article/this.elem['innerText'] this.props.onChange(e, value) }render() { const { html, contentEditable, ...props } = this.props return ( { this.elem = elem }} dangerouslySetInnerHTML={{ __html: html }} contentEditable={contentEditable} onInput={ this.onChange } /> ) } }e.g. ... handleEditTextChange = (e, value) => { this.setState({ title: value }) }

重点注意该方法

shouldComponentUpdate(nextProps) {
return nextProps.html !== this.elem['innerText']
}
通过shouldComponentUpdate控制组件的渲染，从而解决不用每次输入都重新渲染组件，导致光标回位到初始状态的问题。

【react-富文本编辑框遇到的问题】需要普及的关于dangerouslySetInnerHTML需要了解的
https://www.cnblogs.com/daowangzhizhu-pt/p/6385088.html
关于contentEditable属性可参看张鑫旭大神的两篇文章
http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/
http://www.zhangxinxu.com/wordpress/2010/12/div-textarea-height-auto/