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;
        }

 

上一篇:案例分析: SAP BRF+ rule不工作的原因


下一篇:2018-Guillaume-Interactive Generation of Time-evolving, Snow-Covered Landscapes with Avalanches