Markdown内容可复制（mavonEditor,v-html）

实现 Markdown 代码块的复制功能

在前端开发中，为了提升用户体验，我们常常需要在代码块中添加复制功能，使得用户可以方便地将代码复制到剪贴板。本文将介绍如何在 Markdown 渲染的 HTML 代码中实现这一功能，包括鼠标悬浮显示按钮和点击按钮复制代码的具体实现步骤。

需求描述

我们需要实现如下功能：

1. 鼠标悬浮在代码块上时显示复制按钮。
2. 点击按钮将代码内容复制到剪贴板。

实现过程

1. 鼠标悬浮显示按钮

在 HTML 中，我们需要用一个容器包裹代码块和复制按钮，通过 CSS 控制在悬浮时显示按钮。

HTML 部分

<div class="testMarkdown">
  <div v-html="item.topicDescription" style="margin-top: -8px"></div>
  <el-button
    type="primary"
    size="mini"
    icon="el-icon-document"
    class="testCopy"
    @click="copy"
  ></el-button>
</div>

CSS 部分

.testMarkdown {
  position: relative;
}

.testCopy {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
}

.testMarkdown:hover .testCopy {
  display: inline;
}

code {
  background-color: #dddddd;
}

.testMarkdown:hover code {
  background-color: #f7f7f7;
}

说明：

• .testMarkdown：容器的 position 设置为 relative，用于定位复制按钮。
• .testCopy：初始隐藏，悬浮时显示。
• position: absolute;：使按钮在代码块的右上角显示。
• code 的背景色在悬浮时改变，提升视觉效果。

2. 点击按钮复制内容

我们使用 clipboard.js 库来实现复制功能。首先需要安装该库。

安装 clipboard.js 插件

npm install clipboard --save

注册插件

在 main.js 中引入并注册 clipboard.js：

import Vue from 'vue';
import ClipboardJS from 'clipboard';

Vue.prototype.$clipboard = ClipboardJS;

使用 clipboard.js 实现复制功能

在 Vue 组件中实现复制功能：

export default {
  data() {
    return {
      clipBoard: null
    };
  },
  methods: {
    copy() {
      // 创建 clipboard 实例
      this.clipBoard = new this.$clipboard('.testCopy', {
        text: (trigger) => {
          // 获取要复制的内容
          return trigger.previousElementSibling.textContent;
        }
      });

      var that = this;
      this.clipBoard.on('success', function (e) {
        that.$message.success('复制成功');
        console.info('Text：', e.text);
        e.clearSelection();
        that.clipBoard.destroy();
      });

      this.clipBoard.on('error', function (e) {
        that.$message.error('复制失败，请重试');
      });
    }
  }
};

说明：

• text: (trigger): 获取要复制的文本内容。这里假设要复制的内容是前一个兄弟元素的 textContent。
• this.clipBoard.destroy(): 必须调用 destroy 方法，以避免多次创建实例的问题。
• @message.success 和 @message.error: 显示操作成功或失败的提示信息。

最终效果

以下是通过上述方法实现的效果：

总结

通过上述步骤，我们实现了在 Markdown 渲染的 HTML 中为代码块添加复制功能。当用户将鼠标悬浮在代码块上时，复制按钮会出现；点击按钮时，代码内容将被复制到剪贴板。使用 clipboard.js 插件简化了复制操作的实现，并通过 Vue 的 $message 方法提供了用户友好的提示。这种功能可以大大提升用户在阅读和使用代码时的便利性。