Contenteditable, ::before 选择器样式和光标位置问题

Question

使用 contenteditable div 区域时，我遇到问题（目前仅在 Chrome 中测试过），当 CSS伪选择器::before用于在"tag".

之前添加内容

用例是此技术用于 display/style 内容编辑器中的自定义标签。每个标签都有索引，该索引显示在标签文本的左侧。

独立示例：http://codepen.io/TheFoot/pen/pydqQb

提前致谢..

编辑：正如@Sonny 指出的那样，如果嵌入标签是 display: block，问题就会消失，但这打破了 highlight/style 内联文本部分的需要。

Answer 1

我认为这里的问题是可满足的 div 是 inline-block。 contenteditable 应该只应用于块级元素（不包括标题）。

A guideline a couple of people have mentioned is that only block-level elements should be made contenteditable. However, the Mozilla Developer Network lists the heading elements h1 through to h6 as block-level elements, and making a heading element contenteditable is buggy in Firefox4 and can crash the page in Chrome5.

您可以在此处阅读此答案中的更多信息： Which elements can be safely made contenteditable?

Answer 2

听起来像是一只小绿虫让你发疯是吧？反正。我想你是通过 javascript 插入标签的，所以你一定有某种功能？一种快速而肮脏的解决方案可能是在标签打开之前将一个不可见的字符添加到该函数中。例如

<div class="tag" data-idx="6">&#x2063;maturity...</div>

或者您可以只复制并粘贴实际字符（您可以在此处的这些箭头之间找到：

--->⁣<---

因为它是不可见的，所以它可以准确地模拟您所需要的。

[编辑：]

如果你想重新附加不可见字符以防用户删除它。 :)

$('.editor').keyup(function (e) { 
    if( e.which == 8 ) {
         $('.tag')
            .filter( (i,v) => { return $(v).text().match(/^⁣/) == null })
            .prepend("⁣")
    }
})

http://codepen.io/anon/pen/wddoBN

Contenteditable, ::before 选择器样式和光标位置问题

Contenteditable, ::before selector styling and cursor position issue

html

css

cursor

contenteditable