contenteditable元素内html标签的编辑问题处理 这套网站系统基本已经报废,最近在写新的。有个想法就是做出一套极简的模块化编辑器,可以在文字中间插入图片、音频、视频等元素,而不是像现在这样文字和附件分离。 我理想的状态是“没有后台”,内容直接在前台就可以编辑。因此使用了html5中的contenteditable属性,一个js命令便可让div直接切换为可编辑状态。遇到的坑是contenteditable元素内的html标签周围未出现光标,无法在同一行内进行正常的删除等操作。 目前研究出两种解决方案: 1.把附件行切割为三部分,前后各一个空div,中间是附件元素。 <div style="font-size:0;"> <div contenteditable="true" style="display:inline-block;font-size:14px;width:20%;"></div> <div style="font-size:14px;display:inline-block;width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;user-select:none;text-align:center;background:#EEE;">download</div> <div contenteditable="true" style="display:inline-block;font-size:14px;padding-left:20%;"></div> </div> 2.直接在html标签两侧加入0宽度空格&#8203; 这是我在第一种方法搞完拉屎的时候突然想到的,一试验果然可行,简单太多了。 这个方法在中英文网站都没有搜到,可能是首次发现。