¿Utilizas editores HTML WYSIWYG en tus proyectos? Estas herramientas fáciles de usar se han vuelto cada vez más populares entre los desarrolladores web y creadores de contenido, ya que ofrecen una interfaz intuitiva para crear contenido web sin profundizar en el código HTML sin formato. Si bien estos editores son potentes desde el primer momento, su verdadero potencial a menudo se desbloquea mediante la personalización.

Conclusiones clave

• Puedes agregar nuevas funciones a los editores HTML WYSIWYG

• Los botones personalizados ayudan a los usuarios a formatear el contenido fácilmente

• Cambiar la apariencia del editor puede coincidir con el estilo de tu sitio

¿Por qué cambiar los editores HTML WYSIWYG?

Cambiar un editor HTML WYSIWYG te permite:

1. Agregue funciones que su proyecto necesita

2. Facilitar el uso a los usuarios

3. Sigue con el mismo formato en todo tu sitio

Ahora veamos cómo podemos hacer esto con un ejemplo real.

Agregar un práctico botón resaltado

A menudo, queremos que algún texto se destaque. Agreguemos un botón que haga esto rápidamente. Primero, necesitamos agregar el editor a nuestra página:

Luego, podemos agregar nuestro nuevo botón:

// Make a new icon
FroalaEditor.DefineIcon('highlight', {NAME: 'star'});

// Create a new button
FroalaEditor.RegisterCommand('highlight', {
  title: 'Highlight',
  icon: 'highlight',
  focus: true,
  undo: true,
  refreshAfterCallback: true,
  callback: function () {
    this.html.insert(''   this.selection.text()   '');
  }
});

// Start the editor with our new button
new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight']
});

Este código hace algunas cosas:

1. Crea un nuevo ícono para nuestro botón

2. Le dice al editor qué hacer cuando alguien hace clic en el botón

3. Agrega nuestro nuevo botón a la barra de herramientas

Para que el texto resaltado se vea bien, agregamos algo de estilo:

.fr-view .custom-highlight {
  background-color: yellow;
  padding: 2px;
  border-radius: 2px;
}

Hacer que el editor se vea bien

También puedes cambiar la apariencia del editor. Aquí tienes una forma sencilla de hacerlo:

new FroalaEditor('#editor', {
  toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
  toolbarButtonsSM: ['bold', 'italic', 'underline', '-', 'highlight'],
  placeholderText: 'Type here...',
  charCounterCount: false,
  toolbarSticky: false,
  theme: 'royal'
});

Este cambio hace varias cosas:

• Configura botones para diferentes tamaños de pantalla

• Agrega algo de texto para mostrar dónde escribir

• Apaga el contador de caracteres

• Hace que la barra de herramientas se mueva con la página

• Utiliza un tema prediseñado

Consejos para cambiar los editores HTML WYSIWYG

Cuando cambies estos editores, ten en cuenta estos consejos:

1. Empiece poco a poco: primero haga pequeños cambios antes de probar los grandes.

2. Usa lo que hay allí: utiliza las herramientas integradas del editor cuando puedas.

3. Pruebe mucho: asegúrese de que los cambios funcionen en diferentes navegadores.

4. Piensa en la velocidad: Los grandes cambios pueden ralentizar el proceso, así que prueba con mucho contenido.

5. Manténgase actualizado: busque nuevas funciones que puedan ayudarle.

Uso de editores modificados en diferentes marcos

Puedes utilizar estos editores modificados en muchos marcos web. Así es como puedes usar nuestro editor modificado en React:

import React, { useEffect, useRef } from 'react';
import FroalaEditor from 'react-froala-wysiwyg';

const MyEditor = () => {
  const editorRef = useRef(null);

  useEffect(() => {
    if (editorRef.current) {
      FroalaEditor.DefineIcon('highlight', {NAME: 'star'});
      FroalaEditor.RegisterCommand('highlight', {
        title: 'Highlight',
        icon: 'highlight',
        focus: true,
        undo: true,
        refreshAfterCallback: true,
        callback: function () {
          this.html.insert(''   this.selection.text()   '');
        }
      });
    }
  }, []);

  const config = {
    toolbarButtons: ['bold', 'italic', 'underline', '|', 'highlight'],
    placeholderText: 'Type here...'
  };

  return ;
};

export default MyEditor;

Este componente de React incluye nuestro editor modificado, lo que facilita su uso en su aplicación React.

Concluyendo

Los editores HTML WYSIWYG son excelentes herramientas para crear contenido. Además, cuando los cambias para adaptarlos a tus necesidades, se vuelven aún mejores. Al agregar nuevos botones, cambiar su apariencia y adaptarlos a tu proyecto, puedes crear una herramienta de edición perfecta.

Recuerde, el objetivo es hacer que el editor funcione correctamente para usted. Con algunos cambios inteligentes, puedes convertir un buen editor en uno excelente que se adapte perfectamente a tu trabajo.

¡Entonces, adelante y pruébalo! Cambie su editor HTML WYSIWYG y vea cuánto mejor puede ser para sus usuarios.

Esta publicación se publicó inicialmente en el blog de Froala.