[英]How to extract text without HTML Entities encoding from React ContentEditable?
I have this textArea based on react react-contenteditable.我有这个基于 react-contenteditable 的 textArea。 When a user writes something
当用户写东西时
for example "A & B", the e.target.value;例如“A & B”, e.target.value; in onChange event handler return it as "A & amp; B".
在 onChange 事件处理程序中将其返回为“A & amp; B”。 How can I extract it the same as the original text?
如何提取与原文相同的内容?
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}
/>
);
}
This package is meant to handle HTML (for rich text) thus the value returned is HTML.这个包是为了处理 HTML(对于富文本),因此返回的值是 HTML。 But if you want the parsed text (which will lack the rich text) you can directly read the text from the
contenteditable
div.但是,如果您想要解析的文本(将缺少富文本),您可以直接从
contenteditable
div 中读取文本。
The package provides a nice interface to forward a ref to the contenteditable
div with the prop innerRef
.该包提供了一个很好的接口,可以使用
innerRef
将 ref 转发到contenteditable
div。 You can then access the parsed text any time with innerRef.current.innerText
.然后,您可以随时使用
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}
/>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.