{"id":13810578,"url":"https://github.com/motla/vue-document-editor","last_synced_at":"2025-04-12T20:46:45.469Z","repository":{"id":44417993,"uuid":"279963782","full_name":"motla/vue-document-editor","owner":"motla","description":":page_facing_up: Paper-sized WYSIWYG document editor for Vue apps","archived":false,"fork":false,"pushed_at":"2024-08-05T08:16:28.000Z","size":19357,"stargazers_count":315,"open_issues_count":6,"forks_count":71,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-12-17T17:40:37.804Z","etag":null,"topics":["a4","document","editor","paper","vue","vuejs","wysiwyg"],"latest_commit_sha":null,"homepage":"https://motla.github.io/vue-document-editor/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/motla.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-15T19:53:37.000Z","updated_at":"2024-12-11T14:06:49.000Z","dependencies_parsed_at":"2025-02-03T21:00:15.235Z","dependency_job_id":"baa4cf11-ea75-4aec-a4c7-f42f98b51dc8","html_url":"https://github.com/motla/vue-document-editor","commit_stats":{"total_commits":61,"total_committers":2,"mean_commits":30.5,"dds":0.2786885245901639,"last_synced_commit":"8eaa28b98e1d01274c35415e8e283c4b1975baa3"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-document-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-document-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-document-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/motla%2Fvue-document-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/motla","download_url":"https://codeload.github.com/motla/vue-document-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631711,"owners_count":21136559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a4","document","editor","paper","vue","vuejs","wysiwyg"],"created_at":"2024-08-04T02:01:00.998Z","updated_at":"2025-04-12T20:46:45.417Z","avatar_url":"https://github.com/motla.png","language":"Vue","funding_links":[],"categories":["Vue","vuejs"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/motla/vue-document-editor/raw/master/img/logo.png\" alt=\"vue-document-editor\" width=\"304\"\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/motla/vue-document-editor/raw/master/img/preview.png\" width=\"500\"\u003e\n\u003c/div\u003e\n\n**vue-document-editor** is a rich-text editor built on top of [Vue.js](https://vuejs.org/), using the native [*contenteditable*](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content) 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**.\n\n###### :speech_balloon: 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](https://github.com/ckeditor/ckeditor5-vue) or [Collabora Online Development Edition](https://collaboraonline.github.io/).\n\n## Features\n### :rocket: [See live demo](https://motla.github.io/vue-document-editor/)\n- Use Vue.js components as interactive page templates\n- Word-by-word page splitting (*still experimental - only for plain HTML content*)\n- Native Print compatible\n- Dynamic document format and margins in millimeters\n- Custom page overlays (headers, footers, page numbers)\n- Page breaks\n- Smart zoom and page display modes\n- Computes text style at caret position\n- Migrated to Vue.js 3.x (to use with Vue 2.x, select library version 1.x)\n\n###### :speech_balloon: This package doesn't include any toolbar. The demo features [vue-file-toolbar-menu](https://github.com/motla/vue-file-toolbar-menu) for the toolbar.\n\n## Installation\n##### In your Vue.js 3.x project:\n\n```\nnpm install vue-document-editor\n```\n\n##### In your Vue.js 2.x project:\n\n```\nnpm install vue-document-editor@1\n```\n\n###### :speech_balloon: If you prefer static files, import assets from the `dist` folder\n\n## Basic example\n###### MyComponent.vue\n```Vue\n\u003ctemplate\u003e\n  \u003cdiv style=\"font-family: Avenir, sans-serif\"\u003e\n    \u003cvue-document-editor v-model:content=\"content\" /\u003e \u003c!-- Vue 3 syntax --\u003e\n    \u003c!-- \u003cvue-document-editor :content.sync=\"content\" /\u003e --\u003e \u003c!-- Vue 2 syntax --\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueDocumentEditor from 'vue-document-editor'\n\nexport default {\n  components: { VueDocumentEditor },\n  data () {\n    return { \n      content: [\"\u003ch1\u003eHello!\u003c/h1\u003eFill this page with text and new pages will be created as it overflows.\"]\n    }\n  }\n}\n\u003c/script\u003e\n```\n\u003cdetails\u003e\n\u003csummary\u003e\u003csmall\u003esame example using static files loaded with a CDN (Vue 3)\u003c/small\u003e\u003c/summary\u003e\n\n```HTML\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-document-editor@2/dist/VueDocumentEditor.umd.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"https://cdn.jsdelivr.net/npm/vue-document-editor@2/dist/VueDocumentEditor.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv style=\"font-family: Avenir, sans-serif\"\u003e\n      \u003cvue-document-editor v-model:content=\"content\" /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cscript\u003e\n  const app = Vue.createApp({\n    components: { VueDocumentEditor },\n    data () {\n      return { \n        content: [\"\u003ch1\u003eHello!\u003c/h1\u003eFill this page with text and new pages will be created as it overflows.\"]\n      }\n    }\n  }).mount('#app');\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/details\u003e\n\u003cdetails\u003e\n\u003csummary\u003e\u003csmall\u003esame example using static files loaded with a CDN (Vue 2)\u003c/small\u003e\u003c/summary\u003e\n\n```HTML\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.umd.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"https://cdn.jsdelivr.net/npm/vue-document-editor@1/dist/VueDocumentEditor.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cdiv style=\"font-family: Avenir, sans-serif\"\u003e\n      \u003cvue-document-editor :content.sync=\"content\" /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cscript\u003e\n  var app = new Vue({\n    el: '#app',\n    components: { VueDocumentEditor },\n    data () {\n      return { \n        content: [\"\u003ch1\u003eHello!\u003c/h1\u003eFill this page with text and new pages will be created as it overflows.\"]\n      }\n    }\n  })\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/details\u003e\n\n## Complete example\nSee the [Demo.vue](src/Demo/Demo.vue) file and the [InvoiceTemplate.ce.vue](src/Demo/InvoiceTemplate.ce.vue) file corresponding to the [live demo](https://motla.github.io/vue-document-editor/).\n\n## API\nFor the list of props, data and styling variables: **:blue_book: read the [API](API.md)**.\n\n## Known issues / limitations\n- **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](src/Demo/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`.\n- **Performance**: For now, large texts must be divided into multiple paragraphs and large page numbers can slow down the entire document (see [Issue 14](https://github.com/motla/vue-document-editor/issues/14)).\n- **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.\n- **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.\n- **Page splitting doesn't work with Vue page templates**: This library cannot act on the content managed by Vue (like .vue page templates), because then Vue is lost and the template pages are no longer interactive. The only choice you have is writing plain HTML in the content instead of using .vue templates. You can do interactivity by using HTML elements with the attributes `contenteditable=\"false\"` and `onclick=\"...\"` containing your own JavaScript code.\n\n## Project development\n- `npm run serve` compiles, serves and hot-reloads demo for development\n- `npm run build` compiles and minifies production files and demo\n\n## Licensing\nCopyright (c) 2020 Romain Lamothe, [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotla%2Fvue-document-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmotla%2Fvue-document-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmotla%2Fvue-document-editor/lists"}