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

main.js 中添加：

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

 import &＃39;highlight.js/styles/dark.css&＃39;; // 引入内置样式

 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 &＃39;highlight.js/styles/dark.css&＃39;; // 引入内置样式

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

解决：

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

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

最后效果图