跳转至

工具栏按钮配置

这里的工具栏使用的都是svg图标，工具栏的按钮不少，如果直接写入vue组件的template中，会显得这部分很臃肿，而且如果要更换图片，也不是很方便，这里使用了一个与id与svg图片的映射表，然后在onMounted时进行遍历修改

Vue
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
    <!-- 标题 | 字体 加粗 倾斜 删除线 下划线 颜色 引用 | 文字左对齐 文字居中 文字右对齐 |
有序列表 无序列表 水平线 段内换行 | 行内代码 代码块 行内公式 公式块 | 超链接 锚点链接 任务列表 |
插入图片 图片居中 Emoji 表格 标记 分类 | material mermaid plantuml |
-->
<!-- H1 H2 H3 H4 H5 H6 -->
<button id="format-header-1" class="tool-button" @click="handleUpdateHeaderFormat('H1')"></button>
    <button id="format-header-2" class="tool-button" @click="handleUpdateHeaderFormat('H2')"></button>
    <button id="format-header-3" class="tool-button" @click="handleUpdateHeaderFormat('H3')"></button>
    <button id="format-header-4" class="tool-button" @click="handleUpdateHeaderFormat('H4')"></button>
    <button id="format-header-5" class="tool-button" @click="handleUpdateHeaderFormat('H5')"></button>
    <button id="format-header-6" class="tool-button" @click="handleUpdateHeaderFormat('H6')"></button>
</template>
<script setup lang="ts">
  type MappingTable = {
    [key: string]: string // 键是字符串，值是数字
  }

  const svgs: MappingTable = {
    'format-header-1':
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h2v6h4V4h2v14H9v-6H5v6H3V4m11 14v-2h2V6.31l-2.5 1.44V5.44L16 4h2v12h2v2h-6Z"/></svg>',
    'format-header-2':
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h2v6h4V4h2v14H9v-6H5v6H3V4m18 14h-6a2 2 0 0 1-2-2c0-.53.2-1 .54-1.36l4.87-5.23c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2h-2a4 4 0 0 1 4-4 4 4 0 0 1 4 4c0 1.1-.45 2.1-1.17 2.83L15 16h6v2Z"/></svg>',
    'format-header-3':
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 4h2v6h4V4h2v14H9v-6H5v6H3V4m12 0h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-1h2v1h4v-4h-4v-2h4V6h-4v1h-2V6a2 2 0 0 1 2-2Z"/></svg>',
    // ..... 比较多，不一一显示
  }
  onMounted(() => {
    for (const key in svgs) {
        if (Object.prototype.hasOwnProperty.call(svgs, key)) {
            // 确保 key 是 svgs 对象自身的属性
            const element = document.getElementById(key)
            if (element) {
                element.innerHTML = svgs[key]
            }
        }
    }
  })
</script>