TinyMCE/es: Difference between revisions
From Joomla! Documentation
Updating to match new version of source page |
Updating to match new version of source page |
||
Line 12: | Line 12: | ||
<includeonly>[[Image:Help30-editor-tinymce-advanced-en.png|600px|none]] | <includeonly>[[Image:Help30-editor-tinymce-advanced-en.png|600px|none]] | ||
Learn about Toolbars and Accessibility of [[S:MyLanguage/Chunk30:TinyMCE|TinyMCE]].</includeonly> | Learn about Toolbars, Editor Buttons and Accessibility of [[S:MyLanguage/Chunk30:TinyMCE|TinyMCE]].</includeonly> | ||
<noinclude> | <noinclude> | ||
==Toolbars== | ==Toolbars== |
Revision as of 11:20, 19 November 2021
TinyMCE es el editor por defecto para los usuarios del front-end y el back-end. TinyMCE es un editor WYSIWYG (lo que ves es lo que obtienes), que permite a los usuarios una interfaz de procesamiento de texto amigable, a la hora de editar artículos y otros contenidos. TinyMCE puede ser configurado con tres grupos distintos de botones en la barra de herramientas: avanzado, simple y extendido. Para modificar este parámetro, lo encuentras en el plugín 'Editor - TinyMCE', en el Administratos de plugins .
TinyMCE can be configured with 3 different sets of toolbar buttons
- Set 2 is assigned to 'Public'.
- Set 1 is assigned to the 'Manager' and 'Registered'.
- Set 0 is the most extended toolbar and is by default assigned to the 'Administrator', 'Editor' and 'Super Users'.
This is set as an option in Plugins for 'Editor - TinyMCE'.
Toolbars
Barra de herramientas simple
La barra de herramientas simple provee una fila de botones, como se muestra a continuación.

