最初我想要一个文本框,所以使用了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; }