当前位置：首页 > article >正文

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

article 2024/11/19 2:28:16

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,imgList:[] }
  },
  methods: {
    handleChange(v) {
      this.value = v
    },
    uploadImage(e) {
  return new Promise((resolve, reject) => {
    你的接口(e[0]).then((res) => {
    
      this.imgList.push({
        alt: "",
        url: "",
        title: "",
      });
        resolve(this.imgList)
    });
  });
}
  },
}
</script>

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

查看全文

http://www.kler.cn/a/399517.html