Editor TinyMCE: diferència entre les revisions

Revisió del 13:36, 5 set 2024

Què és

L’editor TinyMCE és una eina que ens permet donar format al text que volem publicar al nostre Moodle de forma senzilla. És l’editor html de Moodle i a partir del curs 2024-2025 és el que està configurat per defecte a la UVic (anteriorment teníem l'Editor ATTO).

Igual que l'anterior editor, té diverses icones que ajuden a l’usuari ingressar contingut i que poden resultar familiars si hem usat altres processadors de textos. A més, inclou també opcions agrupades en menús.

Aquest editor és molt visual i a part de donar format al text també incorpora eines d’enregistrament de vídeo i àudio que permeten fer gravacions des de qualsevol activitat o recurs que tingui l’editor.

Què podem fer

Estructura de l'editor TinyMCE

Totes les opcions d'edició que permet TinyMCE estan agrupades en menús (1) en la seva part superior.

Hi ha una segona filera que mostra els botons de les funcionalitats que es consideren més utilitzades (2) i que es pot ampliar clicant la icona dels tres punts suspensius de la dreta (3).

A la zona del contingut (4) s'escriu el text, s'insereixen imatges o vídeos, i s'inclouen enllaços, entre altres opcions. Per donar format a un text, a les que es dona format a partir de les opcions de menú o de les icones.

Menús de l'editor TinyMCE

Cada opció inclosa en els menús de l'editor té una icona representativa, que és la mateixa que apareix en la barra de botons (si és que està inclosa).

Edita

El menú edita conté les següent opcions:

Desfés
Refés
Retalla
Copia
Enganxa
Enganxa com a text (és a dir, sense format)
Selecciona-ho tot
Cerca i reemplaça...

Visualitza

El menú visualitza conté:

Codi font: canvia a la visualització de codi font html.
Assistència visual:
Mostra els caràcters invisibles
Mostra els blocs
Pantalla completa
Previsualització

Insereix

Imatge
Enllaç
Multimèdia
Enregistrar un àudio
Enregistrar un vídeo
Mostra de codi...
Taula
Caràcter especial
Emojis...
Línia horitzontal
Salt de pàgina
Espai no separable
Àncora...
Data/hora
Editor d'equacions
Genérico Widgets
Contingut H5P
Vídeo de Medial: inserir un vídeo que tinguem allotjat a Medial (el gestor de vídeos de la UVic).

Format

Negreta
Cursiva
Subratllat
Barrat
Superíndex
Subíndex
Codi
Blocs
Alinea
Alçada de la ínia
Suprimeix el format
Color de text
Color de fons
Idioma

Eines

Codi font
Recompte de paraules
Revisor d'accessibilitat
Media manager

Taula

Taula
Cel·la
Fila
Columna
Propietats de la taula
Suprimeix la taula

Tot fent servir una de les icones per inserir imatges (9), un fitxer d’àudio o vídeo (9) i la d’H5P (12), s’obre un diàleg com el següent:

Si navegues pels repositoris, s’obrirà el Selector de fitxers, tal com es veu a la imatge següent. Si tries Seleccionar archivo, pots trobar un fitxer al teu ordinador per incorporar.

Amb la icona de MS Word (8) s’obrirà directament el Selector de fitxers i seguidament pots triar el fitxer com al procediment anterior.

La icona Gestiona fitxers (10) serveix per carregar elements, que posteriorment podràs seleccionar al servidor amb el Selector de fitxers.

Altres informacions i ajudes d'interès

Per a informació més detallada de com funciona l’editor ATTO de Moodle, consulta aquestes pàgines externes:

Pàgina oficial de Moodle: https://docs.moodle.org/all/es/Editor_Atto (en espanyol)
Web de recursos de la URV: https://moodle.urv.cat/wiki/ATTO (en català)

@@ Línia 11: / Línia 11: @@
 ==== Estructura de l'editor TinyMCE ====
-Totes les opcions d'edició que permet TinyMCE estan agrupades en menús (1). Hi ha una segona filera que agrupa les icones de les funcionalitats que es consideren més utilitzades (2) que es pot ampliar clicant la icona dels tres punts suspensius de la dreta (3).
+Totes les opcions d'edició que permet TinyMCE estan agrupades en menús (1) en la seva part superior.
-A la zona del contingut (4) s'escriu el text, s'insereixen imatges o vídeos, s'inclouen enllaços, entre altres opcions, a les que es dóna format a partir de les opcions de menú o de les icones.
+Hi ha una segona filera que mostra els botons de les funcionalitats que es consideren més utilitzades (2) i que es pot ampliar clicant la icona dels tres punts suspensius de la dreta (3).
+A la zona del contingut (4) s'escriu el text, s'insereixen imatges o vídeos, i s'inclouen enllaços, entre altres opcions. Per donar format a un text, a les que es dona format a partir de les opcions de menú o de les icones.
 [[Fitxer:VistaGeneralEditorTinyMCE.png|center|miniatura|600x600px]]
-===== Menús de l'editor TinyMCE =====
+==== Menús de l'editor TinyMCE ====
-[[Fitxer:EditorTinyMCE MenuEdita.png|center|miniatura]]
+Cada opció inclosa en els menús de l'editor té una icona representativa, que és la mateixa que apareix en la barra de botons (si és que està inclosa).
-[[Fitxer:EditorTinyMCE MenuVisualitza.png|center|miniatura]]
-[[Fitxer:EditorTinyMCE MenuInsereix.png|center|miniatura]]
-[[Fitxer:EditorTinyMCE Format.png|center|miniatura]]
-[[Fitxer:EditorTinyMCE Eines.png|center|miniatura]]
-[[Fitxer:EditorTinyMCE Taula.png|center|miniatura]]
-A continuació, t'expliquem les accions que potsm fer amb les icones predeterminades de la primera fila d’ATTO:
+==== Edita ====
-[[Fitxer:Image4.1.png|center|miniatura|706x706px]]
+[[Fitxer:EditorTinyMCE MenuEdita.png|miniatura|239x239px]]El menú edita conté les següent opcions:
-# Expandir: permet la visualització completa de tots els botons de l’editor.
+* Desfés
-# Aplicar estil de text/paràgraf.
+* Refés
-# Canviar la lletra a Negreta/Cursiva.
+* Retalla
-# Escollir tipografia.
+* Copia
-# Seleccionar el color del text.
+* Enganxa
-# Fer una llista per punts o numerada.
+* Enganxa com a text (és a dir, sense format)
-# Afegir o suprimir un enllaç.
+* Selecciona-ho tot
-# Importar un document MS Word.
+* Cerca i reemplaça...
-# Inserir imatge/ Inserir un fitxer d’àudio o vídeo.
-# Gestionar fitxers.
-# Gravar àudio / Gravar vídeo.
-# Afegir contingut en format H5P.
+===== Visualitza =====
+[[Fitxer:EditorTinyMCE MenuVisualitza.png|miniatura|170x170px]]
+[[Fitxer:EditorTinyMCE MenuInsereix.png|miniatura|504x504px]]
+[[Fitxer:EditorTinyMCE Format.png|miniatura|377x377px]]
+[[Fitxer:EditorTinyMCE Eines.png|miniatura|170x170px]]
+[[Fitxer:EditorTinyMCE Taula.png|miniatura|218x218px]]
+El menú visualitza conté:
-Et donem més detalls a les seccions posteriors.
+* Codi font: canvia a la visualització de codi font html.
+* Assistència visual:
+* Mostra els caràcters invisibles
+* Mostra els blocs
+* Pantalla completa
+* Previsualització
-A continuació, relacionem les accions que pots fer amb les icones predeterminades de la segona fila d’ATTO:
+===== Insereix =====
-[[Fitxer:Image4.2.png|center|miniatura|588x588px]]
-# Subratllar i Ratllar.
+* Imatge
-# Aplicar format de subíndex i superíndex.
+* Enllaç
-# Alinear text a l’esquerra, centrat o a la dreta.
+* Multimèdia
-# Sagnar el text.
+* Enregistrar un àudio
-# Obrir l’editor d’equacions.
+* Enregistrar un vídeo
-# Inserir un caràcter especial.
+* Mostra de codi...
-# Inserir taula.
+* Taula
-# Netejar fons.
+* Caràcter especial
-# Desfer/Refer.
+* Emojis...
-# Activar el revisor d’accessibilitat.
+* Línia horitzontal
-# Activar l’ajuda de lector de pantalla.
+* Salt de pàgina
-# Crear una reunió de MS Teams.
+* Espai no separable
-# Canviar l’idioma.
+* Àncora...
-# Fer servir la vista de codi HTML.[[Fitxer:Image4.3.png|center|miniatura|666x666px]]
+* Data/hora
-Des de finals de febrer 2022, a l’editor ATTO també apareix la icona de Medial (1), que és el gestor de vídeos de la UVic. Això permet encrustar vídeos en els camps on hi ha l’editor ATTO (càrrega d’un fitxer, enllaçar amb un vídeo que ja hi ha en el canal, fer un enregistrament nou amb càmera web o enregistrament de pantalla i càmera web alhora). Per saber-ne més, consulta Medial: el nostre gestor de vídeos i MediaLecture: enregistrar la pantalla.  A més, hi ha tres icones més per afegir una marca de correcció del text (2), eliminar una marca de correcció (3), mostrar el text amb les marques de correcció (4).
+* Editor d'equacions
+* Genérico Widgets
+* Contingut H5P
+* Vídeo de Medial: inserir un vídeo que tinguem allotjat a [[Medial: el nostre gestor de vídeos|Medial]] (el gestor de vídeos de la UVic).
-===== Icones amb les quals cal seleccionar el text =====
+===== Format =====
-[[Fitxer:Image4.1.png|center|miniatura|706x706px]]
-A continuació, detallem quines són les icones que funcionen sobre una selecció de text.
-# Desplegar totes les icones de l’editor ATTO.
+* Negreta
-# Aplicar un estil de text o paràgraf.
+* Cursiva
-# Canviar la lletra a Negreta o Cursiva
+* Subratllat
-# Escollir tipografia. Hi ha sis tipografies disponibles per defecte.
+* Barrat
-# Seleccionar el color del text. Hi ha sis colors per defecte, però amb el llapis pots seleccionar un a la paleta de colors que apareix. Llavors cal prémer ''Submit'' per aplicar el color escollit.
+* Superíndex
-# Fer una llista per punts o numerada.
+* Subíndex
+* Codi
+* Blocs
+* Alinea
+* Alçada de la ínia
+* Suprimeix el format
+* Color de text
+* Color de fons
+* Idioma
-===== Afegir o suprimir un enllaç =====
+===== Eines =====
-Per afegir un enllaç URL a una selecció de text cal prémer el símbol d’enllaçar, tal com es veu a la següent imatge:
-[[Fitxer:Image4.4.png|center|miniatura|533x533px]]
-Llavors apareixerà una finestra per enganxar l’enllaç desitjat.
+* Codi font
-[[Fitxer:Image4.5.png|center|miniatura|363x363px]]
+* Recompte de paraules
+* Revisor d'accessibilitat
+* Media manager
+===== Taula =====
-Finalment, si ho hem fet bé les lletres del text apareixeràn de color granat, com a la imatge següent:
+* Taula
-[[Fitxer:Image4.6.png|center|miniatura|274x274px]]
+* Cel·la
+* Fila
+* Columna
+* Propietats de la taula
+* Suprimeix la taula
-===== Inserir un document MS Word i altres elements multimèdia =====
-Tot seguit, t’expliquem com funcionen les icones 8, 9, 10 i 12 marcades en groc a la imatge següent.
-[[Fitxer:Image4.1.png|center|miniatura|706x706px]]