bpmnProcessDesigner 修改 xml、json 预览,使用老版本的 highlight

This commit is contained in:
YunaiV
2022-01-03 01:36:39 +08:00
parent 490f907ada
commit 38221a3e2e
2 changed files with 14 additions and 5 deletions

View File

@ -80,8 +80,8 @@
<div class="my-process-designer__container">
<div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
</div>
<el-dialog title="预览" width="60%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
<highlightjs :language="previewType" :code="previewResult" />
<el-dialog title="预览" width="80%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
<pre><code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code></pre>
</el-dialog>
</div>
</template>
@ -107,6 +107,12 @@ import flowableModdleExtension from "./plugins/extension-moddle/flowable";
// 引入json转换与高亮
import convert from "xml-js";
// 代码高亮插件
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
export default {
name: "MyProcessDesigner",
componentName: "MyProcessDesigner",
@ -463,7 +469,12 @@ export default {
}
// 触发 save 事件
this.$emit('save', xml)
}
},
/** 高亮显示 */
highlightedCode(previewType, previewResult) {
const result = hljs.highlight(previewType, previewResult || "", true);
return result.value || '&nbsp;';
},
}
};
</script>