mytemd

mytemd：字节跳动的掘金团队开发的项目，开源免费可以商用！！！
mytemd包含了：组件包含Editor和Viewer，Editor可以编写加展示，Viewer只能展示
如果不想细看文章，请直接再安装完依赖后，直接去看标题：完整组件展示

安装依赖

大家只管安装，一会再教大家如何使用

1. 安装环境依赖

   pnpm install bytemd

2. 安装vue3版本组件

   pnpm install @bytemd/vue-next

3. 安装插件 只展示部分插件，剩下的插件感觉没用

//必须安装插件
pnpm install juejin-markdown-themes//安装掘金主题 不安装无法正常显示markdown文本

//选择安装插件
pnpm install @bytemd/plugin-medium-zoom//图片缩放
pnpm install @bytemd/plugin-gfm //让mrakdown可以展示表格
pnpm install @bytemd/plugin-gemoji //支持Gemoji短代码
pnpm install @bytemd/plugin-highlight //支持代码块高亮

开始搭建

• 博主将这个组件单独封装了一个新的组件，这样就可以在任何地方使用了

1. 引入组件 Editor和Viewer

import { Editor } from '@bytemd/vue-next'

如果此时你的Editor报红，简单，随便创建一个.d.ts文件，引入下面内容

declare module '@bytemd/vue-next' {
  export const Editor: any
  export const Viewer: any
}

2. 导入我们下载的插件 如果觉得麻烦或者不知道用哪些插件，就直接全部导入博主的就完了

import 'juejin-markdown-themes/dist/juejin.min.css'
import 'bytemd/dist/index.css'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import zhHans from 'bytemd/locales/zh_Hans.json'
import gemoji from '@bytemd/plugin-gemoji'
import mediumZoom from '@bytemd/plugin-medium-zoom'

3. 导入完毕后我们开始去准备如何使用

1. 导入组件 设置好属性

<template>
  <view class="main">
    <div class="details">
      <Editor
        :value="value"
        :plugins="plugins"
        @change="handleChange"
        :locale="zhHans" 
        :upload-images="handleUploadImages"
      />
    </div>
  </view>
</template>

解释这些属性的内容

• :value=“value” 文本内容
• :plugins=“plugins” 我们要添加的插件
• @change=“handleChange” 监听时间，当文本内容变化时触发
• :locale=“zhHans” 设置语言为中文(不设置的话markdown中的选项为英文)
• :upload-images=“handleUploadImages” 设置上传图片方法

2. 接下来我们开始添加这些属性

• 因为我们是个自己搭建的组件，所以我们需要将部分属性给提供给外部组件(mode可以忽略，没啥用处)

/**
 * 定义组件属性
 */
interface Props {
  value: string;
  handleChange: (v: string) => void;
  mode?: string;
}
//供外部使用
const props = withDefaults(defineProps<Props>(), {
  value: () => '',
  mode: () => 'split',
  handleChange: (v: string) => {
    console.log(v)
  }
})

3. 接下来添加插件

• 没啥好说的，就是直接这样写

//添加的插件
const plugins = [
  gfm(),
  highlight(),
  gemoji(),
  mediumZoom()
]

4.接下来就是我们的文件上传方法了

• 这是博主自己写的内容，如果实在不会写，就去随便找一个，如果还不行，可以评论，博主可以考虑再单独写一篇vue3上传文件的博客。主要问题其实出在上传方法上uploadImage是博主自定义的方法

//上传图片
const handleUploadImages = async (files: any) => {
  let imgs: any = []
  for (let index = 0; index < files.length; index++) {
    const item = files[index]
    let fromData = new FormData()
    fromData.append('file', item)
    let res = await uploadImage(fromData)  // 上传到阿里云
    imgs.push({
      title: item.name,
      url: res.data
    })
  }
  return imgs
}

• 这是博主定义的方法

import service from '@/request/request'
import type { ApiResponse } from '@/request/ApiResponse'

export const uploadImage = (data: FormData): ApiResponse<string> => {
  return service.post('/file/upload', data)
}

• service是博主自己二次封装的axios，ApiResponse是博主自定义的泛型，太多了就跑题了，就不说了

完整组件展示

• 大家可以直接复制这部分代码，自己创建一个组件，前提是把博主的上传文件给删掉，剩下的无脑用

<template>
  <view class="main">
    <div class="details">
      <Editor
        :value="value"
        :plugins="plugins"
        @change="handleChange"
        :locale="zhHans"
        :upload-images="handleUploadImages"
      />
    </div>
  </view>
</template>

<script setup lang="ts">
import { Editor } from '@bytemd/vue-next'
import 'juejin-markdown-themes/dist/juejin.min.css'
import 'bytemd/dist/index.css'
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import zhHans from 'bytemd/locales/zh_Hans.json'
import gemoji from '@bytemd/plugin-gemoji'
import mediumZoom from '@bytemd/plugin-medium-zoom'

import { defineProps, withDefaults } from 'vue'
import { uploadImage } from '@/service/UpLoadFile'

/**
 * 定义组件属性
 */
interface Props {
  value: string;
  handleChange: (v: string) => void;
  mode?: string;
}

//供外部使用
const props = withDefaults(defineProps<Props>(), {
  value: () => '',
  mode: () => 'split',
  handleChange: (v: string) => {
    console.log(v)
  }
})
//添加的插件
const plugins = [
  gfm(),
  highlight(),
  gemoji(),
  mediumZoom()
]
//上传图片
const handleUploadImages = async (files: any) => {
  let imgs: any = []
  for (let index = 0; index < files.length; index++) {
    const item = files[index]
    let fromData = new FormData()
    fromData.append('file', item)
    console.log('前端图片路径')
    console.log(fromData)
    let res = await uploadImage(fromData)  // 上传到阿里云

    console.log('图片路径')
    console.log(res)
    imgs.push({
      title: item.name,
      url: res.data
    })
  }
  return imgs
}

</script>

<style scoped lang="less">

</style>

• 接下来把我们上边创建的组件，导入我们想要导入的页面即可。 MdEditor 就是上方的组件

<template>
  <view>
    <MdEditor
      :value="value"
      :handle-change="handleChange"
    />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import MdEditor from '@/components/MdEditor.vue'
//给组件传入值 就是文章的内容
const value = ref<string>()
//当触发内容改变的时候直接将新的内容再赋值给value
const handleChange = (v: string) => {
  value.value = v
  console.log(v)
}
</script>

<style scoped lang="less">

</style>

• 页面效果展示