vue document editor

Vue-Document-editor es un editor de texto rico construido en la parte superior de Vue.js, utilizando la implementación nativa del navegador contento y algunos trucos de JavaScript para difundir contenido sobre páginas del tamaño de un papel. Está diseñado principalmente para permitir modificaciones específicas a documentos preformateados utilizando HTML o plantillas interactivas .

Este paquete no tiene la intención de reemplazar un editor de documentos adecuado con una funcionalidad completa. Si está buscando un poderoso procesador de textos, consulte Ckeditor para Vue.js o colabora en línea de desarrollo en línea.

Características

Ver demostración en vivo

• Utilice los componentes Vue.js como plantillas de página interactivas
• División de página de palabra por palabra ( todavía experimental, solo para contenido html simple )
• Impresión nativa compatible
• Formato de documento dinámico y márgenes en milímetros
• Superposiciones de página personalizadas (encabezados, pies de página, números de página)
• Descansos de la página
• Modos de visualización de zoom y página inteligente
• Calcula el estilo de texto en la posición de caret
• Migrado a vue.js 3.x (para usar con Vue 2.x, seleccione Biblioteca Versión 1.x)

Este paquete no incluye ninguna barra de herramientas. La demostración presenta Vue-File-Toolbar-Menu para la barra de herramientas.

Instalación

En su proyecto Vue.js 3.x:

 npm install vue-document-editor

En su proyecto Vue.js 2.x:

 npm install vue-document-editor@1

Si prefiere archivos estáticos, importe activos desde la carpeta dist

Ejemplo básico

MyComponent.vue

< template >
  < div style = " font-family : Avenir, sans-serif " >
    < vue-document-editor v-model:content = " content " /> <!-- Vue 3 syntax -->
    <!-- <vue-document-editor :content.sync="content" /> --> <!-- Vue 2 syntax -->
  </ div >
</ template >

< script >
import VueDocumentEditor from ' vue-document-editor '

export default {
  components : { VueDocumentEditor },
  data () {
    return { 
      content : [ " <h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows. " ]
    }
  }
}
</ script >

El mismo ejemplo usando archivos estáticos cargados con un CDN (Vue 3)

 < html >
< head >
  < script src =" https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js " > </ script >
  < script src =" https://cdn.jsdelivr.net/npm/vue-document-editor@2/dist/VueDocumentEditor.umd.min.js " > </ script >
  < link href =" https://cdn.jsdelivr.net/npm/vue-document-editor@2/dist/VueDocumentEditor.css " rel =" stylesheet " >
</ head >
< body >
  < div id =" app " >
    < div style =" font-family: Avenir, sans-serif " >
      < vue-document-editor v-model:content =" content " />
    </ div >
  </ div >
  < script >
  const app = Vue . createApp ( {
    components : { VueDocumentEditor } ,
    data ( ) {
      return { 
        content : [ "<h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows." ]
      }
    }
  } ) . mount ( '#app' ) ;
  </ script >
</ body >
</ html >

El mismo ejemplo usando archivos estáticos cargados con un CDN (Vue 2)

 < html >
< head >
  < script src =" https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js " > </ script >
  < script src =" https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.umd.min.js " > </ script >
  < link href =" https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.css " rel =" stylesheet " >
</ head >
< body >
  < div id =" app " >
    < div style =" font-family: Avenir, sans-serif " >
      < vue-document-editor :content.sync =" content " />
    </ div >
  </ div >
  < script >
  var app = new Vue ( {
    el : '#app' ,
    components : { VueDocumentEditor } ,
    data ( ) {
      return { 
        content : [ "<h1>Hello!</h1>Fill this page with text and new pages will be created as it overflows." ]
      }
    }
  } )
  </ script >
</ body >
</ html > 

Ejemplo completo

Consulte el archivo demo.vue y el archivo invoicetEmplate.ce.vue correspondiente a la demostración en vivo.

API

Para la lista de accesorios, datos y variables de estilo: lea la API .

Problemas / limitaciones conocidos

• Deshacer / rehacer : la deshacer / rehacer nativo debe reescribirse ya que el mecanismo dividido modifica el contenido HTML en cada entrada, por lo que se pierde el navegador. Debe implementarlo usted mismo viendo actualizaciones content y almacenándolas en una pila y luego restaurándolas. Demo.vue implementa esto. Además, sus plantillas interactivas deben tener una administración personalizada de deshacer/rehacer si sus campos editables no están sincronizados con el content .
• Rendimiento : por ahora, los textos grandes deben dividirse en múltiples párrafos y los números de página grandes pueden ralentizar todo el documento (ver número 14).
• Impresión de Safari : Safari agrega márgenes de impresión a menos que elija un formato de papel sin bordes en el cuadro de impresión. Esto debe hacerse manualmente. Supongo que todavía no hay solución para este problema.
• Tablas, imágenes : la colocación y el tamaño de la tabla de la imagen/tabla no está incluida. Puede implementarlo específicamente para sus necesidades. Sin embargo, las filas de tabla se dividen bien en varias páginas.
• La división de la página no funciona con plantillas de página VUE : esta biblioteca no puede actuar sobre el contenido administrado por Vue (como las plantillas de página .Vue), porque entonces Vue se pierde y las páginas de plantilla ya no son interactivas. La única opción que tiene es escribir HTML simple en el contenido en lugar de usar plantillas .Vue. Puede hacer interactividad utilizando elementos HTML con los atributos contenteditable="false" y onclick="..." que contiene su propio código JavaScript.

Desarrollo de proyectos

• npm run serve Compile, Serves y Hot-Releges Demo for Development
• npm run build Compila y minifica archivos de producción y demostración

Licencia

Copyright (c) 2020 Romain Lamothe, Licencia del MIT