Vue 所见即所得文档编辑器 - vue-document-editor

插件名称	vue-document-editor
版本号	v1.2.4
发布时间	2021年3月5日
插件作者	motla

基于Vue.js和contenteditable元素的功能丰富的纸张大小的WYSIWYG RTF编辑器。

特征：

使用您的Vue.js组件作为交互式页面模板
具有向前和向后传播的逐字页面拆分（仍处于实验状态）
预定义的分页符
兼容本机打印
动态文档格式和边距（以毫米为单位）
自定义页面叠加层（页眉，页脚，页码）
智能缩放和页面显示模式
计算插入符位置的文字样式

安装和下载：

# NPM
$ npm i vue-document-editor

如何使用它：

1.导入并注册编辑器。

import VueDocumentEditor from 'vue-document-editor'

export default {
  components: { VueDocumentEditor }
}

2.将文档编辑器添加到您的应用程序。

<template>
  <div>
    <vue-document-editor :content.sync="content" />
  </div>
</template>

export default {
  components: { VueDocumentEditor },
  data () {
    return { 
      content: ["<h1>Default Content</h1>"]
    }
  }
}

3.可用的道具来自定义编辑器。

// 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
}