Paper-sized WYSIWYG Document Editor for Vue

Paper-sized WYSIWYG Document Editor for Vue
vue-document-editor is a rich-text editor built on top of Vue.js, using the native contenteditable browser implementation and some JavaScript trickery to spread content over paper-sized pages. It is mainly designed to allow targeted modifications to pre-formatted documents using HTML or interactive templates.

vue-document-editor is a rich-text editor built on top of Vue.js, using the native contenteditable browser implementation and some JavaScript trickery to spread content over paper-sized pages. It is mainly designed to allow targeted modifications to pre-formatted documents using HTML or interactive templates.

πŸ’¬ This package does not intend to replace a proper document editor with full functionality. If you’re looking for a powerful word processor, check out CKEditor for Vue.js.

Features

πŸš€ See live demo

  • 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
πŸ’¬ This package doesn’t include any toolbar. The demo features vue-file-toolbar-menu for the toolbar.

Installation

In your Vue.js project:

npm install vue-document-editor

⚠️ Your Vue.js project must have scss support
πŸ’¬ If you prefer static files, import assets from the dist folder

Basic example

####### MyComponent.vue

<template>
  <div style="font-family: Avenir, sans-serif">
    <vue-document-editor :content.sync="content" />
  </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>

same example using static files loaded with a CDN

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/VueDocumentEditor.umd.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Complete example

See the Demo.vue file and the InvoiceTemplate.vue file corresponding to the live demo.

API

For the list of props, data and styling variables: read the API.

Known issues / limitations

  • Undo / Redo: Native undo/redo needs to be rewritten as the split mechanism modifies the HTML content at every input, so the navigator is lost. You have to implement it yourself by watching content updates and storing them in a stack, then restoring them. Demo.vue implements this. Also your interactive templates need to have a custom undo/redo management if their editable fields are not synced with the content.
  • Performance: For now, large texts must be divided into multiple paragraphs and large page numbers can slow down the entire document.
  • Safari print: Safari adds print margins unless you choose a borderless paper format in the print box. This has to be done manually. I guess there is no workaround for this issue yet.
  • Tables, images: Image/table placement and sizing is not included. You can implement it specifically for your needs. However, table rows split fine over multiple pages.

Project development

  • npm run serve compiles and hot-reloads demo for development
  • npm run lint lints and fixes files
  • npm run build compiles and minifies production files and demo

Download Details:

Author: motla

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

Source Code: https://github.com/motla/vue-document-editor

Suggest:

☞ Learn Vue.js from scratch 2018

☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!

☞ Vue.js Tutorial: Zero to Sixty

☞ Learn Vue.js from Scratch - Full Course for Beginners

☞ Create Shopping basket page With Vuejs and Nodejs

☞ Learn Vue 2 in 65 Minutes -The Vue Tutorial for 2018