Paper Size WYSIWYG Document Editor For Vue

Description:

A feature-rich paper-sized WYSIWYG rich text editor based on Vue.js and contenteditable element.

Features:

  • Use your Vue.js components as interactive page templates
  • Word-by-word page splitting with forward and backward propagation (still experimental)
  • Predefined page breaks
  • Native Print compatible
  • Dynamic document format and margins in millimeters
  • Custom page overlays (headers, footers, page numbers)
  • Smart zoom and page display modes
  • Computes text style at caret position

How to use it:

1. Import and register the editor.

import VueDocumentEditor from 'vue-document-editor'
export default {
  components: { VueDocumentEditor }
}

2. Add the document editor to your app.

<template>
  <div>
    <vue-document-editor :content.sync="content" />
  </div>
</template>
export default {
  components: { VueDocumentEditor },
  data () {
    return { 
      content: ["<h1>Default Content</h1>"]
    }
  }
}

3. Available props to customize the editor.

// This contains the initial content of the document that can be synced
// It must be an Array: each array item is a new set of pages containing the
// item (string or component). You can see that as predefined page breaks.
// See the Demo.vue file for a good usage example.
content: {
  type: Array,
  required: true
},
// Display mode of the pages
display: {
  type: String,
  default: "grid" // ["grid", "horizontal", "vertical"]
},
// Sets whether document text can be modified
editable: {
  type: Boolean,
  default: true
},
// Overlay function returning page headers and footers in HTML
overlay: Function,
// Pages format in mm (should be an array containing [width, height])
page_format_mm: {
  type: Array,
  default: () => [210, 297]
},
// Page margins in CSS
page_margins: {
  type: String,
  default: "10mm 15mm"
},
// Display zoom. Only acts on the screen display
zoom: {
  type: Number,
  default: 1.0
}

Preview:

Paper Size WYSIWYG Document Editor For Vue

Changelog:

v1.2.4 (03/17/2021)

  • Removing pages manually from the DOM now remove corresponding items from the content you provide
  • Adding data-page-idx to pages <div>s for custom user scripts convenience

v1.2.3 (03/09/2021)

  • Removing useless surrounding <div>s from the synchronized document content
  • Fix content synchronizing from an empty content array
  • Fix content update was not triggered after some of the executeCommand functions
  • Dependencies upgrade

v1.2.2 (03/08/2021)

  • Fixed problem with ?. operator

v1.2.1 (03/07/2021)

  • Force white page background when printing

Download Details:

Author: motla

Live Demo: https://motla.github.io/vue-document-editor/

Download Link: https://github.com/motla/vue-document-editor/archive/master.zip

Official Website: https://github.com/motla/vue-document-editor

Install & Download:

# NPM
$ npm i vue-document-editor

You Might Be Interested In:

Add Comment