Question

我所拥有的：

contentEditable div
反应

我想要什么：

给出一个特定的文本输入（在contenteditable div中），我想用图像替换文本。例如，如果有人键入“鸡”然后输入一个空格，那么我会假设将文本的“鸡”部分替换为鸡表情符号。

Answer 1

Contenteditable是一件棘手的事情，所以我建议您使用react-contenteditable到prevent caret jumps，加上一个简单的替换方法（您可以使用所需的任何值，例如regexp whatelse）可以达到目的：

import React from 'react';
import ReactDOM from 'react-dom'
import ContentEditable from 'react-contenteditable'

class MyComponent extends React.Component {
  state = { html: "Hello world" };

  handleChange = evt => {
    let html = evt.target.value

    // you could take any replacement method you want
    if (html.slice(-11, html.length) === 'chicken<br>') {
      html = `${html.slice(0, -11)} ❤ <br>`
    }

    this.setState({ html });
  };

  render = () => {
    return <ContentEditable
      html={this.state.html} // innerHTML of the editable div
      disabled={false}       // use true to disable edition
      onChange={this.handleChange} // handle innerHTML change
    />
  };
};

您可以在https://codesandbox.io/s/2x00nwnx6p

上玩它

如何设置/修改内容可编辑div的值？

1 个答案: