集成 Markdown 编辑器

这是我参与「第四届青训营 」笔记创作活动的第5天。

因为项目使用的技术栈是 vite + vue3，需要使用一个Markdown编辑器来实现发布文章的功能，所以要选择一种。

这里选用的是md-editor-v3，它是Markdown编辑器Vue3版本，使用jsx和 typescript 语法开发，支持切换主题、prettier美化文本等。

下面介绍一下它的简单使用。

安装

 yarn add md-editor-v3

使用

新建一个view下的文件

 <template>
   <CommHeader />
   <div class="md"><md-editor v-model="text" /></div>
 </template>
 ​
 <script setup lang="ts">
 import CommHeader from "@/components/common/CommHeader.vue";
 import { ref } from "vue";
 // md-editor-v3
 import MdEditor from "md-editor-v3";
 import "md-editor-v3/lib/style.css";
 const text = ref("Hello Editor!");
 console.log(text.value);
 </script>
 ​
 <style scoped>
 .md {
   height: 100%;
   width: 100%;
   position: fixed;
   top: 70px;
   left: 0;
 }
 </style>
 ​

编辑器的内容是使用 vue 的 v-model 来实现数据绑定在 text 中，通过 ref 实现响应式const text = ref("Hello Editor!");. 通过 value 属性可以获取具体值。

在 <md-editor v-model="text" /> 标签里面，可以选择许多属性。具体查看文档：imzbf.github.io/md-editor-v…

获取html代码

onHtmlChanged

• 类型：(h: string) => void

  html 变化回调事件，用于获取预览 html 代码。

编辑器考虑到了可能后端不存储md格式的文本，而是html内容，所以提供了onHtmlChanged方法，用于编辑内容变化后，marked编译了内容的回调，入参即是html内容。

 <template>
   <md-editor
     v-model="text"
     @onHtmlChanged="saveHtml"
   />
 </template>
 ​
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MdEditor from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
 ​
 export default defineComponent({
   components: { MdEditor },
   data() { return { text: '' }; },
   methods: { saveHtml(h: string) { console.log(h) }}
 });
 </script>

主题切换

这一块相对比较简单了，通过theme切换，demo如下：

<template>
  <CommHeader />
  <div class="md"><md-editor v-model="text" :theme="theme" /></div>
</template>

<script setup lang="ts">
import CommHeader from "@/components/common/CommHeader.vue";
import { ref } from "vue";
// md-editor-v3
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";
const text = ref("Hello Editor!");
console.log(text.value);
let theme: any = ref("light");
theme = "dark";
</script>

总结

文章只是介绍一下这个 Markdown 编辑器，安利一波，具体的实现风格按照 docs 改一下可以了。

更多用法请查看官网：md-editor-v3