Leute posten ziemlich viel HTML in den Kommentaren zu Artikeln auf dieser Seite. Sie versuchen, etwas zu demonstrieren, um Hilfe bei der Fehlersuche zu bitten, alternative Techniken zu zeigen usw. Das ist ausgezeichnet. Ich möchte das so weit wie möglich fördern. Leider sind die Leute oft verwirrt, wie sie es richtig machen und frustriert, wenn es falsch herauskommt.
Ich muss Anleitungen im Kommentarbereich posten, um Leuten den besten Weg für diese Seite zu vermitteln
- Du kannst einfaches HTML verwenden
- Wenn du Code postest, wandle bitte alle <-Zeichen in < um
- Wenn der Code mehrzeilig ist, verwende <pre><code></code></pre>
Idealerweise möchte ich all diese Anweisungen komplett loswerden und alles „einfach funktionieren“ lassen. Hier sind zwei Änderungen, die dem Ideal für Kommentare auf dieser Seite ziemlich nahe kämen
1. Jedes HTML, das kein „erlaubter Tag“ ist, wird maskiert.
WordPress hat diese Standardmenge an erlaubten Tags
<a href="" title="">
<abbr title="">
<acronym title="">
<b>
<blockquote cite="">
<cite>
<code>
<del datetime="">
<em>
<i>
<q cite="">
<strike>
<strong>
Wenn jemand diese Tags in einem Kommentar verwendet, werden sie auf diesen Text angewendet und entsprechend gerendert. Wenn sie einen *anderen* Tag verwenden, sollte dieser **maskiert** werden, nicht gelöscht oder unangemessen gerendert. Also

Ich würde auch sagen, dass wenn es sich um eine einzelne Codezeile handelt, wie in diesem Beispiel (enthält keine Zeilenumbrüche), der neu maskierte Code in <code></code>-Tags eingeschlossen werden sollte.
Außerdem, wenn der Code bereits maskiert ist, wie <span>, dann lass ihn in Ruhe.
2. Stelle sicher, dass mehrzeiliger Code in <pre>-Tags eingeschlossen ist
Wenn jemand mehrere Codezeilen postet (entweder hat er sie in <code>-Tags gesetzt oder es sind keine erlaubten Tags, also wird er automatisch maskiert und automatisch mit Code umwickelt), sollte dieser mehrzeilige Code in <pre></pre>-Tags eingeschlossen werden.

