@colegium_dev/vue3-tinymce

@colegium/vue3-tinymce

Bienvenidos al proyecto de investigación y desarrollo para TinyMCE en forma de componentes de Vue 3 para Colegium desarrollado en base a la aplicación base pero con capacidades para compilación en librería de Vite.js.

Motivación

La motivación principal de la investigación y desarrollo de este proyecto es crear una versión de TinyMCE que funcione correctamente tanto en el ambito de desarrollo, como en otros Web Components creando un componente que haga envoltura de la dependencia oficial usando iframes. Esta decisión fue tomada debido a las limitaciones técnicas de trabajar con TinyMCE en Web Components.

Este desarrollo se pensó originalmente para el módulo de Mensajes de Colegium Cloud, ofreciendo escalabilidad a través de la parametrización, y seguridad usando protocolos de comunicación seguros y prácticas de desarrollo para encriptación de origen. Sin embargo, está preparada para ser implementada en cualquier módulo basado en Vue 3.

Instalación

Primero debemos configurar globalmente nuestro git para que el registro de paquetes apunte a Colegium Verdaccio. Posteriormente, iniciar sesión. Si tienes dudas sobre esto, comunícate con César Gómez o Ángel Castillo.

Luego de cerciorarte que los pasos anteriores estén correctos, sólo debemos escribir en el terminal el siguiente comando dentro del proyecto que deseamos incluirlo:

pnpm add @colegium/vue3-tinymce.

Modo de uso

Simple

<script setup lang="ts">
import { ClgTiny } from '@colegium/vue3-tinymce'
</script>

<template>
  <section class="w-full">
    <ClgTiny />
  </section>
</template>

Completo

<script setup lang="ts">
import { ClgTiny } from '@colegium/vue3-tinymce'

const content = ref('Hello Colegium!')
const plugins = ref('advlist autolink link image lists charmap preview')
const toolbar = ref('undo redo | styles | bold italic | link image')
</script>

<template>
  <section class="w-full">
    <ClgTiny
      v-model="content"
      label="Prueba de label"
      readonly
      required
      iframeStyle="w-full h-full"
      iframeContainerStyle="border border-gray-100 rounded-lg"
      :plugins="plugins"
      :toolbar="toolbar"
      :contextmenu="false"
    />
  </section>
</template>

Propiedades

interface PropsType {
  /**
   * modelValue - Content of editor
   *
   * Should be used via v-model. See: https://vuejs.org/guide/components/v-model.html
   *
   * @default ''
   */
  modelValue: string

  /**
   * Component label
   *
   * @default ''
   */
  label?: string

  /**
   * Component required status
   *
   * @default false
   */
  required?: boolean

  /**
   * TinyMCE plugins option
   *
   * See: https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#plugins
   *
   * @default 'preview searchreplace autolink code visualblocks fullscreen image link media codesample table charmap pagebreak anchor insertdatetime advlist lists wordcount charmap quickbars emoticons'
   */
  plugins?: string | Array<string>

  /**
   * TinyMCE toolbar option
   *
   * See: https://www.tiny.cloud/docs/tinymce/6/toolbar-configuration-options/#toolbar
   *
   * @default 'undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | image link | outdent indent table | numlist bullist | forecolor backcolor removeformat | charmap emoticons | save print media | insertfile template  | ltr rtl'
   */
  toolbar?: string | Array<string> | false

  /**
   * TinyMCE contextmenu option
   *
   * See: https://www.tiny.cloud/docs/tinymce/6/contextmenu/#contextmenu
   *
   * @default false
   */
  contextmenu?: string | Array<string> | false

  /**
   * TinyMCE readonly option
   *
   * See: https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#readonly
   *
   * @default false
   */
  readonly?: boolean

  /**
   * TinyMCE placeholder option
   *
   * See: https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#adding-placeholder-content-to-the-editor
   *
   * @default 'Escribe tu mensaje aquí'
   */
  placeholder?: boolean

  /**
   * Iframe style (with Tailwind)
   *
   * See: https://www.tailwindcss.com
   *
   * @default ''
   */
  iframeStyle?: string

  /**
   * Iframe container style (with Tailwind)
   *
   * See: https://www.tailwindcss.com
   *
   * @default 'border border-gray-100 rounded-lg'
   */
  iframeContainerStyle?: string
}

Eventos

const emit = defineEmits<{
  /**
   * Iframe onload event - Iframe is ready to use
   *
   * See: https://www.w3schools.com/jsref/event_onload.asp
   *
   */
  (e: 'load'): void
}>()

Desarrollo

Desde el root del proyecto escribir en el terminal pnpm dev:web. Esto es importante ya que debemos trabajar con la parte web para cualquier desarrollo. Para ver más detalles, ver el README del repositorio web. Debemos esperar a que este servicio inicie para luego, en otra pestaña o ventana de terminal, escribir, pnpm dev:pkg. Importante, esto se debe hacer así para el desarrollo del paquete (package), así podremos ver los cambios, tanto para web como para pkg, si tambien se desea hacer cambios en web.

Nota: Se necesita un archivo de ambiente (.env) que es importante para el funcionamiento correcto. Solicitarlo a César Gómez o Ángel Castillo. Obtenido el archivo de ambiente, colocarlo en la raíz de pkg.

A su vez, se debe modificar la variable reactiva url para que apunte a la url de la parte web. Por defecto, es const url = ref(import.meta.env.VITE_IFRAME_URL_DEV_DEMO), y este import.meta.env se encuentra en el .env. Por defecto, en desarrollo se trabaja con import.meta.env.VITE_IFRAME_URL_DEV, o también puedes configurar una URL.

A grandes rasgos, lo que estamos haciendo que ambas partes funcionen así:

Medidas de Seguridad

Muy pronto

Compilación y deploy

Desde el root del proyecto escribir en el terminal pnpm build:pkg, o en el repositorio package del monorepo, pnpm build.

Se generará una carpeta dist en el root de package con tres archivos: un cjs, un js y un d.ts; los tres son importantes para hacer la publicación de la versión.

Al generar esta versión, escribir pnpm version {major|minor|patch}, dependiendo de tipo de cambio realizado en el componente. Luego, pnpm publish

Nota: Para este ultimo paso, debes ser un usuario autorizado para publicar paquetes en Colegium Verdaccio.

Colaboradores

• Cesar Gómez

Colegium - Senior Frontend Team - 2023