vue document editor

Der Vue-Dokument-Eduitor ist ein Rich-Text-Editor, der auf Vue.js aufgebaut ist und die native inhaltliche Browser-Implementierung und einige JavaScript-Tricks verwendet, um Inhalte über Papierseiten zu verbreiten. Es ist hauptsächlich ausgelegt, um gezielte Änderungen an vorformatierten Dokumenten mithilfe von HTML- oder interaktiven Vorlagen zu ermöglichen.

Dieses Paket beabsichtigt nicht, einen ordnungsgemäßen Dokumenteditor durch vollständige Funktionalität zu ersetzen. Wenn Sie nach einem leistungsstarken Textverarbeitungsprogramm suchen, schauen Sie sich CKEDITOR für VUE.JS oder COUTORA Online Development Edition an.

Merkmale

Siehe Live -Demo

• Verwenden Sie Vue.js -Komponenten als interaktive Seitenvorlagen
• Wort-für-Wort-Seitenaufteilung ( noch experimentell-nur für einfache HTML-Inhalte )
• Native Print kompatibel
• Dynamisches Dokumentformat und Ränder in Millimetern
• Benutzerdefinierte Seitenüberlagerungen (Header, Fußzeilen, Seitenzahlen)
• Seitenbrüche
• Smart Zoom und Seitenanzeigemodi
• Berechnet den Textstil in der Pflegeposition
• Migriert nach Vue.js 3.x (Um mit Vue 2.x zu verwenden, wählen Sie Bibliothek Version 1.x).

Dieses Paket enthält keine Symbolleiste. Die Demo verfügt über Vue-File-Toolbar-Menu für die Symbolleiste.

Installation

In Ihrem Vue.js 3.x -Projekt:

 npm install vue-document-editor

In Ihrem Vue.js 2.x -Projekt:

 npm install vue-document-editor@1

Wenn Sie statische Dateien bevorzugen, importieren Sie Vermögenswerte aus dem dist -Ordner

Grundlegendes Beispiel

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 >

Gleiches Beispiel mit statischen Dateien, die mit einem CDN geladen wurden (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 >

Gleiches Beispiel mit statischen Dateien, die mit einem CDN geladen wurden (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 > 

Vollständiges Beispiel

Siehe die Demo.vue -Datei und die Datei invoicetemplate.ce.vue, die der Live -Demo entspricht.

API

Für die Liste der Requisiten, Daten und Stylingvariablen: Lesen Sie die API .

Bekannte Probleme / Einschränkungen

• Rückgängig gemacht / redo : Native rückgängig gemacht / redo muss umgeschrieben werden, da der Split -Mechanismus den HTML -Inhalt bei jedem Eingang modifiziert, sodass der Navigator verloren geht. Sie müssen es selbst implementieren, indem Sie content ansehen und in einem Stapel speichern und dann wiederherstellen. Demo.vue implementiert dies. Auch Ihre interaktiven Vorlagen müssen über eine benutzerdefinierte Rückgängig-/Wiederherstellungsverwaltung verfügen, wenn ihre bearbeitbaren Felder nicht mit dem content synchronisiert werden.
• Leistung : Im Moment müssen große Texte in mehrere Absätze unterteilt werden, und große Seitenzahlen können das gesamte Dokument verlangsamen (siehe Ausgabe 14).
• Safari Print : Safari fügt Druckmargen hinzu, es sei denn, Sie wählen ein randloses Papierformat in der Druckbox. Dies muss manuell erfolgen. Ich denke, es gibt noch keine Problemumgehung für dieses Problem.
• Tabellen, Bilder : Bild-/Tabellenplatzierung und -größe sind nicht enthalten. Sie können es speziell für Ihre Anforderungen implementieren. Die Tabellenreihen sind jedoch auf mehreren Seiten einwandfrei aufgeteilt.
• Die Seitenaufteilung funktioniert nicht mit Vue -Seitenvorlagen : Diese Bibliothek kann nicht auf den von VUE verwalteten Inhalt (wie .vue -Seitenvorlagen) wirken, da Vue verloren geht und die Vorlagenseiten nicht mehr interaktiv sind. Die einzige Wahl, die Sie haben, ist das Schreiben einfacher HTML in den Inhalt, anstatt .vue -Vorlagen zu verwenden. Sie können Interaktivität durchführen, indem Sie HTML -Elemente mit den Attributen contenteditable="false" und onclick="..." verwenden, die Ihren eigenen JavaScript -Code enthält.

Projektentwicklung

• npm run serve Compiles, Dienste und Heißreladememo für die Entwicklung
• npm run build Compiles und Minification Produktionsdateien und Demo

Lizenzierung

Copyright (C) 2020 Romain Lamothe, MIT -Lizenz