觊觎掘金的富文本编辑器已经很久了，研究了很长时间终于在自己博客上用上了。
先给大家展示一下成果：

虽然不能说一模一样吧也算是大差不离了。

ByteMD

浅看一下它官网怎么介绍自己吧：

ByteMD是使用Svelte构建的Markdown编辑器组件。它也可以用于其他库/框架，如React，Vue和Angular。

当然这些并不重要用它就是看它好看。

应用

先配置一下@符

//vite.config.js


// 配置@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';


export default defineConfig({
  // 引入scss
  pluginOptions: {
  },

  plugins: [
    vue()],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
      }
    ]
  },
});

我使用了Vue3 Vite Pinia Vue-Router4 JS

你都用Vue3了，为什么不用TS！

后端接口都是我用node写的返回的数据类型门清就不用TypeScript了。

上代码！

安装依赖

npm install @bytemd/vue-next bytemd juejin-markdown-themes -S
npm i @bytemd/plugin-breaks @bytemd/plugin-frontmatter @bytemd/plugin-gemoji @bytemd/plugin-gfm @bytemd/plugin-highlight @bytemd/plugin-highlight-ssr @bytemd/plugin-math @bytemd/plugin-math-ssr @bytemd/plugin-medium-zoom @bytemd/plugin-mermaid -S

这些依赖具体有些什么用可以参考官网文档

template

标签有两个： Viewer 与 Editor

Viewer用于展示

Editor用于编写

<Viewer
    class="bytemd"

    :locale="zhHans"

    mode="split"
    :value="value"
/>

<Editor
    class="bytemd"

    :locale="zhHans"

    :value="value"
    @change="handleChange"
    mode="auto"
/>

script setup

引入所需依赖

//Viewer


import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "juejin-markdown-themes/dist/juejin.min.css";
import { Editor, Viewer } from "@bytemd/vue-next";
import gfm from "@bytemd/plugin-gfm";

import zhHans from "bytemd/locales/zh_Hans.json";

import { ref } from "vue";
import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "juejin-markdown-themes/dist/juejin.min.css";
import { Editor, Viewer } from "@bytemd/vue-next";
import gfm from "@bytemd/plugin-gfm";


import zhHans from "bytemd/locales/zh_Hans.json";
import breaks from "@bytemd/plugin-breaks";
import highlight from "@bytemd/plugin-highlight";
import frontmatter from "@bytemd/plugin-frontmatter";
import mediumZoom from "@bytemd/plugin-medium-zoom";
import gemoji from "@bytemd/plugin-gemoji";


const mesages = ref({
  title: "",
  article: "",
  synopsis: "",
});

const handleChange = (v) => {
  mesages.value.article = v;
};

style

因为bytemd的默认高度只有300px（好像是300还是600我忘了）所以在页面中时候高度没有办法撑起来整个页面就需要使用样式穿透来更改样式：

    ::v-deep(.bytemd) {
      height: 100%;
    }

还有在使用Viewer标签进行展示时不想展示那些按钮啥的也可以使用样式穿透方法修改。

嗯~基本上就这些，编写的文章以字符串的数据类型保存在Viewer标签中可以原样还原，所以我直接就用了也没做啥处理，但是因为在存储到数据库的时候会有一些问题所以在后端上做了加密存储和解密使用。

完整代码供参考

<template>
<Viewer
    class="bytemd"
    :locale="zhHans"
    mode="split"
    :value="collapsed.article"
/>

</template>

<script setup>
defineProps({
  collapsed: null,
});


import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "juejin-markdown-themes/dist/juejin.min.css";
import { Editor, Viewer } from "@bytemd/vue-next";
import gfm from "@bytemd/plugin-gfm";
import zhHans from "bytemd/locales/zh_Hans.json";

</script>
<style lang="scss" scoped>
.bytemd {
  border: none;
  padding: 0 40px;
  font-size: 0.8rem;
  color: rgb(106, 105, 105);
}
::v-deep(.bytemd) {
  height: 100%;
}
</style>