Share
Los editores WYSIWYG son muy populares. Es posible que también hayas usado uno en algún momento. Hay muchas bibliotecas disponibles para ayudarlo a configurar su propio editor. Aunque son rápidos de configurar, también hay desventajas en el uso de estas bibliotecas. Para empezar, están hinchados. La mayoría de ellos tienen características extravagantes que quizás no uses. Además, personalizar la apariencia de esos editores puede ser un dolor de cabeza..
En este tutorial, construiremos nuestro propio editor WYSIWYG ligero. Al final de este tutorial, tendrá un editor con capacidades de formato básicas que están diseñadas de acuerdo con sus preferencias.
Comencemos con la introducción de execCommand. Usaremos este comando para implementar nuestro editor extensivamente.
execCommand Es un método del objeto de documento. Nos permite manipular los contenidos de una región editable. Cuando se usa junto a contenido editable, Nos puede ayudar a crear un editor de texto enriquecido. Hay muchos comandos disponibles como agregar un enlace, hacer una selección negrita o itálico, y cambiando tamaño de fuente o color. Este método sigue la sintaxis:
document.execCommand (CommandName, ShowDefaultUI, ValueArgument);
CommandName es una cadena que especifica el nombre del comando a ejecutar. ShowDefaultUIes un valor booleano para indicar si la interfaz de soporte debe mostrarse o no. Esta opción no está completamente implementada, y es mejor configurarlo en falso. ValueArgument es una cadena para proporcionar información como la imagen URL o color primario. Este argumento se establece en nulo cuando un comando no requiere un valor para tener efecto.
Necesitaremos usar diferentes versiones de este método para implementar varias características. En los siguientes párrafos, repasaré todos ellos uno por uno..
Comandos como negrita, justificar, deshacer y rehacer no necesitan una ValueArgument. En tales casos usamos la siguiente sintaxis:
document.execCommand (commandName, false, null);
CommandName es simplemente el nombre de comando como justificar centro, justificar derecho, negrita, etc.
Comandos como insertar imagen, crear vínculo y color primario Necesito un tercer argumento para que funcione correctamente. Para estos comandos, necesita la siguiente sintaxis:
document.execCommand (commandName, false, valor);
por insertar imagen, El valor sería la URL de la imagen a insertar. En el caso de color primario, sería un valor de color como # FF9966 o un nombre como azul.
Agregar etiquetas HTML de estilo de bloque requiere que uses formatBlock como commandName y el nombre de la etiqueta como valorArgumento. La sintaxis sería similar a:
Accentsconagua
document.execCommand ('formatBlock', false, tagName);Este método agregará una etiqueta de estilo de bloque HTML alrededor de la línea que contiene la selección actual. También reemplaza cualquier etiqueta que ya existía allí.. nombre de etiqueta puede ser cualquiera de las etiquetas de título (h1-h6), pag o blockquote.
He discutido los comandos más comunes aquí. Puedes visitar Mozilla para obtener una lista de todos los comandos disponibles.
Con los conceptos básicos fuera de nuestro camino, es hora de crear la barra de herramientas. Usaré iconos de Font Awesome para los botones. Quizás hayas notado que dejando de lado algunas diferencias, todas las execCommands tienen una estructura similar. Podemos usar esto para nuestra ventaja utilizando el siguiente marcado para los botones de la barra de herramientas:
De esta manera, cuando los usuarios hagan clic en un botón, podremos saber qué versión de execCommand utilizar basado en el valor de comando de datos atributo. Aquí hay algunos botones para referencia:
H2
los comando de datos El valor del atributo para el primer botón es h2. Después de verificar este valor en JavaScript, utilizaremos formatBlock versión de la execCommand método. Del mismo modo, para el último botón., sobrescrito sugiere que tenemos que utilizar el no valorArgumento versión de execCommand.
Creando color primario y color de fondo Botones es una historia diferente. Plantean dos problemas. Dependiendo de la cantidad de colores que ofrecemos a los usuarios para elegir, escribir ese código puede ser tedioso y propenso a errores. Para abordar este problema podemos usar el siguiente código JavaScript:
var colorPalette = ['000000', 'FF9966', '6699FF', '99FF66', 'CC0000', '00CC00', '0000CC', '333333', '0066FF', 'FFFFFF']; var forePalette = $ ('. fore-palette'); para (var i = 0; i < colorPalette.length; i++) forePalette.append(''); Tenga en cuenta que también estoy configurando un valor de los datos Atributo para cada color. Esto se utilizará más tarde como valorArgumento en el execCommand método.
El segundo problema es que no podemos mostrar tantos colores todo el tiempo, ya que tomaría mucho espacio y resultaría en una experiencia terrible para el usuario. Usando un poco de CSS, podemos asegurarnos de que la paleta de colores aparezca solo cuando un usuario se desplaza sobre los botones respectivos. El marcado de estos botones también debe cambiarse a lo siguiente:
Para visualizar las paletas solo en flotar, Necesitamos el siguiente CSS:
.fore-palette, .back-palette display: none; .fore-wrapper: hover .fore-paleta, .back-wrapper: hover .back-palette pantalla: bloque; flotador izquierdo; posición: absoluta;
Hay muchas otras reglas de CSS en la demostración de CodePen para hacer que la barra de herramientas sea más bonita, pero esto es todo lo que se necesita para la funcionalidad principal..
Ahora es el momento de hacer que nuestro editor sea funcional. El código requerido para hacerlo es sorprendentemente pequeño..
$ ('. toolbar a'). click (function (e) var command = $ (this) .data ('command'); if (command == 'h1' || command == 'h2' || command == 'p') document.execCommand ('formatBlock', false, command); if (comando == 'forecolor' || command == 'backcolor') document.execCommand ($ (this) .data ( 'command'), false, $ (this) .data ('value')); if (command == 'createlink' || command == 'insertimage') url = prompt ('Ingrese el enlace aquí:' , 'http: \ / \ /'); document.execCommand ($ (this) .data ('command'), false, url); else document.execCommand ($ (this) .data ('command'), falso, nulo););Comenzamos adjuntando un evento de clic a todos los botones de la barra de herramientas. Cada vez que se hace clic en un botón de la barra de herramientas, almacenamos el valor del comando de datos atributo del botón respectivo en la variable, mando. Esto se usa más tarde para llamar a la versión apropiada del execCommand método. Ayuda a escribir código conciso y evita la repetición..
Al configurar color primario y color de fondo, Estoy usando el valor de los datos atributo como el tercer argumento. crear vínculo y insertar imagen no tengo una constante url valor, por lo que utilizamos una solicitud para obtener los valores del usuario. También puede querer realizar verificaciones adicionales para asegurarse de que url es válida. Si el mando variable no satisface ninguna de las Si Bloques, ejecutamos la primera versión de execCommand.
Así es como se ve nuestro editor WYSIWYG.
También podría implementar la funcionalidad de guardado automático usando almacenamiento local que discutí en mi último tutorial.
Varios navegadores tienen pequeñas diferencias de implementación. Por ejemplo, tenga en cuenta que al usar formatBlock, Internet Explorer solo admite etiquetas de encabezado h1 - h6, dirección y pre. También debe incluir los delimitadores de etiquetas al especificar la commandName me gusta .
No todos los comandos son compatibles con todos los navegadores. Internet Explorer no admite comandos tales como Insertar HTML y hilitecolor. similar, insertBrOnReturn Solo es compatible con Firefox. Puedes leer más sobre las inconsistencias del navegador en esta página de GitHub.
Crear tu propio editor WYSIWYG puede ser una gran experiencia de aprendizaje. En este tutorial he cubierto muchos comandos y he usado algunos CSS para un estilo básico. Como ejercicio, sugeriría que intente implementar un botón de la barra de herramientas para configurar el fuente de una selección de texto. La implementación será similar a la de la color primario botón.
Espero que te haya gustado este tutorial y hayas aprendido algo nuevo. Si ha creado su propio editor WYSIWYG desde cero, no dude en vincularlo en la sección de comentarios.
