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

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
}

变更日志:

v1.2.4(03/17/2021)

  • 现在,从DOM中手动删除页面会从您提供的内容中删除相应的项目
  • 将data-page-idx添加到页面<div>以便于自定义用户脚本

v1.2.3(03/09/2021)

  • <div>从同步文档内容中删除无用的环境 
  • 修复从空内容数组同步内容
  • 某些executeCommand 功能后未触发修复内容更新 
  • 依赖关系升级

v1.2.2(03/08/2021)

  • 解决了?的问题。操作员

v1.2.1(03/07/2021)

  • 打印时强制白页背景