diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue index 66cd019b..d371d601 100644 --- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue +++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue @@ -233,14 +233,6 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable' // import xml2js from 'xml-js' // import xml2js from 'fast-xml-parser' import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml' -// 代码高亮插件 -// import hljs from 'highlight.js/lib/highlight' -// import 'highlight.js/styles/github-gist.css' -// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml') -// hljs.registerLanguage('json', 'highlight.js/lib/languages/json') -// const eventName = reactive({ -// name: '' -// }) const bpmnCanvas = ref() const refFile = ref() const emit = defineEmits([ @@ -673,17 +665,10 @@ const processSave = async () => { // 触发 save 事件 emit('save', xml) } -/** 高亮显示 */ -// const highlightedCode = (previewType, previewResult) => { -// console.log(previewType, 'previewType, previewResult') -// console.log(previewResult, 'previewType, previewResult') -// console.log(hljs.highlight, 'hljs.highlight') -// const result = hljs.highlight(previewType, previewResult.value || '', true) -// return result.value || ' ' -// } onBeforeMount(() => { // console.log(props, 'propspropspropsprops') }) + /** * 代码高亮 */ diff --git a/src/views/bpm/form/formEditor.vue b/src/views/bpm/form/formEditor.vue index 6202c5fa..b8d3bad5 100644 --- a/src/views/bpm/form/formEditor.vue +++ b/src/views/bpm/form/formEditor.vue @@ -12,10 +12,8 @@
-
- - {{ formValue }} - +
+
@@ -153,8 +151,25 @@ const copy = async (text: string) => { message.success(t('common.copySuccess')) oInput.remove() } -// ========== 初始化 ========== -onMounted(() => { + +/** + * 代码高亮 + */ +import hljs from 'highlight.js' // 导入代码高亮文件 +import 'highlight.js/styles/github.css' // 导入代码高亮样式 +import java from 'highlight.js/lib/languages/java' +import xml from 'highlight.js/lib/languages/java' +import javascript from 'highlight.js/lib/languages/javascript' +import sql from 'highlight.js/lib/languages/sql' +import typescript from 'highlight.js/lib/languages/typescript' +const highlightedCode = (item) => { + const language = item.filePath.substring(item.filePath.lastIndexOf('.') + 1) + const result = hljs.highlight(language, item.code || '', true) + return result.value || ' ' +} + +/** 初始化 **/ +onMounted(async () => { // 场景一:新增表单 const id = query.id as unknown as number if (!id) { @@ -165,5 +180,13 @@ onMounted(() => { formValues.value = data setConfAndFields(designer, data.conf, data.fields) }) + // 注册代码高亮的各种语言 + hljs.registerLanguage('java', java) + hljs.registerLanguage('xml', xml) + hljs.registerLanguage('html', xml) + hljs.registerLanguage('vue', xml) + hljs.registerLanguage('javascript', javascript) + hljs.registerLanguage('sql', sql) + hljs.registerLanguage('typescript', typescript) })