Joomla! Documentation™

TinyMCE

TinyMCE est l'éditeur par défaut pour les utilisateurs du Frontend et du Backend. TinyMCE est un éditeur "WYSIWYG" (what you see is what you get) qui offre aux utilisateurs une interface familière de traitement de texte pour l'édition d'articles et d'autres contenus.

TinyMCE peut être configuré avec 3 jeux différents de boutons de barre d'outils. Ceci est défini dans le plugin Editor - TinyMCE.

Barre d'outils

Préréglage simple

La barre d'outils simple fournit une rangée de boutons comme indiqué ci-dessous.

Cet ensemble est attribué par défaut au groupe d'utilisateurs Public.

• Les boutons vous permettent de rendre le texte : gras, souligné ou barré.
• Annuler et refaire.
• Liste non ordonnée, liste ordonnée.
• Coller en tant que texte : Souvent, lorsque vous copiez et collez du texte provenant d'autres sources, telles que des fichiers PDF, des documents texte ou des pages Web, le texte sélectionné contient des informations de formatage qui ne sont pas nécessaires ou souhaitées. L'utilisation de la fonction "Coller en tant que texte" éliminera tout le formatage du texte.

Préréglage moyen

La barre d'outils simple fournit une rangée de boutons comme indiqué ci-dessous.

The set is default assigned to the Manager and Registered user group.

This option provides all of the same buttons as documented in the Set 2 Toolbar above. In addition, the following options are available.

Rangée supérieure

• La liste déroulante du contenu du CMS permet d'accéder à un lien vers un article, un contact, un champ, un média, un menu ou un module.

Article: The example show how to easily create a link to any article on the current site.



Pour créer un lien vers l'article souhaité :

• Placez le curseur à l'endroit de l'article où vous souhaitez que le titre de l'article lié soit inséré.
• Cliquez sur le bouton Article bouton pour ouvrir la fenêtre modale.
• Depuis la fenêtre modale, cliquez sur le titre pour sélectionner l'article souhaité. Vous pouvez utiliser les filtres de recherche pour vous aider à trouver l'article souhaité.
• Un lien avec le titre de l'article sera inséré à l'emplacement actuel du curseur.
• Si nécessaire, vous pouvez modifier le texte du lien.

In the same way you can link other items like Media, Modules, and so on.

Page Break: This button allows you to insert a pagebreak inside an article. A pagebreak allows for page navigation when the article is displayed on a layout. This is useful for long articles. When this button is pressed, a window is displayed as shown below:



• Titre de la page. Indiquez le titre à afficher sur cette nouvelle page (par exemple, 'Page 2').
• Liste des alias d'articles. Champ optionnel permettant d'afficher la table des matières de cette page. Dans un article multi-pages, Joomla! affiche une 'table des matières' pour la page permettant à l'utilisateur de sélectionner une page. Si ce champ est vide, alors le titre de la page sera utilisé. Si vous souhaitez un titre différent pour la table des matières, indiquez le ici.
• Insérer le saut de page. Cliquez sur ce bouton pour insérer le saut de page avec les champs complétés. Le saut de page s'affiche en gris pointillé dans l'article. Notez qu'un saut de page ne peut pas être modifié. Si vous souhaitez modifier un champ du saut de page, cliquez dans l'article juste après le saut de page, appuyez sur retour arrière jusqu'à ce que le saut de page soit supprimé, puis insérez un nouveau saut de page avec les informations souhaitées.
• The configuration is set in the Content - Page Break plugin.

Read More: This button inserts a Read more break in the article. This shows as a red dotted line across the article.

• If an article has a Read more break, only the text before the break, called the Intro Text, will initially display, along with a Read more link. If the User clicks this link, either the entire article or just the part after the Read more link is displayed. This depends on the setting of the Intro Text parameters for the article.
• The Read more break allows you to save space on pages by just showing the Intro Text.
• If you want to insert breaks for an article shown in an Article Layout, use the Page Break button.

The buttons in the CMS content dropdown list can be disabled in Plugins - editors-xtd.

