如何从React ContentEditable中提取没有HTML实体编码的文本？

问题描述

我有这个基于react-contenteditable的textArea。当用户写东西时

例如“ A＆B”，onChange事件处理程序中的 e.target.value; 会将其返回为“ A＆B”。 如何将其提取为与原始文本相同？

@H_404_11@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}
        />
    );
}