工具栏增加预览主题下拉菜单和代码主题下拉菜单

[akbar0903]

你好作者，在编辑器工具栏能不能增加两个下拉菜单，①预览主题下拉菜单，②代码主题下拉菜单：

比如参考掘金的编辑器：


按照文档，我自己定制了两个下拉菜单按钮，虽然功能可以实现，但是感觉有点啰嗦😁

 <script setup>
import { MdEditor, DropdownToolbar } from 'md-editor-v3'
import { ref, watch } from 'vue'
import { useAdminStore } from '@/stores/index.js'
import { fileUploadService } from '@/api/upload.js'
import { ElMessage } from 'element-plus'

// 子组件数据跟父组件进行双向绑定
const content = defineModel()

// 切换编辑器主题
const adminStore = useAdminStore()
const editorTheme = ref(adminStore.getTheme() || 'light')
watch(
  () => adminStore.theme,
  (newTheme) => {
    editorTheme.value = newTheme || 'light'
  },
)

// 删除不需要的工具
//const toolbarsExclude = ['github', 'htmlPreview', 'fullscreen', 'preview', 'prettier']
const toolbars = [
  'bold',
  'underline',
  'italic',
  '-',
  'title',
  'strikeThrough',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  'revoke',
  'next',
  'save',
  0,
  '=',
  1,
  'pageFullscreen',
  'previewOnly',
  'preview',
  'catalog',
]

// 预览主题选择按钮
const previewTheme = ref(['default', 'github', 'vuepress', 'mk-cute', 'smart-blue', 'cyanosis'])

const previewThemeVisible = ref(false)
const previewThemeOnChange = () => {
  previewThemeVisible.value = !previewThemeVisible.value
}
const previewSelectedTheme = ref('default')
const previewThemeHandler = (previewTheme) => {
  previewSelectedTheme.value = previewTheme
}

// 代码块主题
const codeTheme = ref([
  'atom',
  'a11y',
  'github',
  'gradient',
  'kimbie',
  'paraiso',
  'qtcreator',
  'stackoverflow',
])
const codeThemeVisible = ref(false)
const codeThemeOnChange = () => {
  codeThemeVisible.value = !codeThemeVisible.value
}
const selectedCodeTheme = ref('github')
const codeThemeHandler = (codeTheme) => {
  selectedCodeTheme.value = codeTheme
}

// 图片上传
const onUploadImg = async (files, callback) => {
  try {
    const result = await fileUploadService(files[0])
    const imageUrl = result.data
    callback([
      {
        url: imageUrl,
        alt: files[0].name,
        title: files[0].name,
      },
    ])
    ElMessage.success('图片上传成功！')
  } catch (error) {
    ElMessage.error('图片上传失败！' + error.message)
  }
}
</script>

<template>
  <MdEditor
    v-model="content"
    :theme="editorTheme"
    :toolbars="toolbars"
    noPrettier
    :previewTheme="previewSelectedTheme"
    :codeTheme="selectedCodeTheme"
    noMermaid
    :codeFoldable="false"
    @onUploadImg="onUploadImg"
  >
    <template #defToolbars>
      <DropdownToolbar title="主题" :visible="previewThemeVisible" :onChange="previewThemeOnChange">
        <template #overlay>
          <div class="border border-solid border-[#e6e6e6] rounded-sm">
            <ol>
              <li
                v-for="(theme, index) in previewTheme"
                :key="index"
                class="py-1 px-2 hover:bg-[#f5f7fa] dark:hover:bg-zinc-800 cursor-pointer"
                @click="previewThemeHandler(theme)"
              >
                {{ theme }}
              </li>
            </ol>
            <ol>
              <li class="py-1 px-2 font-bold text-blue-500 dark:text-blue-500">
                {{ previewSelectedTheme }}
              </li>
            </ol>
          </div>
        </template>
        <template #trigger>
          <icon-mdi-compare />
        </template>
      </DropdownToolbar>
      <DropdownToolbar
        title="代码块儿主题"
        :visible="codeThemeVisible"
        :onChange="codeThemeOnChange"
      >
        <template #overlay>
          <div class="border border-solid border-[#e6e6e6] rounded-sm">
            <ol>
              <li
                v-for="(theme, index) in codeTheme"
                :key="index"
                class="py-1 px-2 hover:bg-[#f5f7fa] dark:hover:bg-zinc-800 cursor-pointer"
                @click="codeThemeHandler(theme)"
              >
                {{ theme }}
              </li>
            </ol>
            <ol>
              <li class="py-1 px-2 font-bold text-blue-500 dark:text-blue-500">
                {{ selectedCodeTheme }}
              </li>
            </ol>
          </div>
        </template>
        <template #trigger>
          <icon-mdi-code-not-equal-variant />
        </template>
      </DropdownToolbar>
    </template>
  </MdEditor>
</template>

如果有更好的定制下拉菜单的方法，希望大家分享一下，谢谢❤️

[imzbf]

组件提供theme和previewTheme两个属性，是想用户自己控制，内部没有维护这两个状态，所以不能内置到组件。

你的做法没错，可以考虑将扩展独立到单文件中，代码会更好看。这个扩展虽然不能内置到组件，但是也可以考虑封装，如果有时间你可以考虑分享到 md-editor-extension这个公共仓库共大家使用。如果不方便我会在后面找时间设计一下这两个扩展。

[akbar0903]

好的，虽然我是个vue菜鸟，我很乐意试试😊