Los 3 mejores editores de texto enriquecido gratuitos para aplicaciones web
¿Está buscando un editor de texto enriquecido gratuito para su aplicación web? Un editor WYSIWYG (lo que ve es lo que obtiene) le permite ingresar contenido descriptivo junto con elementos HTML. En este artículo, analizamos los 3 mejores editores de texto enriquecido gratuitos que son populares y fáciles de instalar.
Hay varios editores WYSIWYG disponibles en Internet. Probé algunos de los editores y elegí los 3 mejores editores HTML WYSIWYG gratuitos que son: CKEditor, TinyMCE y Trix.
¿Por qué necesita un editor de texto enriquecido?
Uno puede preguntarse por qué debería usar el editor de texto enriquecido. La respuesta es simple. En el área de texto, no es fácil ni fácil de usar ingresar grandes cantidades de contenido. Es muy difícil ingresar diferentes tipos de elementos HTML en el área de texto. Envolver el contenido dentro de los elementos y mantener su jerarquía es difícil en el área de texto.
Para simplificar este problema, tenemos la opción de utilizar un editor de texto enriquecido. Estos editores WYSIWYG proporcionan una buena interfaz de usuario y una experiencia de usuario en lugar de textarea.
CKEditor – Editor de texto web
CKEditor es un editor de texto enriquecido gratuito popular y de uso común. Este editor está diseñado para simplificar la creación de contenido de sitios web.
Para utilizar CKEditor, primero debe incluir su archivo JS. Han proporcionado 3 tipos de paquetes: básico, estándar y completo. Puede elegir cualquiera de los paquetes según los requisitos. Hay diferentes archivos JS disponibles para cada paquete.
Aquí está el enlace para los paquetes de CKEditor http://ckeditor.com/download
En la página anterior, se puede elegir cualquier paquete y obtener una ruta de origen JS de un paquete.
Por ejemplo, uso el paquete estándar, por lo que mi código será el siguiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</body>
</html>El código anterior generará un editor que se parece a la captura de pantalla a continuación.
TinyMCE – Editor WYSIWYG avanzado
TinyMCE es uno de los editores de código abierto más utilizados. Marcas conocidas están utilizando este editor en su desarrollo principal.
La instalación del editor TinyMCE es muy fácil. El siguiente código reemplaza textarea con el editor TinyMCE WYSIWYG.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free Tiny Cloud API key!</textarea>
</body>
</html>A continuación se muestra la captura de pantalla de un editor que se genera con el código anterior.
Este editor proporciona un amplio conjunto de barras de herramientas. El usuario puede agregar funciones (complementos) como emociones, ancla, modo de pantalla completa, imagen, impresión, corrector ortográfico, tabla, recuento de palabras, etc. en la barra de herramientas de un editor. Obtendrá la lista completa de todas las funciones de la barra de herramientas disponibles en su documentación.
Trix: un editor WYSIWYG de código abierto
Trix es otro editor de texto enriquecido de código abierto de Basecamp. Como este editor se usa en Basecamp, millones de usuarios ya lo están usando. Escribí un artículo separado sobre el editor de Trix, así que consulte este artículo que explica cómo usar el editor de Trix en sus sitios web.
Espero que tengas un conocimiento básico de los populares editores de texto enriquecido gratuitos. Comparta sus pensamientos y sugerencias en una sección de comentarios a continuación.
Artículos relacionados
- Cómo instalar y usar CKEditor en Laravel
- Cómo instalar y usar TinyMCE – WYSIWYG HTML Editor en Laravel
- Extensión FTP / SFTP para Visual Studio Code