{"id":28265,"date":"2021-05-23T15:17:00","date_gmt":"2021-05-23T12:17:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28265"},"modified":"2021-10-17T16:49:10","modified_gmt":"2021-10-17T13:49:10","slug":"los-3-mejores-editores-de-texto-enriquecido-gratuitos-para-aplicaciones-web","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/los-3-mejores-editores-de-texto-enriquecido-gratuitos-para-aplicaciones-web\/","title":{"rendered":"Los 3 mejores editores de texto enriquecido gratuitos para aplicaciones web"},"content":{"rendered":"

\u00bfEst\u00e1 buscando un editor de texto enriquecido gratuito para su aplicaci\u00f3n web? Un editor WYSIWYG (lo que ve es lo que obtiene) le permite ingresar contenido descriptivo junto con elementos HTML. En este art\u00edculo, analizamos los 3 mejores editores de texto enriquecido gratuitos que son populares y f\u00e1ciles de instalar.<\/p>\n

Hay varios editores WYSIWYG disponibles en Internet. Prob\u00e9<\/strong> algunos de los editores y eleg\u00ed los 3 mejores editores HTML WYSIWYG gratuitos que son: CKEditor, TinyMCE y Trix<\/strong>.<\/p>\n

\u00bfPor qu\u00e9 necesita un editor de texto enriquecido?<\/h3>\n

Uno puede preguntarse por qu\u00e9 deber\u00eda usar el editor de texto enriquecido. La respuesta es simple. En el \u00e1rea de texto, no es f\u00e1cil ni f\u00e1cil de usar ingresar grandes cantidades de contenido. Es muy dif\u00edcil ingresar diferentes tipos de elementos HTML en el \u00e1rea de texto. Envolver el contenido dentro de los elementos y mantener su jerarqu\u00eda es dif\u00edcil en el \u00e1rea de texto.<\/p>\n

Para simplificar este problema, tenemos la opci\u00f3n 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.<\/p>\n

CKEditor – Editor de texto web<\/h3>\n

CKEditor<\/a> es un editor de texto enriquecido gratuito popular y de uso com\u00fan. Este editor est\u00e1 dise\u00f1ado para simplificar la creaci\u00f3n de contenido de sitios web.<\/p>\n

Para utilizar CKEditor, primero debe incluir su archivo JS. Han proporcionado 3 tipos de paquetes: b\u00e1sico, est\u00e1ndar y completo. Puede elegir cualquiera de los paquetes seg\u00fan los requisitos. Hay diferentes archivos JS disponibles para cada paquete.<\/p>\n

Aqu\u00ed est\u00e1 el enlace para los paquetes de CKEditor <\/a>http:\/\/ckeditor.com\/download<\/a><\/p>\n

En la p\u00e1gina anterior, se puede elegir cualquier paquete y obtener una ruta de origen JS de un paquete.<\/p>\n

\"Los<\/a><\/p>\n

Por ejemplo, uso el paquete est\u00e1ndar, por lo que mi c\u00f3digo ser\u00e1 el siguiente.<\/p>\n

<!DOCTYPE html>\n<html>\n\u00a0\u00a0\u00a0\u00a0<head>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<meta charset=\"utf-8\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<title>CKEditor<\/title>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script src=\"\/\/cdn.ckeditor.com\/4.14.1\/standard\/ckeditor.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<\/head>\n\u00a0\u00a0\u00a0\u00a0<body>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<textarea name=\"editor1\"><\/textarea>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0CKEDITOR.replace( 'editor1' );\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/script>\n\u00a0\u00a0\u00a0\u00a0<\/body>\n<\/html><\/code><\/pre>\n
El c\u00f3digo anterior generar\u00e1 un editor que se parece a la captura de pantalla a continuaci\u00f3n.<\/p>\n
\"Los<\/a><\/p>\n
TinyMCE – Editor WYSIWYG avanzado<\/h3>\n
TinyMCE<\/a> es uno de los editores de c\u00f3digo abierto m\u00e1s utilizados. Marcas conocidas est\u00e1n utilizando este editor en su desarrollo principal.<\/p>\n
La instalaci\u00f3n del editor TinyMCE es muy f\u00e1cil. El siguiente c\u00f3digo reemplaza textarea con el editor TinyMCE WYSIWYG.<\/p>\n
<!DOCTYPE html>\n<html>\n<head>\n\u00a0\u00a0<script src=\"https:\/\/cdn.tiny.cloud\/1\/no-api-key\/tinymce\/5\/tinymce.min.js\" referrerpolicy=\"origin\"><\/script>\n\u00a0\u00a0<script>tinymce.init({ selector:'textarea' });<\/script>\n<\/head>\n<body>\n\u00a0\u00a0<textarea>Next, get a free Tiny Cloud API key!<\/textarea>\n<\/body>\n<\/html><\/code><\/pre>\n
A continuaci\u00f3n se muestra la captura de pantalla de un editor que se genera con el c\u00f3digo anterior.<\/p>\n
\"Los<\/a><\/p>\n
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\u00f3n, corrector ortogr\u00e1fico, tabla, recuento de palabras, etc. en la barra de herramientas de un editor. Obtendr\u00e1 la lista completa de todas las funciones de la barra de herramientas disponibles en su documentaci\u00f3n<\/a>.<\/p>\n
Trix: un editor WYSIWYG de c\u00f3digo abierto<\/h3>\n
Trix<\/a> es otro editor de texto enriquecido de c\u00f3digo abierto de Basecamp. Como este editor se usa en Basecamp, millones de usuarios ya lo est\u00e1n usando. Escrib\u00ed un art\u00edculo separado sobre el editor de Trix, as\u00ed que consulte este art\u00edculo<\/a> que explica c\u00f3mo usar el editor de Trix en sus sitios web.<\/p>\n
Espero que tengas un conocimiento b\u00e1sico de los populares editores de texto enriquecido gratuitos. Comparta sus pensamientos y sugerencias en una secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n
Art\u00edculos relacionados<\/h4>\n