肥宅之家  ⁝︎  登录
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;
这是我在第一种方法搞完拉屎的时候突然想到的,一试验果然可行,简单太多了。
这个方法在中英文网站都没有搜到,可能是首次发现。
C
脑浆物语 霖博客 设计笔记 依萌萌 灰常记忆 拔剑舞 云破天开 秋日 Yoooo 幻焕 归程 笨猫 云上萝莉
🍁 STATUS TOS