Tiptap/vue-2
Estaba buscando un editor de texto para Vue.js y encontré algunas soluciones que no me satisfacían realmente. El editor debería ser fácil de extender y no basarse en viejas dependencias como jQuery. Para React ya existe un gran editor llamado Slate.js, que impresiona por su modularidad. Me encontré con Prosemirror y decidí construir sobre él. Prosemirror es un conjunto de herramientas para construir editores de texto enriquecido que ya se utilizan en muchas empresas conocidas como Atlassian o New York Times.
Con los componentes sin renderización tendrás un control (casi) total sobre el marcado y el estilo. No quiero decirte cómo debe ser un menú o dónde debe ser renderizado en el DOM. Todo eso depende de ti. También hay un buen artículo sobre los componentes sin renderizar por Adam Wathan.
Tiptap npm
Ejemplo de uso de tiptap 2 como componente de Vue 3 sin ser completamente renderizado, para que puedas ver cómo usarlo dentro de tus propios componentes o incluso usarlo de inmediato. Se puede importar como un componente de Vue 3, y puedes ver en el directorio de ejemplo cómo se usaría dentro de tu aplicación.
Nota: ahora tiptap tiene sus propios ejemplos y componentes para diferentes frameworks (incluyendo vue 2 y vue 3), así que quizás deberías echar un vistazo al paquete oficial @tiptap/vue-3. Este paquete no se actualizará más.
Tiptap/starter-kit
Desarrollador de un dispositivo de micropagos diseñado para aumentar las ventas y aceptar donaciones. El dispositivo de la empresa procesa tarjetas de pago sin contacto y monederos móviles cuando la tarjeta o el monedero se encuentran dentro de un rango definido y los importes se graban en la carcasa del dispositivo y no se modifican nunca durante la vida útil del mismo, lo que permite a las organizaciones benéficas, a los organismos de recaudación de fondos, a las pequeñas y medianas agencias de transporte, a los lugares de celebración de eventos y a las soluciones de vending aceptar donaciones por impulso y pequeños pagos en cualquier momento, en cualquier lugar y por cualquier persona, sin necesidad de hardware adicional, sin aplicaciones propietarias y sin necesidad de registrar una cuenta comercial.
Tabla Tiptap
});Para simplificar las cosas, los vídeos se representarán con su propia etiqueta <video>. Para ello, le decimos a Tiptap que esta extensión se aplica a la etiqueta video, utilizando parseHTML(). const Video = Node.create({
});Así, en la salida HTML <video> activará la extensión de vídeo. <video src=”https://www.youtube.com/embed/dQw4w9WgXcQ”></video> También necesitarás un atributo src para poder mostrar el vídeo correcto. Puedes añadir atributos con addAttributes(), así que vamos a añadir un atributo “src” allí. const Video = Node.create({
});¡Genial, ahora tenemos una extensión de vídeo! La extensión no hace nada todavía, porque el elemento <video> no existe en Tiptap. A continuación, arreglaremos eso, añadiendo una vista de nodo. Me doy cuenta de que el elemento vídeo existe en HTML, pero lo que estamos construyendo aquí es ligeramente diferente. Si también quieres que tu HTML funcione con el elemento de vídeo nativo, entonces podrías ajustar tu extensión para usar una etiqueta de incrustación <embed data-type=”video” src=”… por ejemplo parseHTML() {
},Pero no planeo tener cargas de vídeo, sólo incrustaciones (y sólo incrustaciones de vídeo), así que estoy feliz de reutilizar el elemento de vídeo para esta extensión. Aquí está el código hasta ahora: import { Node, mergeAttributes } from ‘@tiptap/core’
