md-editor-v3拓展工具栏失效的问题

最新推荐文章于 2025-10-24 12:38:36 发布

原创

最新推荐文章于 2025-10-24 12:38:36 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文讲述了在Vue项目中使用md-editor-v3扩展emoji功能时遇到的问题，包括官方文档不完整、缺少示例和样式缺失等。作者详细描述了解决过程，从引入组件、添加数据到调试样式，最后因需要额外编写CSS而选择改用v-md-editor，该编辑器内置了emoji支持。

因为最近在写一个项目，需要用到emoji表情，所以想着用md-editor-v3去拓展一下，官方其实也给了文档，但是恕我直言，官方文档没有一个完整的示例，全是片段，也没搜到关于拓展emoji的文章，导致我花了大量的时间解决bug。

在官方文档首页的展示里面有emoji，所以我根据他的地址到了github
在这里插入图片描述
进入EmojiExtension下的index.vue，里面提供了以下代码：

<template>
  <dropdown-toolbar title="emoji" :visible="state.visible" @on-change="onChange">
    <template #overlay>
      <div class="emoji-container">
        <ol class="emojis">
          <li
            v-for="(emoji, index) of emojis"
            :key="`emoji-${index}`"
            @click="emojiHandler(emoji)"
            v-text="emoji"
          ></li>
        </ol>
      </div>
    </template>
    <template #trigger>
      <svg class="md-icon" aria-hidden="true">
        <use xlink:href="#icon-emoji"></use>
      </svg>
    </template>
  </dropdown-toolbar>
</template>

<script lang=