contenteditable属性，让div也可编辑

最初我想要一个文本框，所以使用了UI库的textArea组件。后来产品加需求，说需要在文本框里展示图片。

 

额。文本框怎么展示图片呢？textArea展示不了，但可以用其他方式解决。

 

想到两种方式，第一种是使用富文本，第二种是使用contenteditable属性，让普通元素也能够编辑。

 

使用第一种方式的时候，找了许多富文本编辑器，有的是版本太老，与我们的hooks不兼容,有的是API和使用方法不全。后面找到一个wangeditor，相较其他的编辑器来说，这个编辑器的版本一直在更新，能兼容我们的项目，API也相对丰富，就是它了。完美解决文本框可以展示图片的问题。

 

到项目打包的时候，失败了。说是插件超过500KB（这个插件大小2MB~3MB），不允许使用。好了，原本是想修改体积限制，但是因为体积限制不被允许改动。所以就换成第二种方法。

 

正题开始：给元素加上contenteditable属性，元素就会变成可编辑状态，而value是后台返回的值，是一个标签字符串，所以需要dangerouslySetInnerHTML属性来解析。

 

Html部分：

　　　　　　　　　　　　<div
                      contenteditable="true"
                      className="myEditor"
　　　　　　　　　　　　　placeholder='请输入'
                    >
                      {value && (
                        <div style={{ color: '#fff' }} dangerouslySetInnerHTML={{ __html: value }}></div>
                      )}
                    </div>

Css部分：

.myEditor:empty::before {
          content: attr(placeholder); // 模仿文本框设置placeholder
          color: #74778A;
          transform: translateY(-4rpx);
        }

        .myEditor:focus {
          content: none;
        }