Html 可编辑内容-聚焦并单击问题

我有一个可编辑的内容div，用户可以向其中添加元素。用户有一个侧菜单，其中包含可通过单击每个标记添加的所有可用标记。也可以在每个标记之前/之后键入文本

每个标记元素都有

contenteditable=“false”

，例如：

。关键字项{
背景色：#EEFDE5；
字体大小：粗体；
边界半径：20px；
边界：未设置；
光标：指针；
保证金：0.25雷姆0.25雷姆；
}
img{
左：2%；
}
跨度{
右：2%；
}

布拉
布拉布拉2
废话

使用

显示：内联块和
空白：nowrap

编辑：
删除标签之间的空间


。关键字项{
背景色：#EEFDE5；
字体大小：粗体；
边界半径：20px；
边界：未设置；
光标：指针；
保证金：0.1rem；
空白：nowrap；
显示：内联块；
}
img{
左：2%；
}
跨度{
右：2%；
}

布拉
布拉布拉2
废话
你能用按钮代替标签/输入吗？它似乎解决了鼠标选择问题。
在contenteditable div的开头添加空标记可以删除第一个标记


。关键字项{
边界：无；
背景：无；
字体：继承；
背景色：#EEFDE5；
字体大小：粗体；
边界半径：20px；
光标：指针；
填充：0.5雷姆；
保证金：0.25雷姆；
}

布拉
布拉布拉2
废话
您可以使用以下工具完成您想要的任务：


#表达式文本区域{
左侧填充：2px；
显示器：flex；
}
.关键字项目{
背景色：#EEFDE5；
字体大小：粗体；
边界半径：20px；
边界：未设置；
光标：指针；
保证金：0.25雷姆0.25雷姆；
空白：nowrap；
}
img{
左：2%；
}
跨度{
右：2%；
}

布拉
布拉布拉2
废话
通过在元素之间添加空间来解决第一个问题，这不是一个理想的行为。它不能解决第二个问题whatshover@noamyg您需要删除标签之间的空格。请检查更新的代码段。现在，项目之间存在巨大的差距，使用箭头键导航时会失去焦点。谢谢。我想避免元素之间的额外空间。用户应该能够在项目之间导航并用一次按键删除它们。另外，光标有一种奇怪的行为（当你删除空白时，光标在项目内移动），你能解释一下你的用例吗？contenteditable div中允许哪些类型的元素/内容？感谢patrick，它在UI/UX透视下工作得非常好-但是我必须使用隐藏的
输入来解释标记的值（id，从服务器获取）。有什么建议吗？可以使用自定义属性吗？类似于“data-*=”？您也应该能够使隐藏的输入工作，我只是为了更简单的标记而删除了它。再次感谢，我正在研究这个问题。