在 contenteditable div 中插入用 angular 方括号包围的文本？

Question

我有一个可编辑的内容 div，这是我的搜索框。我需要在 C 中添加堆栈跟踪，它的内存地址被 angular 大括号包围。当我在搜索框中插入此文本时，它被视为 html 标签。我应该如何避免这种情况？

我在 div 中粘贴的内容示例：

[<ffffffff810733ff>] do_exit+0x15f/0x870
[<ffffffff8109dc25>] ? sched_clock_local+0x25/0x90
[<ffffffff81088792>] ? __dequeue_signal+0x102/0x200
[<ffffffff81073b68>] do_group_exit+0x58/0xd0

粘贴后的div元素。

<div id="searchBox" 
contenteditable="true">do_exit+0x15f/0x870[<ffffffff8109dc25>] ?
sched_clock_local+0x25/0x90[<ffffffff81088792>] ?
__dequeue_signal+0x102/0x200[<ffffffff81073b68>] do_group_exit+0x58/0xd0
</div>

Answer 1

部分浏览器支持contenteditable="plaintext-only"，解决了您的问题。但是，不支持此功能的浏览器甚至可能无法使 div contenteditable。

示例：

<div contenteditable="plaintext-only"></div>

解决此问题的更好方法可能是使用本机 <input> 或 <textarea> — 它们应该会为您处理。

Answer 2

属性 contenteditable + 非官方值 "plaintext-only" 已回答。

此外，如果你 copy/paste 这些，括号将变成 html 个实体。

如果这已经在您的代码中，那么您应该在服务器端处理它。

无论如何这是一个额外的选项，如果你仍然想在这段代码周围使用 html 标签，你可以尝试使用旧标签 <xmp>:

W3C 对它的评价：https://www.w3.org/wiki/HTML/Elements/xmp ... 请自行使用。

<div id="searchBox" 
contenteditable="true"><xmp>do_exit+0x15f/0x870[<ffffffff8109dc25>] ?
sched_clock_local+0x25/0x90[<ffffffff81088792>] ?
__dequeue_signal+0x102/0x200[<ffffffff81073b68>] do_group_exit+0x58/0xd0
  </xmp></div>

正确的方法是：（在发送到浏览器或保存之前使用 htmlentities() 或类似方法处理括号）。

[contenteditable] {
  white-space:pre;
  }

<div contenteditable="true">do_exit+0x15f/0x870[&lt;ffffffff8109dc25&gt;] ?
  sched_clock_local+0x25/0x90[&lt;ffffffff81088792&gt;] ? 
  __dequeue_signal+0x102/0x200[ffffffff81073b68&gt;] do_group_exit+0x58/0xd0</div>

在 contenteditable div 中插入用 angular 方括号包围的文本？

Insert text surrounded by angular brackets inside contenteditable div?

html

css

contenteditable