Question

我有一个可编辑的div。该div的内容如下所示：那样：

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

（标签不可见，它们用于造型）如果将文本光标设置在“新”前面，一切都很好。但是如果将文本光标设置在“new”后面，则光标位于＆lt; ins＆gt; -tag和新输入的文本也在标记内：

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中解释得好。在这篇文章中有一个黑客答案（https://stackoverflow.com/a/7522910/1125465），但我真的不同意。这只是一个错误，可能会在下一版本的浏览器中修复。

接下来我跟着这个链接（HTML contenteditable with non-editable islands），我没有得到好消息。没有办法阻止ins标签编辑这么简单。首先要注意一点：

如果这不是附加功能，您必须确保它能够正常工作。正如您编写的不允许用户在-tag 内写字，所有选项：

在几乎每个浏览器中工作......
使用小错误...
工作，但，如果有人......

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

在服务器端验证（并显示通知当然有问题）后，它将成为附加功能。因此，我们应该尽我们所能，使其发挥作用（但现在没有义务）。

NICE LECTURE：） 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);

使此范围可编辑，只有此范围可编辑（不是块容器）。这就是全部。解决方案简单，清洁，效率更高，几乎100％安全。还不错......

使用javascript hacks时的其他安全性

如果您需要使用javascript完全完成（也许某人有想法如何？），为了完全安全，我建议另外这样的事情：

将data-noneditable-id =“id”添加到主块可编辑容器内的每个不可编辑元素。现在每个不可编辑的元素都有自己唯一的id（可以使用jQuery来完成，例如使用selector $（“div＃editable ins”））。
运行一个javascript，它将运行所有具有“data-noneditable-id”属性的对象，并将其innerHTML保存在数组中（例如：1 =＆gt;'new'，2 =＆gt;'added'，3 =＆gt;'插入'，...）。
现在，如果有人编辑其中任何一个，您可以轻松修复它们。

PS。这也应该有点帮助...（https://stackoverflow.com/a/4979828/1125465）。

希望它有所帮助！最好的问候。

可编辑的div：text-cursor在标签内设置

1 个答案: