vue、nuxt的mavon-editor富文本的使用及添加代码块高亮样式、代码块行数、一键复制代码功能

为啥断更了这么久？

就是因为mavon-editor富文本框的样式、nuxt项目的seo、nuxt项目的优化、nuxt首屏渲染等等等的问题导致这么久没有发文章了。。。
这篇文章先讲vue项目及nuxt项目中使用mavon-editor并改变代码块的样式、高亮样式，新增功能：代码块行数、一键复制代码。先附一张图。

我博客连接：安哥个人博客

这个是nuxt项目mavon-editor的样式，接下来废话不多说开始。

1. vue的mavon-editor使用

• 先安装mavon-editor

npm install mavon-editor
或者
yarn add mavon-editor

• 在main.js全局引入使用

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

• 在你的组件中使用

html代码

<template>
  <div class="dashboard-container">
    <mavon-editor
      v-model="context"
      :toolbars="toolbars"
    />
  </div>
</template>

js代码

<script>
export default {
  name: 'Article',
  data() {
    return {
      context: '', // 输入的数据
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
    }
  },
  mounted() {},
  methods: {}
}
</script>

然后就可以使用了

2. nuxt的mavon-editor使用

• 先安装mavon-editor

npm install mavon-editor
或者
yarn add mavon-editor

• 在plugins下新建vueMarkdown.js，并加入以下代码

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

• 在nuxt.config.js下加入以下代码

引入刚刚创建好的vueMarkdown.js插件

module.exports = {
  ...
  css: [
    'mavon-editor/dist/css/index.css',
  ],
  plugins: [
    { src: '@/plugins/vueMarkdown', ssr: false },
  ],
  ...
}

• 在你的组件中使用

html代码

Tips：你后台管理项目保存好的mavon-editor的markdown格式到数据库，然后前台nuxt项目取数据后只是为了预览展示，所以default-open=“preview”,其他为false。

<template>
  <div class="dashboard-container">
   <mavon-editor
     v-model="content"
     :ishljs="true"  <!-- 是否显示高亮 -->
     default-open="preview" <!-- 只做预览展示 -->
     :editable="false" <!-- 是否可编辑 -->
     <!-- subfield: true表示双栏，false表示单栏 -->
     :subfield="false" 
     :toolbarsFlag="false" <!-- 是否显示编辑栏 -->
   />
  </div>
</template>

js代码

<script>
export default {
  name: 'Article',
  data() {
    return {
      content: '', // 输入的数据
      },
    }
  },
  mounted() {},
  methods: {}
}
</script>

3. nuxt自定义代码块样式、代码块高亮、代码块复制按钮、代码行数功能

就是这玩意搞了我两个星期。。。直接附上代码（有注释）

然后代码有个地方写了setInterval就是为了解决不显示代码行数的bug

<template>
  <div class="dashboard-container">
   <mavon-editor
     v-model="detailData.mavonEditor"
     :ishljs="false"  <!-- 是否显示高亮 -->
     default-open="preview" <!-- 只做预览展示 -->
     :editable="false" <!-- 是否可编辑 -->
     <!-- subfield: true表示双栏，false表示单栏 -->
     :subfield="false" 
     :toolbarsFlag="false" <!-- 是否显示编辑栏 -->
   />
  </div>
</template>

