vue document editor

O Vue-Document-Editor é um editor de texto rico construído no topo do vue.js, usando a implementação do navegador contentável nativo e alguns truques JavaScript para espalhar o conteúdo sobre as páginas do tamanho de papel. Ele é projetado principalmente para permitir modificações direcionadas para documentos pré-formatados usando modelos HTML ou interativos .

Este pacote não pretende substituir um editor de documentos adequado pela funcionalidade completa. Se você está procurando um poderoso processador de texto, consulte o CKeditor para o vue.js ou a Collabora Online Development Edition.

Características

Veja a demonstração ao vivo

• Use os componentes vue.js como modelos de página interativa
• Divisão de página de palavras por palavra ( ainda experimental-apenas para conteúdo HTML simples )
• Impressão nativa Compatível
• Formato de documentos dinâmicos e margens em milímetros
• Sobreposições de página personalizadas (cabeçalhos, rodapés, números de página)
• Quebras de página
• Modos de exibição de zoom e página inteligentes
• Calcula o estilo de texto na posição intermediária
• Migrou para o vue.js 3.x (para usar com o vue 2.x, selecione a versão 1.x da biblioteca)

Este pacote não inclui nenhuma barra de ferramentas. A demonstração apresenta-se-menu do Vue-File-File-Toolbar para a barra de ferramentas.

Instalação

Em seu projeto Vue.js 3.x:

 npm install vue-document-editor

Em seu projeto Vue.js 2.x:

 npm install vue-document-editor@1

Se você preferir arquivos estáticos, importe ativos da pasta dist

Exemplo 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 >

Mesmo exemplo usando arquivos estáticos carregados com um 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 >

Mesmo exemplo usando arquivos estáticos carregados com um 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 > 

Exemplo completo

Consulte o arquivo Demo.Vue e o arquivo Invoicetemplate.ce.vue correspondente à demonstração ao vivo.

API

Para a lista de adereços, variáveis de dados e estilo: leia a API .

Questões / limitações conhecidas

• Desfazer / refazer : A desfazer / refazer nativa precisa ser reescrita à medida que o mecanismo de divisão modifica o conteúdo HTML em todas as entradas, para que o navegador seja perdido. Você precisa implementá -lo assistindo a atualizações content e armazenando -as em uma pilha e depois restaurando -as. Demo.vue implementa isso. Além disso, seus modelos interativos precisam ter um gerenciamento de desfazer/refazer personalizado se seus campos editáveis não forem sincronizados com o content .
• Desempenho : Por enquanto, textos grandes devem ser divididos em vários parágrafos e grandes números de páginas podem desacelerar o documento inteiro (consulte a edição 14).
• Impressão do Safari : o Safari adiciona margens de impressão, a menos que você escolha um formato de papel sem fronteiras na caixa de impressão. Isso tem que ser feito manualmente. Eu acho que ainda não há solução alternativa para esse problema.
• Tabelas, imagens : a colocação e o dimensionamento da imagem/tabela não estão incluídos. Você pode implementá -lo especificamente para suas necessidades. No entanto, as linhas de tabela se dividem bem em várias páginas.
• A divisão da página não funciona com os modelos de página do VUE : esta biblioteca não pode agir no conteúdo gerenciado pelo VUE (como modelos de página .vue), porque o Vue é perdido e as páginas do modelo não são mais interativas. A única opção que você tem é escrever HTML simples no conteúdo em vez de usar modelos .vue. Você pode fazer interatividade usando elementos HTML com os atributos contenteditable="false" e onclick="..." contendo seu próprio código JavaScript.

Desenvolvimento de projetos

• npm run serve COMPILES, SERVES E DEMO RELOADES HOT RELOADS PARA DESENVOLVIR
• npm run build Compile e minifica arquivos de produção e demonstração

Licenciamento

Copyright (C) 2020 Romain Lamothe, MIT Licença