vue3+rust个人博客建站日记4-Vditor搞定MarkDown

即然是个人博客，那么绝对不能丢给自己一个大大的输入框敷衍了事。如果真是这样，现在就可以宣布项目到此结束了。如今没人享受用输入框写博客。作为一个有追求的程序员，作品就要紧跟潮流。

后来，Markdown 的崛起逐步改变了大家的排版方式。再加上我们其他几个项目都是面向程序员用户的，所以迁移到 md 上也是大势所趋。 ——Vditor文档

给个人博客嵌入MarkDownb编辑器，即便设备上没有支持MarkDown格式的文本编辑器，我们仍然能随时随地优雅的编写博客。这里的MarkDown组件，选择了Vditor,由思源笔记团队开源的浏览器端 Markdown 编辑器，MIT开源协议(几乎是最为宽松的开源协议)，感谢思源团队的无私分享。

为了让我们的博客有良好的编辑和阅读体验，需要做两件工作：

1. 封装Vditor编辑器组件
2. 封装Vditor预览器组件
   ps: 做好黑夜模式适配

在 src/components/目录下创建MarkDownEdit.vue、MarkDownRead.vue

封装Vditor编辑器组件

MarkDownEdit.vue

因为Vditor的初始化完成后，vue无法监听到Vditor对象内参数的变化，所以我们需要用一些小技巧来告诉框架刷新状态，以完成黑夜模式的变化。创建一个computed参数active,让其计算被pinia托管的参数active，一旦active变化，则调用setTheme()方法设置 主题。
这里先设置pinia
在src/stores/目录下创建themeSwitch.js,内容如下

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useThemeSwitch = defineStore('themeSwitch', () => {const active = ref(false)function changeActive(newActive){this.active = newActive}return { active, changeActive }
})

然后编写MarkDownEdit.vue

  <script setup >import { ref, onMounted,computed } from 'vue';import Vditor from 'vditor';import 'vditor/dist/index.css';const vditor = ref(null);const props = defineProps(['active'])const active = computed({get(){if(vditor.value!=null){console.log(props.active)const mode = props.active?'dark':'classic'vditor.value.setTheme(mode,mode)}return props.active;},})let content = ''let width = 0;let height = 0;function ReInitVidor() {width = window.innerWidth*0.92  < 600 ? 600 : window.innerWidth*0.92 ;height = window.innerHeight * 0.9;vditor.value = new Vditor('vditor', {mode:'sv',preview:{},icon:'material',height:height,width:width,placeholder:"君子藏器于身，待时而动",counter:{enable:true,},preview:{actions:[]},input:(value) => {content = value},after: () => {// vditor.value is a instance of Vditor now and thus can be safely used herevditor.value.setValue(content);},});}onMounted(() => {window.addEventListener('resize', ReInitVidor)ReInitVidor();});</script>

<template><div style="display: flex;flex-direction: row;justify-content: center;"><!-- 一定要在html的部分插入active,vue框架才会去真正监听并计算active参数--><div hidden>active: {{ active }}</div><div id="vditor" ></div></div></template>

封装Vditor预览器组件

<template><div><div hidden>{{active}} </div><div id="vditor" ></div></div></template><script setup >import { onMounted,computed, } from 'vue';import Vditor from 'vditor';import 'vditor/dist/index.css';const props = defineProps(['active'])let active = computed({get(){return props.active;},})const IPreviewOptions = {theme:{current:props.active?"dark":"light"},mode:"dark",speech:{"enable":true}}const mdStr=`## 💡 简介[Vditor](https://b3log.org/vditor) 是一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供[桌面版](https://b3log.org/siyuan)。`function ReInitVidor() {Vditor.preview(document.getElementById('vditor'),mdStr,IPreviewOptions);}onMounted(() => {addEventListener("resize",ReInitVidor)ReInitVidor();});</script>

使用组件

在src/views/目录下创建BlogEditView.vue、BlogReadView.vue文件

BlogEditView.vue

<script setup>import MarkDownEdit from '../components/MarkDownEdit.vue';import { useThemeSwitch } from '../stores/themeSwitch';const themeSwitcher = useThemeSwitch()
</script><template><mark-down-edit :active="themeSwitcher.active"></mark-down-edit>
</template>

BlogReadView.vue

因为vditor.preview没有提供setTheme这种好用的函数。所以我们在active值改变后，要告诉vue框架强制刷新组件。这里使用:key=“”参数，组件会监听key参数是否变化，变化则刷新组件。

<script setup>import MarkDownRead from '../components/MarkDownRead.vue';import { NSpace } from 'naive-ui';import { useThemeSwitch } from '../stores/themeSwitch';const themeSwitcher = useThemeSwitch()
</script>
<template><n-space         style="height: 100%;" justify="center" size="large"><mark-down-read class="blog-read-preview" :key="themeSwitcher.active" :active="themeSwitcher.active"></mark-down-read></n-space>
</template><style>
.blog-read-preview{margin-inline: 15vw;max-width: 900px;
}
</style>

最终效果

编辑器

预览器

暂时的休息

当前只是一种简单的封装，方便组织前端代码结构，在实现功能时，会按需进一步修改相关代码。