我现在做的是一个类似于HTML编辑器的工具。在 contenteditable=true 元素内,包含多个 contenteditable=false 的元素,两个不可编辑元素之间没有文本节点,这时候点击两个不可编辑元素之间,无法接收光标。用左右方向键移动光标,这两个不可编辑元素之间也无法接收光标。
CSS 代码:
.content-normal{
height: 200px;
border: 1px solid #ccc;
white-space: pre-wrap;
font-size: 14px;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}
.tag {
display: inline-block;
font-size: 12px;
margin-left: 1px;
margin-right: 1px;
padding-left: 4px;
padding-right: 4px;
border-radius: 2px;
color: #ffffff;
background-color: #800080;
font-family: apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.tag-open {
border-top-right-radius: 1em;
border-bottom-right-radius: 1em;
}
.tag-close {
border-top-left-radius: 1em;
border-bottom-left-radius: 1em;
}
HMML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content-normal" contenteditable="true">Total contract price (capital): <span contenteditable="false" class="tag tag-auto-close" tag-uid="1115_58_PlaceholderTag" title="<shape name="Line 5">">58</span><span class="style bold underline" style-uid="1115_59" style="font-family:楷体_GB2312;"><span contenteditable="false" class="tag tag-open" tag-uid="1115_59_StartTag" title="<cf font=楷体_GB2312 bold=True underline=single>">59</span><span contenteditable="false" class="tag tag-close" tag-uid="1115_59_EndTag" title="</cf>">59</span></span>RMB.</div>
</body>
</html>
如何修复它呢?
我也遇到了,加了空格才显示