基于jeecgboot流程设计器里增加预览xml功能

       原来基于workflow-bpmn-modeler 的flowable流程设计器没有预览功能，所以

准备增加一个预览xml功能。

      对于vue2 使用 highlight.js 高亮代码。

highlight.js 可以帮助你高亮代码。

官网：https://highlightjs.org/

1 安装

npm install highlight.js
npm install @highlightjs/vue-plugin@1.0.2

其中@highlightjs/vue-plugin 是一个 vue 插件，是一个写好的组件。

注意：vue2 中使用，安装 1.x.x 版本。

2 使用

2.1 基本使用

main.js 中添加：

 import highlightPlugin from "@highlightjs/vue-plugin";

 import 'highlight.js/styles/dark.css'; // 引入内置样式

 Vue.use(highlightPlugin);

组件中使用：

3、增加代码

 在的workflow-bpmn-modeler package里的index.vue

增加按钮

预览xml

同时增加预览窗口如下

     
   

按钮代码如下：

previewXML() {
      this.modeler.saveXML({ format: true }).then(({ xml }) => {
        this.previewResult = xml;
        this.previewType = "xml";
        this.previewModelVisible = true;
      });
    },

4、使用样式

import 'highlight.js/styles/dark.css'; // 引入内置样式

这个时候你会发现样式并没有生效，这是 @highlightjs/vue-plugin 的问题

解决：

在 node_modules 中找到 @highlightjs/vue-plugin，修改 src 下的 vue.js：

// import hljs from "highlight.js/lib/core.js"; // 注释掉原来的导入
import hljs from 'highlight.js/lib/common'; // 使用该导入，样式即生效

最后效果图