Dies sollte auch Leerzeichen am Anfang und Ende des Codeblocks entfernen, damit keine zusätzlichen Leerzeichen gerendert werden. Das
<pre><code>
<ul>
<li>
Sollte sich verwandeln in
<pre><code><ul>
</li><code></pre>
Dies wäre der Fall, unabhängig davon, ob der Kommentator die Tags selbst verwendet oder ob sie basierend auf den obigen Regeln automatisch generiert werden.
CMS-agnostisch
Ich denke hier speziell an WordPress, weil ich das immer benutze, aber ich kann mir vorstellen, dass das in jeder Kommentarumgebung nützlich ist, die einige, aber nicht alle HTML-Tags zulässt und in der es angemessen ist, dass die Diskussion Nerds einschließt, die HTML diskutieren. Hey, vielleicht sollte das ein WordPress-Plugin sein, hm? Zwinker Zwinker.
Danke. Hätte das alles wissen müssen. Es ist schade, dass wir deine Hilfe brauchen, um unsere eigenen Kommentare zu bearbeiten oder zu löschen, aber das sollte sehr helfen. Es gibt clevere Wege, dies zu realisieren, entweder mit JavaScript (jQuery in deinem Fall) und PHP.
Darüber nachgedacht?
Du brauchst nicht einmal den Teil
.split('>').join('>').Cleveres Denken =) Aber ich würde das idealerweise lieber vom Backend als vom Frontend handhaben. Zum Beispiel funktioniert das nicht, wenn der Tag als nicht erlaubter Tag komplett entfernt wird.
Ich mag die Idee, aber du solltest es maskieren, wenn du es in die Datenbank schreibst! Ich erinnere mich an den Tag, als YouTube durch die HTML-If-Anweisung „gehackt“ wurde 😉
Ehrlich gesagt, am meisten würde ich es einfach bevorzugen, die Möglichkeit zu haben, meinen Kommentar zu bearbeiten und alle Fehler zu korrigieren, die ich gemacht haben könnte. Abgesehen davon bin ich ein großer Fan von Markdown und liebe es, Zeichen wie Backticks verwenden zu können, um ein Code-Snippet (normalerweise eine Variable, Klasse oder ein HTML-Tag) inline aufzurufen, sowie für mehrzeilige Codeblöcke.
Also… Chris… wann können wir erwarten, dass dies auf dieser Seite implementiert wird?? (Dieses neue Styling ist übrigens großartig.)
Ich habe auch darüber nachgedacht… wenn du einfügst, kannst du sehen, dass es mehrzeilige eingefügte Inhalte mit zusätzlichen Leerzeichen gibt und das automatisch als Codeblock behandelt?
Deshalb denke ich, dass jeder Webentwicklungsblog/-seite einfach Markdown verwenden sollte. Backticks erstellen eine Inline-Code-Span (
<code>, vier Leerzeichen rücken einen Codeblock ein (ein<pre><code>), und alles zwischen zwei Zeilen mit drei Backticks wird ebenfalls zu einem Codeblock (falls du nicht jede Zeile im Codeblock mit vier Leerzeichen einrücken möchtest).Ja, ich mag Markdown auch, aber ich möchte mich nicht darauf verlassen. Ich denke, das macht das Problem schlimmer. Jetzt gibt es noch etwas, das jemand „lernen“ muss, um richtig zu kommentieren. Ich möchte, dass es einfach funktioniert, ohne zu viel darüber nachzudenken. Aber noch besser wäre es, wenn es auch Markdown unterstützen würde.
Ich denke, es sollte eine Option geben, ein Kommentarformular in den Markdown-Modus umzuschalten. Auf diese Weise zwingst du es niemandem auf, während die Großen mit Code spielen können.
Hallo,
Sollte es im Netz nicht einige grundlegende Generatoren dafür geben? Gib einfach das HTML ein, das du als Code anzeigen möchtest, und erhalte es zurück? Nicht die Plugin-Sachen, die du zum Hervorheben verwenden kannst, sondern nur einen Generator.
Auf jeden Fall danke für die Einblicke dazu. Manchmal kann es wirklich frustrierend sein, Code zu zeigen :-).
Greetz
Klassisches Beispiel gerade auf einem anderen Beitrag vor ein paar Minuten passiert: http://cl.ly/9QJ2
Und wieder… http://cl.ly/9QD4
Das ist ein legitimes Problem hier. Die Möglichkeit der Bearbeitung ist wahrscheinlich ein guter erster Schritt.
Die E-Mail-Adresse ist nicht sehr gut versteckt.
Du schaust dir dort den ‚preprocess_comment‘-Filter an. Vielleicht könntest du zuerst alle Instanzen von Zeichen, die von < und > umgeben sind, mit dem $allowedtags-Array vergleichen und die, die nicht übereinstimmen, durch < und > ersetzen.
Die zweite Stufe wäre wahrscheinlich die Analyse des resultierenden Textes auf zwei oder mehr Instanzen von < und >, die durch ein oder mehrere Zeilenumbruchzeichen getrennt sind.
Ich würde versuchen, etwas hier zu schreiben, aber es ist spät genug, dass ich schwer von Begriff bin und ich bin mir nicht sicher, wie WP es verhunzen würde. Liebe deine Kommentarvorschau, übrigens.
Hier ist, was ich für das erste Problem habe.
Ein Problem jedoch: erlaubte Tags innerhalb maskierter Tags werden nicht maskiert. Der Regex sollte korrigiert werden, und ich weiß nicht wie! :)
Beachte auch, dass ich den get_comment_text-Filter verwende, der nicht zerstörerisch ist und die Daten in der Datenbank nicht verändert.
Hey, es hat gerade meinen mehrzeiligen Code-Text zerstört!
Ich war schuldig, dies zu tun, und habe einige Kommentare auf diesem Blog geschrieben, die bearbeitet werden mussten (Entschuldigung dafür).
Als ich anfing, selbst Artikel zu schreiben, beschloss ich, einen HTML-Entity-Encoder zu erstellen, der zum Kopieren/Einfügen oder Schreiben von Code verwendet werden kann (es gibt schon viele, aber das ist natürlich meine Lieblingsart, es zu tun).
Auch diese Kommentarvorschau ist eine großartige Idee!
Der Link zur Entity-Konvertierung (http://jonathanjanssens.com/lab/htmlencoder/) sollte wahrscheinlich in den „Kommentar“-Anweisungen auf CSS-Tricks erwähnt werden, um diese <- und >-Zeichen in Echtzeit auf der Client-Seite in <- und >-Zeichen umzuwandeln (wahrscheinlich mit JavaScript).
Ich bevorzuge es, GitHub Gists einzubetten (oder zu verlinken). Vielleicht könntest du diese Links (und andere beliebte) parsen und in eingebettete Blöcke umwandeln. Man sieht das auf der Website von Twitter.
Oh, ich mag deine neue Kommentarvorschau. Ich hatte einmal versucht, ein geeignetes Kommentarvorschau-Skript/Plugin für meine Seite zu finden, konnte aber keines finden. Ich habe das getestet, das James Padolsey benutzt, aber ich fand, es hatte ein paar Probleme. Kann mich nicht einmal mehr erinnern, welche Probleme. Etwas im Zusammenhang mit mehrzeiligen Codeblöcken, glaube ich.
Benutzt du dieses Plugin?
http://wordpress.org/extend/plugins/live-comment-preview/
Wenn ja, werde ich es vielleicht ausprobieren, danke!
Ich habe die folgende ID im Markup gefunden: div-comment-lcp. Der letzte Teil (lcp) könnte eine Abkürzung für Live Comment Preview sein, was das von dir erwähnte Plugin ist.
Ein Teil der Lösung, die ich auf meinem Forum verwende, sind Echtzeit-Vorschauen, wie ich sehe, dass du sie hier hast. Das allein beruhigt mich mehr als alles andere, wenn ich Beiträge/Kommentare erstelle, und reduziert die Notwendigkeit einer Bearbeitungsfunktion erheblich.
Ich benutze auch Markdown, oder besser gesagt eine clientseitige Version namens Showdown (die Originalseite dazu scheint verschwunden zu sein). Das Ergebnis ist, dass Forum-Beiträge auf dem Server genau so gespeichert werden, wie der Benutzer sie eingegeben hat, und präsentationsbezogene Transformationen zu HTML werden clientseitig durchgeführt.
Offensichtlich funktioniert das nicht ohne JS, aber da mein Forum ohnehin grundlegend auf JS angewiesen ist, habe ich das nicht als großes Problem angesehen. Sollte ich eine Nicht-JS-Version erstellen, könnte sie einfach die Markdown-kodierten Beiträge so darstellen, wie sie sind, da Markdown ziemlich unaufdringlich ist.
Es klingt, als ob du dich vielleicht ein wenig zu sehr auf Javascript für die Eingabe-Sanitisierung verlässt, da Forum-Beiträge auf dem Server genau so gespeichert werden, wie sie eingegeben wurden.
Wenn es noch nicht vorhanden ist, würde ich serverseitigen Code verwenden, um die Daten zu bereinigen, bevor sie auf dem Server gespeichert werden.
Ich stieß vor nicht allzu langer Zeit selbst auf dieses Dilemma. Ich beschloss, mich an das Schreiben meiner eigenen Website zu wagen, von Grund auf, teils als Lernwerkzeug und teils, weil es mir erlauben würde, sehr spezifisch zu sein, was Leute tun und nicht tun können.
Am Ende fand ich die einfachste Lösung darin, alles HTML zu maskieren und die Verwendung von BBCode für einfache Dinge wie Textformatierung, Einfügen von Codeblöcken usw. zuzulassen.
Für mich war die Logik bei der Bestimmung, welches HTML maskiert und welches beibehalten werden sollte, zu schwierig, besonders wenn es um das Einfügen von Code-Abschnitten und ähnlichem mitten in einem Kommentar geht.
Oh, und natürlich erfordert es keinen Benutzer (oder mich), etwas manuell zu maskieren, da es eine klare Unterscheidung zwischen dem gibt, was die Website maskieren muss (HTML) und dem, was sie behalten und anschließend in HTML umwandeln soll (BBCode).
Schöner Artikel über das Kommentieren. Ich denke, der Inhalt wird mir helfen, in Zukunft mehr zu kommentieren. Danke!
Hervorragende Ressource… Das hat mir geholfen.
Die neueste Version von WordPress macht das bereits (ohne die Notwendigkeit, das Kleiner-als-Zeichen umzuwandeln), aber wie schwierig wäre es, deinen Kommentatoren einen einfachen Editor zu geben.
Ausgezeichnete Ausarbeitung wie üblich…
Vielen Dank für die Weitergabe dieser Informationen..
Ich mag die Art und Weise, wie Stack Overflow damit umgeht, wie man Code eingibt, wirklich.
Ich mag die Technik, die in den Foren von WordPress.org verwendet wird, wo Backticks (`) verwendet werden, um Code zu umschließen, sei es inline oder mehrzeilig.
Ein Filter und ein regulärer Ausdruck können verwendet werden, um
<in<usw. umzuwandeln, bevor die erlaubten Tags geprüft werden.Es erfordert immer noch Anweisungen, aber sie sind vereinfacht, um beide Anwendungsfälle abzudecken.
Zu wissen, welche *Methode* man verwenden soll, ist das Problem, das ich überall im Web habe, ohne eine hässliche „Sinkkasten“-Toolbar; ich weiß nie, wo ich Markdown verwenden kann oder was für HTML tatsächlich verwendet werden kann usw…
Chris, es wäre cool, wenn du dem „Du kannst einfaches HTML verwenden“-Text einen Tooltip hinzufügen könntest, der erklärt, was einfaches HTML ist.
Oh, und Ajax-Edit-Kommentare ist ein cooles Plugin…
Definitiv +1 für die Möglichkeit, meine Kommentare bearbeiten zu können.
Sehr schön!
Vielen Dank für die Weitergabe dieser Informationen..
Lol, ich bin so froh, dass Chris diesen Beitrag gemacht hat. Ich habe mich neulich mit einem sehr halbherzigen Kommentar beschämt, als ich versuchte, etwas über HTML zu demonstrieren, und mein Code kam ganz vermurkst heraus. Nicht einmal ein Alien hätte meine Nachricht verstehen können, geschweige denn, ich war ziemlich verärgert darüber, lol.
Erlaub mir, meinen Kommentar zu bearbeiten, kthxbye. ;)