fix: 修复标题渲染id不正确问题 (#1774)

* doc: 新增xss规则自定义示例 * fix(md): 修复toc目录引入标题id不正确(全为undefined)问题
DevCloudFE · Jan 3, 2024 · edd34a2 · edd34a2
1 parent 4b5bdb5
commit edd34a2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/devui-vue/devui/editor-md/src/plugins/toc.ts b/packages/devui-vue/devui/editor-md/src/plugins/toc.ts
@@ -59,10 +59,10 @@ export default function (md: any, options: Record<string, any>) {
           let content;
           if (heading.children && heading.children.length > 0 && heading.children[0].type === 'link_open') {
             content = heading.children[1].content;
-            heading._toAnchor = safeString(content);
+            heading._tocAnchor = safeString(content);
           } else {
             content = heading.content;
-            heading._toAnchor = safeString(heading.children.reduce((s, t) => s + t.content, ''));
+            heading._tocAnchor = safeString(heading.children.reduce((s, t) => s + t.content, ''));
           }
           headings.push({
             content,

diff --git a/packages/devui-vue/docs/components/editor-md/index.md b/packages/devui-vue/docs/components/editor-md/index.md
@@ -36,19 +36,25 @@ export default defineComponent({
 
 ### 自定义渲染
 
-:::demo 自定义从 md 到 html 的渲染规则。
+:::demo 自定义从 md 到 html 的渲染规则，也可自定义XSS过滤规则，放开指定标签。
 
 ```vue
 <template>
-  <d-editor-md v-model="content" :custom-renderer-rules="customRendererRules"></d-editor-md>
+  <d-editor-md v-model="content" :custom-renderer-rules="customRendererRules" :custom-xss-rules="customRenderRules"></d-editor-md>
 </template>
 
 <script>
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const content = ref('[link](#test)');
+    const content = ref('[link](#test)\n<kbd>kbd 标签渲染</kbd>');
+    const customRenderRules = ref([
+      {
+        key: 'kbd',
+        value: [], // 为空表示过滤所有属性，放开属性则添加对应项，如['id', 'style']
+      },
+    ])
     const customRendererRules = ref([
       {
         key: 'link_open',
@@ -69,7 +75,7 @@ export default defineComponent({
         },
       },
     ]);
-    return { content, customRendererRules };
+    return { content, customRendererRules, customRenderRules };
   },
 });
 </script>