Einfügen von Text umgeben von eckigen Klammern in contenteditable div?

Question

Ich habe einen Inhalt editierbare Div, die meine Suchbox ist. Ich muss Stack-Trace in C hinzufügen, die Speicheradressen hat, die von eckigen Klammern umgeben sind. Wenn ich diesen Text in das Suchfeld einfüge, wird er als HTML-Tags betrachtet. Wie soll ich das vermeiden?

Ein Beispiel für die Inhalte, die ich innerhalb des div bin einfügen:

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

das div-Element nach dem Einfügen.

<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

Attribut contenteditable + inoffiziellen Wert "plaintext-only" bereits beantwortet.

Neben wenn Sie diese kopieren/einfügen, werden Klammern in HTML-Entities umgewandelt.

Wenn dies bereits in Ihrem Code ist, sollten Sie dies auf der Serverseite behandeln.

Auf jeden Fall ist hier eine zusätzliche Option, wenn Sie immer noch HTML-Tag verwenden, um dieses Stück Code möchten, können Sie einen Versuch zu einem alten Tag geben <xmp>:

Was sagt W3C daran: https://www.w3.org/wiki/HTML/Elements/xmp ... Verwenden Sie zu Ihrer eigenen Wertschätzung.

<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>

---

der richtige Weg wäre: (Verwendung htmlentities() oder ähnliche Klammern zu behandeln, bevor an den Browser oder beim Speichern senden ist).

[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>

Answer 2

Einige Browser unterstützen contenteditable="plaintext-only", das Ihr Problem löst. Die Browser, die dies nicht unterstützen, machen das div jedoch möglicherweise nicht zufrieden stellbar.

Beispiel:

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

---

Eine bessere Lösung für dieses Problem wäre wahrscheinlich ein verwenden nativen <input> oder <textarea> - diejenigen, sollte dies für Sie.