feat(editor-md): 添加公式渲染、plantuml渲染DEMO示例 (DevCloudFE#1737)

Author: GreatZPP

packages/devui-vue/docs/components/editor-md/index.md

@@ -232,6 +232,90 @@ export default defineComponent({
 editor-md/checkbox
 :::
 
+### 数学公式 渲染
+
+:::demo 通过配置md-plugins katex插件，进行数学公式渲染。
+
+```vue
+<template>
+ <d-editor-md
+ v-model="content"
+ >
+ </d-editor-md>
+ <!-- <d-editor-md
+ v-model="content"
+ :md-plugins="plugins"
+ >
+ </d-editor-md> -->
+</template>
+
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+// import mk from '@ittakahiro/markdown-it-katex'; // 请首先安装 @ittakahiro/markdown-it-katex 依赖
+
+export default defineComponent({
+ setup() {
+ const content = ref(`$E = mc^2$
+$\\sqrt{3x-1}+(1+x)^2$ // DEMO无法进行import，使用时请放开代码中注释
+ `);
+
+ mdPlugins = [{
+ // plugin: mk
+ }];
+
+ return { content, mdPlugins };
+ },
+});
+</script>
+```
+
+:::
+
+### PlantUML 渲染
+
+:::demo 通过配置md-plugins plantuml插件，进行plantuml图渲染。
+
+```vue
+<template>
+ <d-editor-md
+ v-model="content"
+ >
+ </d-editor-md>
+ <!-- <d-editor-md
+ v-model="content"
+ :md-plugins="plugins"
+ >
+ </d-editor-md> -->
+</template>
+
+<script>
+import { defineComponent, reactive, ref } from 'vue';
+// import PlantUml from 'markdown-it-plantuml'; // 请首先安装 markdown-it-plantuml 依赖
+
+export default defineComponent({
+ setup() {
+ const content = ref(`// DEMO无法进行import，使用时请放开代码中注释
+@startuml
+Alice -> "Bob()" : Hello
+"Bob()" -> "This is very long" as Long
+' You can also declare:
+' "Bob()" -> Long as "This is very long"
+Long --> "Bob()" : ok
+@enduml`);
+
+ mdPlugins = [{
+ // plugin: PlantUml,
+ // opts: {server: 'https://www/plantuml.com/plantuml'} // 自定义server可参考plantuml官方文档进行搭建
+ }];
+
+ return { content, mdPlugins };
+ },
+});
+</script>
+```
+
+:::
+
 ### 配置快速提示
 
 :::demo 设置 hintConfig 后，可用于支持@选择用户等场景。

packages/devui-vue/package.json

@@ -48,6 +48,7 @@
  "@babel/helper-hoist-variables": "^7.22.5",
  "@devui-design/icons": "^1.3.0",
  "@floating-ui/dom": "^0.4.4",
+ "@iktakahiro/markdown-it-katex": "^4.0.1",
  "@types/codemirror": "0.0.97",
  "@types/lodash-es": "^4.17.4",
  "@vue/shared": "^3.2.33",
@@ -65,6 +66,7 @@
  "lodash": "^4.17.21",
  "lodash-es": "^4.17.20",
  "markdown-it": "12.2.0",
+ "markdown-it-plantuml": "^1.4.1",
  "mermaid": "9.1.1",
  "mitt": "^3.0.0",
  "monaco-editor": "0.34.0",