javascript - 如何设置/修改 contenteditable div 的值？

Question

我有的：

• 内容可编辑的 div

• 反应

我想要的是：

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

标签： javascripthtmlreactjscontenteditable

Answer 1

Contenteditable 是一件棘手的事情，所以我建议你使用react-contenteditable来防止插入符号跳转，再加上一个简单的替换（你可以使用任何你想要的东西，即 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