Inline-Code

Markiert ein Wort oder eine Auswahl als Code für Namen wie getHTMLCode() innerhalb eines Satzes. Der Text wird in ein einfaches <code>-Element eingeschlossen und durch erneutes Drücken der Schaltfläche entfernt.

Schalten Sie es ein

Die Funktion ist das Plugin inlinecode.js (auch in plugins/all_plugins.js). Sein Befehls- und Symbolleistenelement ist inlinecode (Tooltip "Inline code"). Wo die Schaltfläche erscheint:

• toolbar: "full": in der Hauptzeile, neben hochgestellt und tiefgestellt.
• Die Standardsymbolleiste: im Menü "More" (⋮).
• Ihre eigene Symbolleiste: Fügen Sie inlinecode an der gewünschten Stelle ein.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/inlinecode.js"></script>

<div id="editor"><p>Call editor.getHTMLCode() to read the content, then save it.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
    toolbar: "mytoolbar",
    toolbar_mytoolbar: "{bold,italic,underline,inlinecode}|{insertlink,insertcode}|{undo,redo}"
});
</script>

Das Plugin hat keine Optionen. Der Befehl heißt inlinecode, da code bereits die HTML-Quellansicht des Editors ist.

Verwenden

• Bei einer Auswahl wird der ausgewählte Text umbrochen und bleibt ausgewählt, sodass ein zweiter Druck den Code wieder entfernt.
• Mit nur einem Caret wirkt sich der Befehl auf das Wort unter dem Caret aus: die Zeichenreihe bis zum nächsten Leerzeichen auf jeder Seite. Das Caret bleibt dort, wo es war. An einer leeren Stelle passiert nichts; Es wird kein leerer <code> erstellt.
• Entfernen. Wenn jedes ausgewählte Zeichen bereits Code ist, wird es vom Befehl entfernt. Durch das Entfernen eines Teils eines Codelaufs wird dieser aufgeteilt: Durch Auswahl von "content" innerhalb von <code>the content</code> und Drücken der Schaltfläche wird <code>the </code>content verlassen. Kursiv oder fett gedruckt im Lauf bleibt auf dem uncodierten Text, aber die Codeteile auf beiden Seiten können eine leere Kopie davon behalten: Wenn Sie "b" in <code>a <i>b</i> c</code> entcodieren, wird es als <code>a <i></i></code><i>b</i><code><i></i> c</code> gespeichert.
• Eingabe. Wenn die Inline-Markdown-Verknüpfungen des Editors aktiviert sind (markdownInlineEnabled, die Standardeinstellung), erzeugt die Eingabe von `npm install` <code>npm install</code>, wenn der schließende Backtick eingegeben wird. Das funktioniert ohne das Plugin; Das Plugin fügt die Schaltfläche und die Möglichkeit zum Entfernen von Code hinzu.

Aus dem Skript: editor.execCommand("inlinecode") oder editor.toggleInlineCode() schaltet die aktuelle Auswahl um, und editor.isInlineCode() gibt an, ob sich das Caret im Code befindet. Für den Befehl gibt es keine Tastenkombination.

Wissenswertes

• Das gespeicherte Markup ist ein bloßes Element ohne Klasse:

  <p>Call <code>editor.getHTMLCode()</code> to read the content, then save it.</p>

  Zwei Codeläufe, die nebeneinander enden, werden in einem Element zusammengeführt, und eine Auswahl, die nur aus Leerzeichen besteht, wird nicht umbrochen.
• In einen <pre>-Codeblock oder in vorhandenen Code wird nichts eingeschlossen, da es sich bei beiden bereits um Code handelt. Verwenden Sie insertcode für mehrzeilige Codeblöcke.
• Der graue Hintergrund und die Monospace-Schriftart stammen aus dem Inhalts-Stylesheet des Herausgebers (runtime/richtexteditor_content.css, Regel code { … }). Die Seite, die den gespeicherten HTML-Code anzeigt, benötigt einen eigenen code-Stil.
• Desinfektionsmittel müssen das Element code zulassen. Die meisten erlauben es standardmäßig.

Verwandt: Referenz zu Symbolleistenelementen, execCommand, Code-Snippets-Demo.