Contenteditable也删除并编辑字段中的图标

Question

我在我的表中使用contenteditable，并且使用Javascript创建的每个td都设置为contenteditable="true"。

问题是我想在“TOTAL”字段中添加一个ICON，并允许用户更改数据，但是即使允许他们编辑/删除图标也是满意的！

我希望图标留在那里而不是编辑或更改。有没有办法使用JavaScript或CSS在可编辑的td中修复范围或图标？

例：

<table>
<thead>
  <tr>
    <th>TOTAL</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td contenteditable="true"><span>$</span>887</td>
  </tr>
</tbody>

Answer 1

将contenteditable移动到另一个不包含图像的范围：

<table>
<thead>
  <tr>
    <th>TOTAL</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>$<span contenteditable="true">887</span></td>
  </tr>
</tbody>