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:
Changelog:
v2.3.1 (05/29/2023)
- Bugfix
v2.3.0 (05/27/2023)
- Improvement Table Page Break. Now table rows don’t split over pages but are simply moved if they overflow
- Implementation Unwanted page break with :do_not_break parameter
- Bugfix
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