<script>
import { Message } from "element-ui";
// start （必须引入）
// 因为需要修改到hljs代码块高亮颜色
import "mavon-editor/dist/markdown/github-markdown.min.css";
import hljs from "mavon-editor/dist/highlightjs/highlight.min.js";
import "mavon-editor/dist/highlightjs/styles/github-dark-dimmed.min.css";
// end （必须引入）
import { queryArticle } from "../../api/home";
export default {
  data() {
    return {
      detailData: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      clearInterval(this.timer);
      this.getCodes();
    });
  },
  // 必须使用asyncData获取到富文本需要展示的数据
  // 因为我试过fetch不行，会加载不出来代码高亮、代码自定义样式、代码行数的问题。
  async asyncData({ query }) {
    let { detailData } = await queryArticle({
      id: query.id,
      pageNum: 0,
      pageSize: 0,
    }).then((res) => {
      return {
        detailData: res.list[0],
      };
    });
    return {
      detailData,
    };
  },
  methods: {
    // 为什么要这么写呢？
    // 是因为mavon-editor需要获取到katex.min.js等文件
    // 然后又是cdn获取的，所以有些时候请求慢
    // 导致dom先加载，然后才加载js、css这些mavon-editor所需要的文件
    // 因此需要写setInterval去等katex.min.js等文件加载完成
    // 这样才能获取到offsetHeight的问题。
    // 不然你可以试试去掉这段代码
    // 你的offsetHeight一直为0，没有代码块序号。
    getCodes() {
      this.codes = document.querySelectorAll("pre code");
      if (this.codes.length > 0) {
        for (let i = 0; i < this.codes.length; i++) {
          if (this.codes[i].offsetHeight != 0) {
            return this.init();
          } else {
            this.timer = setInterval(() => {
              for (let j = 0; j < this.codes.length; j++) {
                if (this.codes[j].offsetHeight != 0) {
                  clearInterval(this.timer);
                  return this.init();
                }
              }
            }, 500);
            return;
          }
        }
        return;
      }
    },
    init() {
      this.$nextTick(() => {
        clearInterval(this.timer);
        this.codes.forEach((item) => {
          // 取出 code 的父元素 pre（后面方便使用）
          let pre = item.parentElement;
          // 添加拖动属性
          this.dragAround(item);
          // 新建元素 代码块序号
          let lineNumBox = document.createElement("div");
          lineNumBox.setAttribute(
            "style",
            "height: " + item.offsetHeight + "px"
          );
          lineNumBox.className = "line-num-box";
          // 插入序号 计算方式：获取code元素的高并除以行高，得到行数，根据行数插入序号
          let num = ""; // 设行高二十
          for (let i = 1; i < Math.ceil(item.offsetHeight / 20) + 1; i++) {
            num += i + "\n"; // 序号加上换行符
          }
          lineNumBox.innerText = num; // 插入序号
          pre.insertBefore(lineNumBox, item);
          let codeBox = document.createElement("div");
          codeBox.className = "code-box";
          codeBox.appendChild(item);
          pre.appendChild(codeBox);
          let icon =
            `<div class="mac-icon">` +
            `<span class="mac-icon-red"></span>` +
            `<span class="mac-icon-yellow"></span>` +
            `<span class="mac-icon-green"></span>` +
            `<button class="copy-button">复制</button>` +
            `</div>`;

          pre.insertAdjacentHTML("afterbegin", icon);
          // 获取复制元素
          let copyButton =
            pre.firstElementChild.getElementsByClassName("copy-button")[0];
          copyButton.onclick = function () {
            const copyPromise = navigator.clipboard.writeText(
              pre.lastElementChild.innerText
            );
            copyPromise
              .then(() => {
                Message({
                  message: "copy成功",
                  type: "success",
                  duration: 0,
                });
              })
              .catch(() => {
                Message({
                  message: "copy失败",
                  type: "success",
                  duration: 0,
                });
              });
          };
          hljs.highlightBlock(codeBox.firstElementChild);
        });
      });
    },
    // 给某个元素添加左右拖动属性
    dragAround(anyElement) {
      let mouseDown = false; // 鼠标是否按下
      let x = 0; // 鼠标点击的下标
      let left = 0; // 当前滚动条位置
      anyElement.onmousedown = function (e) {
        mouseDown = true; // 鼠标按下
        x = e.clientX; // 获取鼠标点击位置 （x坐标）
        left = this.scrollLeft; // 滚动条当前位置
      };
      anyElement.onmousemove = function (e) {
        // 鼠标按下
        if (mouseDown) {
          let curX = e.clientX; // 鼠标移动到当前的位置
          let diffX = curX - x; // 鼠标移动距离（当前位置 减去之前的位置）
          this.scrollLeft = left - diffX;
        }
      };
      anyElement.onmouseup = function () {
        mouseDown = false;
      };
      anyElement.onmouseleave = function () {
        mouseDown = false;
      };
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

// 代码块的样式，自己写的，注意都需要带!important
<style>
pre {
  opacity: 1 !important;
  border: 1px solid #272822 !important;
  background-color: #272822 !important;
  border-radius: 15px !important;
}

.line-num-box {
  display: inline-block !important;
  color: #ccc !important;
  border-right: 2px solid #fff !important;
  line-height: 20px !important;
  font-size: 16px !important;
  text-align: right !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.code-box {
  display: inline-block !important;
  vertical-align: top !important;
  width: calc(100% - 50px) !important;
  border-left-style: none !important;
}

code {
  line-height: 20px !important;
  font-size: 16px !important;
  vertical-align: top;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 10px !important;
}

code::-webkit-scrollbar {
  height: 10px !important;
  border-radius: 5px !important;
  background-color: #1e1e1e !important;
}

code::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px !important;
  background-color: #666 !important;
}

code::-webkit-scrollbar-button {
  /*滚动条的轨道的两端按钮，允许通过点击微调小方块的位置*/
  border-radius: 5px !important;
  background-color: #1e1e1e !important;
}

.mac-icon {
  height: 30px !important;
  border-bottom: 1px solid silver !important;
  margin-bottom: 5px !important;
  color: deeppink !important;
}

.mac-icon > span {
  display: inline-block !important;
  letter-spacing: 5px !important;
  word-spacing: 5px !important;
  width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
}

.mac-icon-red {
  background-color: red !important;
}

.mac-icon-yellow {
  margin-left: 10px;
  background-color: yellow !important;
}

.mac-icon-green {
  margin-left: 10px;
  background-color: green !important;
}

.mac-icon-lang {
  width: 50px !important;
  padding-left: 10px !important;
  font-size: 16px !important;
  vertical-align: top !important;
}

.copy-button {
  padding: 2px 8px !important;
  color: #ffffff !important;
  background-color: #9999aa !important;
  margin-bottom: 5px !important;
  border-radius: 5px !important;
  outline: none !important;
  border: none !important;
}

.copy-button {
  float: right !important;
}

.copy-button:hover {
  cursor: pointer !important;
  background-color: black !important;
}

.markdown-body .lang- {
  display: block;
  overflow: auto;
  font-size: 16px !important;
  background: #272822 !important;
  color: #fff;
}

.markdown-body .hljs {
  display: block;
  overflow: auto;
  font-size: 16px !important;
  background: #272822 !important;
  color: #fff;
}

.hljs,
.hljs-tag,
.hljs-subst {
  color: #f8f8f2 !important;
}

.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2 !important;
}

.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
  color: #ae81ff !important;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
  color: #a6e22e !important;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
  color: #f92672 !important;
}

.hljs-symbol,
.hljs-attribute {
  color: #66d9ef !important;
}

.hljs-params,
.hljs-class .hljs-title {
  color: #f8f8f2 !important;
}

.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
  color: #e6db74 !important;
}

.hljs-comment,
.hljs-deletion,
.hljs-meta {
  color: #75715e !important;
}
</style>

最后附上完成的效果