实现一个基础的 Markdown 编辑器：Vue 3 与富文本解析
简介
在现代网页开发中，Markdown 已经成为一种广泛使用的轻量级标记语言，它以简洁明了的语法让用户能够快速创建格式化文本。随着 Vue 3 的推出，利用其 Composition API（即 setup 语法糖）来构建一个简单的 Markdown 编辑器变得更加高效。本文将介绍如何结合 Vue 3 和富文本解析库，来实现一个基础的 Markdown 编辑器。
项目结构
我们首先要规划项目的基本结构，通常我们可以这样组织：
markdown-editor/
├── public/
│ └── index.html
└── src/
├── components/
│ └── MarkdownEditor.vue
├── App.vue
├── main.js
└── styles.css
安装依赖
使用 Vue CLI 创建新项目后，我们需要安装一个 Markdown 解析器，比如 marked，它可以将 Markdown 文本转换为 HTML。可以通过以下命令安装：
npm install marked
创建 MarkdownEditor 组件
接下来，我们在 src/components/MarkdownEditor.vue 中创建我们的 Markdown 编辑器组件。
<template>
<div class="markdown-editor">
<textarea v-model="markdownText" placeholder="输入Markdown文本..."></textarea>
<div v-html="renderedHtml" class="preview"></div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { marked } from 'marked';
// 定义一个响应式变量来存储Markdown文本
const markdownText = ref('');
// 使用computed属性来处理Markdown文本并转换成HTML
const renderedHtml = computed(() => {
return marked(markdownText.value, {
gfm: true, // 使用Github Flavored Markdown
breaks: true // 开启换行
});
});
</script>
<style scoped>
.markdown-editor {
display: flex;
flex-direction: column;
gap: 20px;
}
textarea {
width: 100%;
height: 200px;
padding: 10px;
font-family: monospace;
font-size: 14px;
}
.preview {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
background-color: #f9f9f9;
min-height: 200px;
overflow-y: auto;
}
</style>
代码解析
Template部分：我们使用一个
<textarea>来输入 Markdown 文本，同时用一个<div>来展示解析后的 HTML 内容。v-html指令将绑定computed属性renderedHtml，实现 Markdown 到 HTML 的转换。Script部分：
- 使用
setup语法糖引入ref和computed，来处理状态和计算属性。 markdownText：用ref创建一个响应式变量，初始化为空字符串，作为用户输入的 Markdown 文本。renderedHtml：computed属性，用于实时将输入的 Markdown 文本转为 HTML。
- 使用
Style部分：简单的样式，保证编辑器区域看起来整洁，并且实现一定的响应性。
应用 MarkdownEditor
在我们的主文件 src/App.vue 中引入并使用刚创建的 MarkdownEditor 组件：
<template>
<div id="app">
<h1>Markdown 编辑器</h1>
<MarkdownEditor />
</div>
</template>
<script setup>
import MarkdownEditor from './components/MarkdownEditor.vue';
</script>
<style>
#app {
width: 80%;
margin: 0 auto;
font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>
代码解析
我们使用 MarkdownEditor 组件，并给出一个简单的标题，整个应用看起来简约明了，便于使用。
运行项目
在项目目录下运行以下命令启动开发服务器：
npm run serve
访问 http://localhost:8080 可以看到我们的 Markdown 编辑器。您可以在 <textarea> 中输入 Markdown 文本，例如：
# 这是一个标题
## 这是一个二级标题
这是一些普通的文本，**加粗文本**，*斜体文本*。
- 列表项1
- 列表项2
[这是一个链接](https://www.example.com)
输入后，在下方的预览区域将实时显示渲染后的结果。
总结
在本文中，我们使用 Vue 3 的 setup 语法糖和 marked 库，创建了一个简单的 Markdown 编辑器。通过这样的方式，不仅简化了代码逻辑，还提升了代码的可读性和重用性。