• Buttons in the upper left allow you to make text: italic. Next to that are buttons for align left, right, center, and full.
• Formats: Select pre-defined formats for Headings, Inline, Blocks, and so on.
• Outdent (move left) and Indent (indent right).
• 3 dots: Show second Toolbar row.

Deuxième ligne

• Insert/edit Link: To insert or edit a link, select the linked text and press this button. A popup dialog displays that lets you enter details about the link.
• Remove Link: To remove a link, highlight the linked text and press this button.
• Anchor: An anchor is a bookmark inside an article that lets you link directly to that point in the article. Learn more.
• Source code: A popup displays showing the HTML source code, allowing you to edit the HTML source code.
• Insert a horizontal line: To insert a horizontal line, move the cursor to the desired location within the article and click this button.
• Table: Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.
• Subscript, Superscript, Special Character.
• Preview text in popup.

Préréglage avancé

The toolbar set 0 provides the most extensive editing options, as shown below.

The set is default assigned to the Administrator, Editor, and Super Users user group.

This option provides all of the same buttons as documented in the Set 1 Toolbar above. In addition, the following options are available.

Rangée supérieure

• Blocks: Paragraph, Headings, Preformatted.
• Fonts: Select the desired font.
• Font Size: Select the desired font size.
• Find and Replace.
• Insert/edit image: To insert a image, place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Source, Width or Height and other information about the image.

Deuxième ligne

• Select Text color or Background color.
• Fullscreen.
• Emoticons.
• Insert media: To insert media, place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Type, File or URL, and other information about the media.
• Direction Left to Right or Direction Right to Left: These buttons allow you to enter or change the text direction, for example for languages that read right to left.
• Cut, Copy, Paste.
• Show invisible characters (like paragraph endings).
• Show blocks.
• Nonbreaking space.
• Blockquote.
• Insert Template.

Troisième ligne

• Print the article text.
• Insert/edit code sample.
• Insert date/time.
• Clear formatting.

Accessibilité

TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse.

Keyboard shortcuts

Task	PC	macOS
Déplace le focus et se rend sur la barre de menu	Alt+F9	⌥+F9
Déplace le focus et se rend sur la barre d'outils	Alt+F10	⌥+F10
Déplace le focus et se rend sur le chemin des éléments	Alt+F11	⌥+F11
Ferme le menu/le sous-menu/la boîte de dialogue (et vous repositionne sur la zone de l'éditeur)	Esc	esc
Return to the editor content area	Esc	esc
Navigue à gauche/à droite dans le menu/la barre d'outils	Tab and the Arrow Keys	Tab and the Arrow Keys

Voir pour plus d'informations :

• TinyMCE - Accessibility (en)
• Une liste des keyboard shortcuts (pc, mac) disponibles dans le corps de l'éditeur.

CodeMirror

L'éditeur CodeMirror est conçu pour faciliter l'utilisation de code HTML dans un article ou une description. CodeMirror prend en charge la coloration syntaxique et l'auto-complétion, comme le montre cette capture d'écran.

• Buttons shown below the edit window provides for access to link to any item of the site. Learn more.
• CodeMirror propose certains des mêmes avantages que lors de l'utilisation de No Editor mais le rend plus facile à utiliser avec du code HTML brut.
• The configuration is set in the Editor - CodeMirror plugin.

None

If 'Editor - None' is selected for a User, then a simple text editor displays. This allows you to enter in raw, unformatted HTML. You can use the toolbar 'Preview' button to preview how the HTML will display.

Note that the 'None' option can be useful if you are entering in 'boilerplate' or custom HTML, for example to create a PayPal link. TinyMCE automatically re-formats and strips some HTML when a file is saved. This can cause complex HTML to not work correctly.

If this happens, you can temporarily change the editor to 'None' and create the desired content. Note that if you wish to edit this content in the future, you should be careful to change your editor to 'None'. Otherwise, if you open and save the content with TinyMCE, you may lose your custom HTML.

The 'Editor - None' plugin has no configuration.