Home
Text
Paper Size WYSIWYG Document Editor For Vue

Paper Size WYSIWYG Document Editor For Vue

motla Last Updated: 2 months ago

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:

v2.2.2 (01/30/2023)

  • Bugfixes

v2.2.1 (11/26/2022)

  • Bugfix: Display update was not triggered after exiting printing mode

v2.2.0 (11/20/2022)

  • User can now provide a function for page_margins, to set margins specific to the page number (for more info read the API)
  • Bugfix: Display update was not triggered after exiting printing mode

v2.1.2 (11/09/2022)

  • Bugfix: Cursor is blurred when editing contenteditable fields inside components

v2.1.1 (11/01/2022)

  • Bugfix: Display update was not triggered when changing display or zoom props

v2.1.0 (10/30/2022)

  • This library core has been rewritten for Vue3 using an hoisted static <div> for pages content to manage page manually and avoid conflicts between DOM contenteditable elements and Vue.js.
  • SCSS has been converted to basic CSS, so you don’t have to install a SCSS compiler anymore
  • Updating dependencies
  • Removing ESLint for a lighter project
  • Fix: The component breaks if you remove all the content
  • Warning: starting from this version, the new core implies that for using templates with custom CSS you must rename your single file components with .ce.vue extension

v2.0.6/7 (10/16/2022)

  • Bugfix

v2.0.5 (10/14/2022)

  • Fixed: In some cases, multiple instances of reset_content were launched simultaneously which could cause errors.

v2.0.4 (07/30/2021)

  • Fix: The component breaks if you remove the last character
  • Fix warnings about deprecated ::v-deep and print-color-adjust
  • Dev dependencies upgrade

v2.0.3 (10/27/2021)

  • Bug fixing: prevent applying normalize() to template pages HTML as it can break Vue behavior (only Vue3)
  • Dependencies upgrade

v2.0.2 (10/11/2021)

  • Fixing the contenteditable field highlight to the Invoice Template of the Demo

v2.0.1 (10/06/2021)

  • Workaround for the Chrome “return from print” bug. Now displays a return arrow to let the user go back to the editor when this bug happens.

v2.0.0 (10/06/2021)

  • Vue 3

v1.2.5 (07/03/2021)

  • Update

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

Related Posts

Tags:

Add Comment