javascript - 可编辑分区 : text-cursor gets set inside a tag

Question

我有一个可编辑的 div。该 div 的内容看起来例如像那样:

This is a <ins>new</ins> chapter.

(标签不可见，用于样式)如果您将文本光标设置在"new"前面，一切都很好。但是，如果将文本光标设置在“new”后面，则光标位于 标签内，并且新键入的文本也在标签内:

This is a <ins>new and very interesting</ins> chapter.

但它应该是这样的:

This is a <ins>new</ins> and very interesting chapter.

如何将文本光标设置在标签后面并防止在标签内写入新文本？

Answer 1

好的。第一个想法是制作

<ins contenteditable="false">new</ins>

在 contenteditable="true"元素内。进一步阅读 ( contenteditable=false inside contenteditable=true block is still editable in IE8) 表明这在 IE 中并不总是被解释为好的。在这篇文章中有一个 hack answer ( https://stackoverflow.com/a/7522910/1125465 ) 但我真的不同意。这只是一个错误，可能会在下一版本的浏览器中修复。

接下来我点击了这个链接 ( HTML contenteditable with non-editable islands )，但我还没有得到好消息。没有办法这么简单的阻止ins标签的编辑。首先要注意一点:

如果这不是附加功能，您必须确保它按预期工作。 正如您所写的不允许用户在 -tag 内写入 , 所以所有选项:

• 在几乎所有浏览器中工作...
• 处理一个小错误...
• 工作但是如果有人...

必须拒绝。因此，如果有人关闭 javascript，它也应该可以工作。在这种情况下，我得出了第一个结论(一如既往):服务器端验证必须完成。这将防止用户破坏您的数据库并做他不能做的事情。

在服务器端验证(当然如果出现问题则显示通知)后，它将成为附加功能。所以我们现在应该尽我们所能，让它发挥作用(但现在没有义务)。

不错的讲座 :) https://stackoverflow.com/a/7232871/1125465 http://jsfiddle.net/X6Ab8/

**解决方案**

我提议类似...我知道这听起来有点像过去使用百万标签的日子，但实际上这会奏效而且会很棒。在 ins 元素之间创建一个额外的 span 元素(例如使用 php:

$text = '<span contenteditable="true">'.$text.'</span>';
str_replace('<ins>', '</span><ins>', $text);
str_replace('</ins>', '</ins><span contenteditable="true">', $text);

使这个跨度可编辑，并且只有这个跨度可编辑(不是 block 容器)。就是这样。解决方案简单、干净、高效且几乎 100% 安全。很好...

使用 javascript hack 时的额外安全

如果您需要完全使用 javascript 来完成(也许有人知道怎么做？)，为了完全安全，我建议另外这样的事情:

1. 将 data-noneditable-id="id"添加到主 block 可编辑容器内的每个 不可编辑 元素。现在每个不可编辑的元素都有自己的唯一 ID(可以使用 jQuery 来完成，例如使用选择器 $("div#editable ins"))。
2. 运行一个 javascript，它将遍历所有具有属性“data-noneditable-id”的对象，并将它们的 innerHTML 保存在数组中(例如:1 => 'new', 2=> 'added', 3=> '插入'，...)。
3. 现在，如果有人编辑了其中的任何一个，您可以轻松修复它们。

附言。这也应该有点帮助......(https://stackoverflow.com/a/4979828/1125465)。

希望对您有所帮助!最好的问候。