@bytemd/vue-next Markdown编辑器的使用

        1.工具介绍

                bytemd 是掘金开源的markdown编辑器, github地址 

        2.使用

                2.1 @bytemd/vue-next的下载安装

下载依赖
npm install @bytemd/vue-next

使用
<template>
  <Editor :value="value" :plugins="plugins" :locale="zhHans" @change="handleChange" />
</template>

<script>
import { Editor, Viewer } from '@bytemd/vue'
// 样式 
import 'bytemd/dist/index.css'
// 基础的汉化
import zhHans from "bytemd/lib/locales/zh_Hans.json"; //

const plugins = [
]

export default {
  components: { Editor },
  data() {
    return { value: '', plugins }
  },
  methods: {
    handleChange(v) {
      this.value = v
    },
  },
}
</script>

        3.插件的介绍以及使用

// gfm插件
import gfm from "@bytemd/plugin-gfm";
import gfmLocale from "@bytemd/plugin-gfm/locales/zh_Hans.json";
// 支持中断
import breaks from "@bytemd/plugin-breaks";
// 解析前言 格式化
import frontmatter from "@bytemd/plugin-frontmatter";
// 表情
import gemoji from "@bytemd/plugin-gemoji";
// 突出显示代码块
import highlight from "@bytemd/plugin-highlight";
import "highlight.js/styles/default.css";
// 数学公式插件
import math from "@bytemd/plugin-math";
import mathLocale from "@bytemd/plugin-math/locales/zh_Hans.json";
import "katex/dist/katex.css";
// 缩放图片 点击图片放大,再点击缩小
import mediumZoom from "@bytemd/plugin-medium-zoom";
// 图表
import mermaid from "@bytemd/plugin-mermaid";
import mermaidLocale from "@bytemd/plugin-mermaid/locales/zh_Hans.json";
// 主题
import theme from "bytemd-plugin-theme";
// 代码高亮
import highLightPlugin from "bytemd-plugin-highlight";
// 对齐方式
import alignPlugin from "bytemd-plugin-align";
// 图片的缩放
import imagePlugin from "bytemd-plugin-image";
// 代码复制
import copyCode from "bytemd-plugin-copy-code";
import "bytemd-plugin-copy-code/dist/style/index.css";

const plugins = [
  // 作用 删除线,任务列表,表格
  gfm({
    locale: gfmLocale,
  }),
  // 作用 数学公式
  math({
    locale: mathLocale,
  }),
  breaks(),
  frontmatter(),
  gemoji(),
  alignPlugin(),
  mediumZoom(),
  mermaid({
    locale: mermaidLocale,
  }),
  highlight(),
  theme(),
  highLightPlugin(),
  imagePlugin(),
  copyCode({
    copySuccess: (text) => {
      console.log("复制成功");
    },
    copyError: (err) => {},
    copyRight: "",
  }),
];

        4.插件的下载

@bytemd/plugin-gfm

@bytemd/plugin-breaks

@bytemd/plugin-frontmatter

@bytemd/plugin-gemoji

@bytemd/plugin-highlight"

@bytemd/plugin-math

@bytemd/plugin-medium-zoom

@bytemd/plugin-mermaid

bytemd-plugin-theme

bytemd-plugin-highlight

bytemd-plugin-align

bytemd-plugin-image

bytemd-plugin-copy-code

        5.上传图片的介绍

               配置 uploadImages 属性接受一个函数, 函数需要返回一个特定格式的数组

使用
<template>
  <Editor
    :value="value"
    :plugins="plugins"
    :locale="zhHans"
    @change="handleChange"
    :uploadImages="uploadImage"
  />
</template>

<script>
import { Editor, Viewer } from "@bytemd/vue";
// 样式
import "bytemd/dist/index.css";
// 基础的汉化
import zhHans from "bytemd/lib/locales/zh_Hans.json"; //

const plugins = [];

export default {
  components: { Editor },
  data() {
    return { value: "", plugins };
  },
  methods: {
    handleChange(v) {
      this.value = v;
    },
    uploadImage(e) {
      return new Promise((resolve, reject) => {
        你的接口(e[0]).then((res) => {
          resolve([
            {
              alt: e[0].name,
              url: res.url,
              title: e[0].name,
            },
          ]);
        });
      });
    },
  },
};
</script>

        最后的代码高亮,图片缩放,代码复制,主题插件,感谢作者作者文章地址