Editor de textos para Drupal: TinyMCE

Transcripción

1 Editor de textos para Drupal: TinyMCE Cuando vayamos a editar el texto de una página, normalmente nos encontraremos con un editor de textos, similar a Word, pero para la web. Donde podamos usarlo encontraremos algo parecido a esto: En el recuadro blanco podremos escribir lo que queramos y apoyarnos en los botones para personalizar este texto. A continuación iremos mostrando el uso de estos botones. Antes de empezar, aprovecharemos para deciros que los botones decolorados están inactivos, porque el texto que esté escribiendo en ese momento no admite la propiedad que se usa con esos botones. Por ejemplo, en este caso, los botones de debajo del todo (tercera fila), están inactivos debido a que se usan para el manejo de tablas, y en el momento en el que se realiza este tutorial no hay ninguna creada. Posteriormente enseñaremos como crear una. 1/10

2 Ahora iremos enumerando los botones y sus características. Situándonos con el cursor encima de cada botón aparecerá una pequeña explicación relativa a cada botón. De todos modos, procederemos a explicarlos brevemente de izquierda a derecha desde el botón con la letra B. Negrita Cursiva Subrayado Tachado Texto alineado a la izquierda Texto alineado al centro Texto alineado a la derecha Texto justificado Crear una lista Crear una lista numerada Sangría a la izquierda Sangría a la derecha Deshacer Rehacer Crear enlace * (Podremos crear un enlace a una web o a un archivo. Para ver cómo enlazar ver sección Insertar imagen ) Deshacer enlace Ancla * Mostrar líneas guía Eliminar formato Elegir el formato del texto Elegir la fuente de los caracteres Elegir el tamaño Elegir el estilo Dividir celda seleccionadas ** Unir celdas seleccionadas ** 2/10

3 Insertar/modificar imagen */NOTA 1 Limpiar código basura Color de la fuente Color del fondo del texto seleccionado Superíndices Subíndices Nota Editor HTML */NOTA 2 Insertar línea horizontal Cortar Copiar Pegar Copiar texto sin formato */NOTA 3 Copiar desde Word */NOTA 4 Insertar/Modificar Tabla */NOTA 5 Propiedades de la fila ** Propiedades de la celda ** Insertar fila al principio de la tabla ** Insertar fila al final de la tabla ** Eliminar fila seleccionada ** Insertar columna al principio de la tabla ** Insertar columna al final de la tabla ** Eliminar columan seleccionada ** NOTA: No todos los botones enumerados tienen que estar disponibles ya que dependen de la versión utilizada en cada caso. Es posible que algún botón no aparezca, o que aparezca alguno que no está aquí enumerado. Sobre los botones * Botones que abren una ventana emergente o pop up para configurar su utilización en cada caso. ** Botones sólo activos durante el uso de las tablas 3/10

4 NOTA 1 Insertar imagen: Cuando hagamos click en editar imagen nos aparecerá una ventana emergente similar a la siguiente: GENERAL A continuación explicaremos los campos de esta pestaña. URL de la imagen: Aquí es donde seleccionamos la imagen que queremos que aparezca. Para ello pulsaremos el botón a la derecha de la línea, que nos abrirá otra ventana como la siguiente: (esto nos valdrá tanto para las imágenes como para los archivos que querramos añadir desde el botón de crear enlace) 4/10

5 La imagen nos muestra cómo están organizadas las carpetas dentro de nuestra web. Tenemos dos opciones para añadir estas imágenes/archivos: 1. La imagen ya está subida en la web Haremos click en la carpeta (Navegación) de donde queramos obtener la imagen/archivo. Para seleccionar la imagen/archivo que querramos insertar los seleccionaremos de File name, a la derecha. La imagen/archivo seleccionados apareceran en el recuadro que en la imagen aparece en blanco, en la zona inferior derecha, y pulsando sobre ellos en este recuadro lo seleccionaremos para que aparezca en el campo URL de la imagen, o archivo a enlazar, dependiendo del caso. 2. La imagen no está subida, por lo que la tendremos que subir nosotros Nos situaremos en la carpeta (Navegación) donde queremos añadir la imagen/archivo y haremos click en Subir. Nos aparecerá algo similar a esto: Haremos click en Examinar, que nos abrirá las carpetas de nuestro disco duro, desde donde 5/10

6 seleccionaremos la imagen/archivo que queremos subir a la web. Una vez seleccionado, haremos click en el botón Subir. Las demás opciones en este momento no son importantes. Una vez subida la imagen la trataremos como en el paso 1. Descripción de la imagen: Es conveniente añadir una pequeña descripción en pocas palabras. Título de la imagen Es el título que tendrá la imagen cuando nos situemos sobre ella. También es recomendable añadir uno. Vista previa (aquí veremos una pequeña vista previa de la imagen que vamos a añadir) APARIENCIA Desde aquí podremos modificar la alineación, dimensiones y otras características de la apariencia. Una vez hayamos concluido daremos a Insertar que añadirá nuestra imagen al editor de texto. AVANZADO Opción sólo para usuarios expertos. 6/10

7 NOTA 2 Editor HTML Es un simple editor en HTML. No es recomendable utilizarlo a no ser que estés muy seguro de lo que haces, ya que pudes perder todos los cambios que hayas realizado en el texto. 7/10

8 NOTA 3 Copiar texto plano/sin formato Copia y pega el texto que deseas para pegarlo como texto plano. Rercomendable usar esta función si queremos pegar un texto copiado desde otra página web, ya que suele copiarse con formato HTML, con lo que copiará también el estilo de la otra página web. 8/10

9 NOTA 4 Copiar desde Word Se usa para insertar tal cual desde un procesador de textos como Word. Esto mantendrá el formato, a diferencia de Pegar como texto plano/sin formato. 9/10

10 NOTA 5 Insertar/Modificar tabla Desde aquí seleccionaremos las opciones de como crear/modifcar nuestra tabla. Pulsando sobre Actualizar se actualizará la tabla que estemos creando/modificando. 10/10