Téléchargement vue document editor - Téléchargement du code source vue document editor

vue document editor

Autres ressources

v2.3.2 (Vue3)

Télécharger

Vue-Document-Editor est un éditeur de texte riche construit sur Vue.js, en utilisant l'implémentation du navigateur contenu natif et une ruine JavaScript pour diffuser du contenu sur des pages de la taille du papier. Il est principalement conçu pour permettre aux modifications ciblées des documents pré-formés à l'aide de HTML ou de modèles interactifs .

Ce package n'a pas l'intention de remplacer un éditeur de documents approprié par des fonctionnalités complètes. Si vous recherchez un puissant traitement de texte, consultez Ckeditor pour VUE.js ou Collabora Online Development Edition.

Caractéristiques

Voir la démo en direct

Utilisez des composants Vue.js comme modèles de page interactifs
Division de la page mot par mot ( toujours expérimental - uniquement pour le contenu HTML simple )
Imprimé natif compatible
Format de document dynamique et marges en millimètres
Superpositions de page personnalisées (en-têtes, pieds de page, numéros de page)
Pauses de page
Modes d'affichage Smart Zoom et Page
Calcule le style de texte en position de caret
Migré vers vue.js 3.x (à utiliser avec Vue 2.x, sélectionnez la version de la bibliothèque 1.x)

Ce package n'inclut aucune barre d'outils. La démo comprend Vue-File-Toolbar-MENU pour la barre d'outils.

Installation

Dans votre projet Vue.js 3.x:

 npm install vue-document-editor

Dans votre projet Vue.js 2.x:

 npm install vue-document-editor@1

Si vous préférez les fichiers statiques, importez des actifs à partir du dossier `dist`

Exemple de base

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 >

même exemple à l'aide de fichiers statiques chargés d'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 >

même exemple à l'aide de fichiers statiques chargés d'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 >

Exemple complet

Voir le fichier Demo.vue et le fichier invoicetemplate.ce.vue correspondant à la démo en direct.

API

Pour la liste des accessoires, des données et des variables de style: lisez l'API .

Problèmes / limitations connus

UNDO / REDO : Native Undo / Redo doit être réécrit car le mécanisme de division modifie le contenu HTML à chaque entrée, donc le navigateur est perdu. Vous devez l'implémenter vous-même en regardant des mises à jour content et en les stockant dans une pile, puis en les restaurant. Demo.vue implémente cela. De plus, vos modèles interactifs doivent avoir une gestion de l'annulation / rénover personnalisée si leurs champs modifiables ne sont pas synchronisés avec le content .
Performances : Pour l'instant, les grands textes doivent être divisés en paragraphes multiples et les grands numéros de page peuvent ralentir l'ensemble du document (voir numéro 14).
Safari Print : Safari ajoute des marges d'impression à moins que vous ne choisissiez un format papier sans bordure dans la boîte d'impression. Cela doit être fait manuellement. Je suppose qu'il n'y a pas encore de solution de contournement pour ce problème.
Tables, images : le placement et le dimensionnement des images / tableaux ne sont pas inclus. Vous pouvez l'implémenter spécifiquement pour vos besoins. Cependant, les lignes de table se divisent bien sur plusieurs pages.
La fractionnement des pages ne fonctionne pas avec les modèles de page Vue : cette bibliothèque ne peut pas agir sur le contenu géré par Vue (comme les modèles de page .vue), car alors Vue est perdu et les pages de modèle ne sont plus interactives. Le seul choix que vous avez est d'écrire un HTML ordinaire dans le contenu au lieu d'utiliser des modèles .vue. Vous pouvez faire de l'interactivité en utilisant des éléments HTML avec les attributs contenteditable="false" et onclick="..." contenant votre propre code JavaScript.