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.
In your Vue.js project:
npm install vue-document-editor
scss
supportdist
folder####### 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>
See the Demo.vue file and the InvoiceTemplate.vue file corresponding to the live demo.
For the list of props, data and styling variables: read the API.
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
.npm run serve
compiles and hot-reloads demo for developmentnpm run lint
lints and fixes filesnpm run build
compiles and minifies production files and demoAuthor: motla
Demo: https://motla.github.io/vue-document-editor/
Source Code: https://github.com/motla/vue-document-editor
β Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
β Learn Vue.js from scratch 2018
β Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
β Vue.js Tutorial: Zero to Sixty