Editor - Configurar TinyMCE en tu proyecto

 Configurar TinyMCE en tu proyecto puede ser bastante sencillo con los pasos adecuados. Aquí te doy una guía para integrarlo y personalizarlo según tus necesidades: 

web oficial: https://www.tiny.cloud/

1. Instalar TinyMCE

Puedes agregar TinyMCE a tu proyecto usando una de estas opciones:

• CDN (más fácil y rápido): Incluye el siguiente script en tu archivo HTML:

<script referrerpolicy="origin" src="https://cdn.tiny.cloud/1/no-origin/tinymce/7.7.0-139/tinymce.min.js"></script>

• Instalación local: Descarga los archivos de TinyMCE desde su  sitio web oficial y guárdalos en tu proyecto.
• Usando un gestor de paquetes como npm: Si trabajas con un entorno basado en Node.js, instálalo con:

npm install tinymce 

 

2. Inicializar TinyMCE

Después de incluir el script, debes inicializarlo. Agrega lo siguiente en un script de tu proyecto:

tinymce.init({
  selector: '#mi-textarea', // Selector del elemento que usará el editor.
  plugins: 'autolink lists link image charmap print preview', // Plugins que quieras usar.
  toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | outdent indent | link image', // Herramientas en la barra.
  menubar: false, // Mostrar u ocultar el menú.
  height: 400, // Altura del editor.
});

• selector: Especifica el elemento (por ejemplo, un <textarea> o <div>) que convertirá en editor.
• plugins: Lista de plugins para funcionalidades como agregar imágenes, enlaces, listas, etc.
• toolbar: Configura las herramientas visibles en la barra.

 

3. Configuraciones adicionales

TinyMCE es muy flexible. Puedes personalizar más aspectos como:

a) Establecer el idioma: editor en español

tinymce.init({
  selector: '#mi-textarea',
  language: 'es', // Cambia el idioma del editor.
});

b) Cambiar la apariencia (skins): 

• Puedes personalizar el tema visual del editor:

tinymce.init({
  selector: '#mi-textarea',
  skin: 'oxide-dark', // Tema oscuro.
  content_css: 'dark', // CSS del contenido.
});

c) Cargar contenido desde un servidor (imágenes, archivos, etc.): 

• Puedes configurar URLs específicas para los servicios:

tinymce.init({
  selector: '#mi-textarea',
  images_upload_url: '/upload', // Endpoint para subir imágenes.
  file_picker_callback: function (callback, value, meta) {
    // Puedes definir cómo seleccionar archivos aquí.
  },
});

 

4. Opciones avanzadas  

•  Si usas el CDN de TinyMCE, puedes configurar la propiedad baseURL para garantizar que el editor cargue los recursos correctamente:

tinymce.baseURL = "https://cdn.tiny.cloud/1/no-origin/tinymce/7.7.0-139";

• También puedes usar claves API si estás utilizando la versión en la nube de TinyMCE. Regístrate en  Tiny Cloud para obtener una clave y úsala así:
  

tinymce.init({
  selector: '#mi-textarea',
  api_key: 'tu-api-key',
});

 

5. Probar y ajustar  

Con estas configuraciones iniciales, puedes integrar TinyMCE en tu proyecto. A medida que desarrollas, puedes ir ajustando los plugins, herramientas y comportamientos según las necesidades de tu aplicación. 

 

Configuraciones avanzadas:  

Plugins for TinyMCE

Sitio oficial: https://www.tiny.cloud/docs/tinymce/latest/plugins/

 

• Quick Toolbars plugin

  https://www.tiny.cloud/docs/tinymce/latest/quickbars/

 El plugin Barra de herramientas rápida añade tres barras de herramientas contextuales:

• Quick Selection toolbar (Barra de herramientas Selección rápida): se muestra al seleccionar texto y ofrece botones de formato como negrita, cursiva y enlace.
• Quick Insert toolbar (Barra de herramientas Inserción rápida): se muestra al añadir una nueva línea y ofrece botones para insertar objetos como tablas e imágenes.
• Quick Image toolbar (Barra de herramientas Imagen rápida): se muestra al seleccionar una imagen o figura y ofrece botones de formato, como opciones de alineación.

Este plugin también añade tres nuevos botones a la barra de herramientas:

• Quick Link - (Enlace rápido): un formulario integrado para crear y editar enlaces sin diálogo.
• Quick Image (Imagen rápida): solicita al usuario que seleccione una imagen local para cargar.
• Quick Table (Tabla rápida): inserta una tabla de 2x2 sin solicitar al usuario que seleccione el número de filas y columnas.