插件

富文本编辑器

如果需要使用富文本编辑器，需要单独引入 vue2-editor ↗。

javascript

import VueEditor from "vue2-editor"

Vue.use(VueEditor)

引入该组件后将不支持 IE10。

代码编辑器

代码编辑器采用的是 ace ↗，如果需要在项目中使用代码编辑器功能，需要在注册FormMaking组件时配置ace地址，如下：

javascript

Vue.use(FormMaking, {
  aceurl: 'https://form.making.link/public/lib/ace' // 该地址为ace文件目录
})

说明

不配置该参数默认使用我们提供的 https://form.making.link/public/lib/ace。

ace 文件目录位于源代码 public/lib/ace 下，可以离线部署在自己的服务器上。

导出 PDF ^1.5.8

需要在项目中单独引入 jspdf 和 html2canvas 库，才能使用导出 PDF 的功能。

yarnnpm

bash

yarn add jspdf

bash

npm install jspdf --save

import { jsPDF } from 'jspdf'
import html2canvas from 'html2canvas'

Vue.use(FormMaking, {
  jsPDF,
  html2canvas
})

在 HTML 中使用

除了上面通过 import 引入，也可以直接使用 script 在 html 中引入

html

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

插件 ​

富文本编辑器 ​

代码编辑器 ​

导出 PDF ^1.5.8 ​

在 HTML 中使用 ​

插件

富文本编辑器

代码编辑器

导出 PDF ^1.5.8

在 HTML 中使用