Code en ligne

Marque un mot ou une sélection comme code, pour des noms comme getHTMLCode() au milieu d’une phrase. Le texte est enveloppé dans un simple élément <code>, et un nouvel appui sur le bouton le retire.

L’activer

La fonctionnalité correspond au plugin inlinecode.js (également inclus dans plugins/all_plugins.js). Sa commande et son élément de barre d’outils s’appellent inlinecode (infobulle "Inline code"). Emplacement du bouton :

• toolbar: "full" : dans la rangée principale, à côté de l’exposant et de l’indice.
• La barre d’outils par défaut : dans le menu "More" (⋮).
• Votre propre barre d’outils : ajoutez inlinecode où vous le souhaitez.

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

Le plugin n’a pas d’options. La commande s’appelle inlinecode, car code désigne déjà la vue source HTML de l’éditeur.

Utilisation

• Avec une sélection, le texte sélectionné est enveloppé et reste sélectionné : un second appui retire donc de nouveau le code.
• Avec un simple curseur, la commande agit sur le mot sous le curseur : la suite de caractères jusqu’à l’espace la plus proche de chaque côté. Le curseur reste là où il était. Sur un endroit vide, rien ne se passe ; aucun <code> vide n’est créé.
• Retrait. Si tous les caractères sélectionnés sont déjà du code, la commande retire le code. Retirer une partie d’un passage de code le scinde : sélectionner « content » dans <code>the content</code> puis appuyer sur le bouton laisse <code>the </code>content. L’italique ou le gras à l’intérieur du passage reste sur le texte sorti du code, mais les parties en code de chaque côté peuvent en garder une copie vide : retirer le code de « b » dans <code>a <i>b</i> c</code> enregistre <code>a <i></i></code><i>b</i><code><i></i> c</code>.
• Saisie. Avec les raccourcis Markdown en ligne de l’éditeur activés (markdownInlineEnabled, valeur par défaut), taper `npm install` produit <code>npm install</code> dès que le backtick fermant est tapé. Cela fonctionne sans le plugin ; le plugin ajoute le bouton et le moyen de retirer le code.

Depuis un script : editor.execCommand("inlinecode") ou editor.toggleInlineCode() basculent le code sur la sélection courante, et editor.isInlineCode() indique si le curseur se trouve dans du code. Il n’existe pas de raccourci clavier pour cette commande.

À savoir

• Le balisage enregistré est un élément nu, sans classe :

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

  Deux passages de code qui se retrouvent côte à côte sont fusionnés en un seul élément, et une sélection composée uniquement d’espaces n’est pas enveloppée.
• Rien n’est enveloppé à l’intérieur d’un bloc de code <pre> ni à l’intérieur d’un code existant, car les deux sont déjà du code. Utilisez insertcode pour les blocs de code sur plusieurs lignes.
• Le fond gris et la police à chasse fixe proviennent de la feuille de style du contenu de l’éditeur (runtime/richtexteditor_content.css, règle code { … }). La page qui affiche le HTML enregistré a besoin de son propre style pour code.
• Les filtres de nettoyage doivent autoriser l’élément code. La plupart l’autorisent par défaut.

Voir aussi : référence des éléments de barre d’outils, execCommand, démo des extraits de code.