- Botones que permiten convertir el texto en negrilla, cursiva, subrayado o tachado.
- Deshacer (Ctrl+Z) y rehacer (Ctrl+Y).
- Lista desordenada, lista Ordenada.
- Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.
- Insert 'Field', 'Image', 'Read More'. Learn more about Editor Buttons.
Barra de herramientas avanzada
La barra de herramientas avanzada provee una barra de tres líneas, como se muestra a continuación:
File:Help30-editor-tinymce-advanced-es.png
Esta es la configuración por defecto. La barra de herramienta de tres filas provee muchos comandos de edición estándar, como se muestra a continuación:
Fila Superior.
- Los botones ubicados en la zona superior izquierda permiten aplicar al texto negrilla, itálica, subrayado o tachado, al lado se encuentran botones para alinear a la izquierda, derecha, centro y justificado.
- Formato: Selecciona formatos predefinidos para párrafos, direcciones, encabezados (Heading1) y más.
- Lista no ordenada, lista ordenada, Agregar (mover a la derecha) o quitar (mover al a izquirda) sangría al texto.
- Deshacer (Ctril+Z) y rehacer (Ctril+Y).
Segunda fila
- Insertar/Editar enlace: Para insertar o editar un enlace, selecciona el texto relacionado y presiona este botón. Una ventana emergente aparecerá y te permitirá ingresar los detalles sobre este enlace.
- Desenlazar: Para quitar un enlace, selecciona el texto que lo contiene y presiona este botón.
Insertar/Editar Ancla: Un ancla es un marcador dentro de un artículo que le permite llegar directamente a ese punto del artículo. Para insertar un Ancla, mueve el cursor al sitio deseado en el artículo y haz clic en este botón. Aparecerá una ventana; escribe el nombre del Ancla y haz clic en Insertar. Un ícono pequeño de Ancla se mostrará en la ubicación de esta. Puedes editar el nombre del ancla haciendo clic en él y pulsando este botón. Puedes borrar el ancla simplemente seleccionándolo y presionando la tecla Suprimir (Delete).
- Editar el código HTML. Una ventana emergente muestra el código fuente HTML, para que edites dicho código.
- Insertar regla horizontal.
- Insertar nueva tabla, Propiedades de fila de la tabla, Propiedades de celda de la tabla, Insertar fila antes, Insertar fila después, Insertar columna antes, Insertar columna después, Borrar columna, Dividir celdas unidas, Unir celdas de la tabla.
Subíndice, superíndice, insertar caracter personalizado
- Paste as Plain Text. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text.
- Preview text in popup
- Insert Module, Menu, Contact, Field. In a popup you can choose the item you want to insert.
Third Row
Insertar módulo, Artículo, Imagen, Salto de página, Leer más.
Barra de herramientas extendida
La barra de herramientas extendida proporciona la más amplia gama de opciones de edición, como se muestra a continuación.
Esta opción proporciona los mismos botones mostrados antes la barra de herramientas avanzada. Adicionalmente estas opciones están disponibles:
Primera Fila.
- Styles. Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules.
- Familia de fuente. Selecciona la fuente deseada.
- Tamaño de la fuente. Selecciona el tamaño de fuente deseado.
- Encontrar y Encontrar/Reemplazar.
Segunda fila.
- Seleccionar color de texto o de fondo.
- Activar/desactivar el modo de pantalla completa.
- Insertar nueva tabla, Propiedades de fila de la tabla, Propiedades de celda de la tabla, Insertar fila antes, Insertar fila después, Insertar columna antes, Insertar columna después, Borrar columna, Dividir celdas unidas, Unir celdas de la tabla.
- Insertar emociones.
- Insertar multimedia. Para insertar elementos multimedia (como Flash), ubica el cursor en la posición deseada y haz clic en este botón. Una ventana emergente te permitirá escribir el tipo, archivo o URL y otra información relacionada.
- Dirección izquierda a derecha y derecha a izquierda. Estos botones te permiten cambiar la dirección del texto, por ejemplo para lenguajes que se leen de derecha a izquierda.
Cortar, Copiar, Pegar, Pegar como texto plano, Pegar contenido de Word. A menudo cuando copiamos y pegamos texto de otras fuentes, tales como archivos PDF, documentos de Word o sitios web, el texto seleccionado contiene un formato que no se necesita o no es deseado. Utilizar el botón Pegar como texto plano eliminará todo el formato del texto. Pegar contenido de Word intentará preservar el formato pertinente y borrar el formato innecesario.
Tercera Fila.
- Mostrar/ocultar caracteres de control visual (como las terminaciones de párrafo).
- Mostrar/ocultar elementos de bloque.
- Insertar caracter de espacio de no separación.
- Bloque de cita.
- Insertar contenido de plantilla predeterminada.
Editor Buttons
8 buttons are located at the bottom row of the editor toolbar and one below the content, as shown below:
Module: This button opens a modal window that allows you to easily create a link to any module on the current site. The link is created using the module's title as the link text.
To create a link to the desired module:
- Place the cursor at the point in the article where you want the linked module title to be inserted.
- Click on the Module button to open the modal window.
- Click on the title to select the desired module in the modal window. You can use the filters and search to help find the desired module.
- A link with the module's title will be inserted at the current cursor location.
- If needed, you can edit the link text.
Menu: This button opens a modal window that allows you to easily create a link to any menu on the current site. The link is created using the Menu's title as the link text.
To create a link to the desired menu:
- Place the cursor at the point in the article where you want the linked menu title to be inserted.
- Click on the Menu button to open the modal window.
- Click on the title to select the desired menu in the modal window. You can use the filters and search to help find the desired menu.
- A link with the menu's title will be inserted at the current cursor location.
- If needed, you can edit the link text.
Contact: This button opens a modal window that allows you to easily create a link to any contact on the current site. The link is created using the Contacts title as the link text. The modal window is the same as for selecting a contact for a Single Contact Menu Item.
To create a link to the desired contact:
- Place the cursor at the point in the article where you want the linked contact title to be inserted.
- Click on the Contact button to open the modal window.
- Click on the title to select the desired contact in the modal window. You can use the filters and search to help find the desired contact.
- A link with the contacts title will be inserted at the current cursor location.
- If needed, you can edit the link text.
Fields: This button opens a modal window that allows you to easily create a link to any field on the current site. The link is created using the fields title as the link text. Note: The button is shown if at least one field is created.
To create a link to the desired field:
- Place the cursor at the point in the article where you want the linked field title to be inserted.
- Click on the Field button to open the modal window.
- Click on the title to select the desired field in the modal window. You can use the filters and search to help find the desired field.
- A link with the fields title will be inserted at the current cursor location.
- If needed, you can edit the link text.
Article: This button opens a modal window that allows you to easily create a link to any article on the current site. The link is created using the article's title as the link text. The modal window is the same as for selecting an article for a Single Article Menu Item.
To create a link to the desired article:
- Place the cursor at the point in the article where you want the linked article title to be inserted.
- Click on the Article button to open the modal window.
- Click on the title to select the desired article in the modal window. You can use the filters and search to help find the desired article.
- A link with the article's title will be inserted at the current cursor location.
- If needed, you can edit the link text.
Image. This button provides an easy way to insert an image into an Article. Images may be inserted from the 'images' folder and may also be uploaded. When you click the Image button, a window pops up, as shown below:
- Folder. The current directory on the host server. This is the 'images' directory under your Joomla! home directory. Use the drop-down list box to select a subdirectory.
- Up. Navigate to the parent directory. Note that the top directory for this function is 'images'. You can not navigate to a higher directory.
- Insert. Insert the selected image. The insert point will be the current cursor position. You will see the image display inside the edit window.
- Cancel. Cancel the operation and close the popup window. You can cancel also in clicking the X at right top corner.
- Thumbnail Browse Area. Click on an image thumbnail to select the image. Click on a folder icon to navigate to that subdirectory.
- Image URL. Click on one of the image thumbnails and the URL for the image will be entered for you.
- Image Description. Enter a description for the image.
- Caption. If entered, this will displayed as a caption below the image.
- Image Float. This will apply the classes 'pull-left', 'pull-center' or 'pull-right' to the '<figure>' or '<img>' element.
- Image Title. Enter a Title for this image. This displays when a User hovers the mouse on the image.
- Caption Class. This will apply the entered class to the '<figcaption>' element. For example: 'text-left', 'text-center'.
- Upload file. Click this button to browse to an image file to upload from your local computer. A file dialog will open allowing you to select a file.
- Start Upload. Once you have selected a file, press this button to upload the file to your Joomla! 'images' folder. The thumbnail for the new image will now show in the thumbnail area.
Pagebreak. 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 popup window is displayed as shown below:
- Page Title. Enter the title to display for the new page (for example, 'Page 2').
- Table of Contents Alias. Optional field to display in the table of contents for this page. In a multi-page article, Joomla! displays a 'table of contents' for the page that allows the user to select any page. If this field is blank, the Page Title will be used. If you want a different title in the table of contents, enter it here.
- Insert Page Break. Click this button to insert the pagebreak with the entered fields. The Pagebreak will display as a gray dashed line across the Article. Note that a pagebreak cannot be edited. If you need to change a field in the pagebreak, click on the Article just past the pagebreak, press Backspace until the pagebreak is deleted, then insert a new pagebreak with the desired information.

- 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 and in the Global Configuration. The 'Read more...' break allows you to save space on pages by just showing the Intro Text.Note: The 'Read more...' break only shows in the Frontend, and Category Blog layouts. If you want to insert breaks for an Article shown in an Article Layout, use the Page Break button.

- Toggle editor. If you are using the TinyMCE editor, a Toggle editor button will show just below the edit window. This button allows you to toggle between the TinyMCE editor and No Editor.
Accessibility
TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:
- [ALT + F9] Move focus and jump to menu bar
- [ALT + F10] Move focus and jump to toolbar
- [ALT + F11] Move focus and jump to element path
- [ESC] Close menu/submenu/dialog (also gets you back to editor area)
- [Tab]/[Arrow] Navigate left/right through menu/toolbar
For more information, see: TinyMCE - Accessibility