如何解决如何从React ContentEditable中提取没有HTML实体编码的文本?
我有这个基于react-contenteditable的textArea。当用户写东西时
例如“ A&B”,onChange事件处理程序中的 e.target.value; 会将其返回为“ A&B”。 如何将其提取为与原始文本相同?
onChange(e) {
const val = e.target.value;
this.setState({
value: val
});
return this.props.onChange(e,this.props.value,val);
}
onPaste(e) {
e.preventDefault();
const text = e.clipboardData.getData("text/plain");
document.execCommand("insertText",false,text);
return true;
}
render() {
return (
<ContentEditable
className={this.state.className}
html={this.state.value}
placeholder={this.props.placeholder}
disabled={false}
onPaste={this.onPaste}
onBlur={::this.onBlur}
onFocus={::this.onFocus}
onChange={::this.onChange}
/>
);
}
解决方法
此软件包用于处理HTML(用于RTF),因此返回的值为HTML。但是,如果您要解析的文本(缺少富文本格式),则可以直接从contenteditable
div中读取文本。
该软件包提供了一个不错的接口,可将道具contenteditable
的引用转发到innerRef
div。然后,您随时可以使用innerRef.current.innerText
访问已解析的文本。
constructor() {
this.editableRef = React.createRef(null);
}
onChange(e) {
console.log(this.editableRef.current.innerText);
const val = e.target.value;
this.setState({ value: val });
return this.props.onChange(e,this.props.value,val);
}
render() {
return (
<ContentEditable
innerRef={this.editableRef}
html={this.state.value}
onChange={::this.onChange}
/>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。