Vue3使用md-editor-v3的实例解读markdown文本
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">1. 基础实现</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">安装依赖</a></li><li><a href="#_lab2_0_1">基础编辑器组件 (BasicEditor.vue)</a></li><li><a href="#_lab2_0_2">自定义工具栏</a></li></ul><li><a href="#_label1">2. 预览功能</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_3">预览组件 (<MdPreview.vue)</a></li></ul><li><a href="#_label2">总结</a></li><ul class="second_class_ul"></ul></ul></div><p>下面我将提供一个完整的 Vue 3 项目中使用 md-editor-v3 的 Markdown 编辑器实现，包含常用功能和最佳实践。</p><p class="maodian"><a name="_label0"></a></p><h2>1. 基础实现</h2>
<p class="maodian"><a name="_lab2_0_0"></a></p><h3>安装依赖</h3>
<div class="jb51code"><pre class="brush:js;">npm install md-editor-v3
</pre></div>
<p>也可以是pnpm安装</p>
<div class="jb51code"><pre class="brush:js;">pnpm install md-editor-v3
</pre></div>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>基础编辑器组件 (BasicEditor.vue)</h3>
<div class="jb51code"><pre class="brush:js;"><template>
<template>
<MdEditor v-model="text" />
</template>
<script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const text = ref('Hello Editor!');
</script>
</pre></div>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>自定义工具栏</h3>
<p>根据 md-editor-v3 的文档，以下是完整的工具栏参数列表：</p>
<div class="jb51code"><pre class="brush:js;">const toolbars = [
'bold', // 加粗
'underline', // 下划线
'italic', // 斜体
'strikeThrough', // 删除线
'title', // 标题
'sub', // 下标
'sup', // 上标
'quote', // 引用
'unorderedList', // 无序列表
'orderedList', // 有序列表
'task', // 任务列表
'codeRow', // 行内代码
'code', // 代码块
'link', // 链接
'image', // 图片
'table', // 表格
'mermaid', // Mermaid图表
'katex', // 数学公式
'revoke', // 撤销
'next', // 重做
'save', // 保存
'=', // 等宽
'pageFullscreen',// 页面全屏
'fullscreen', // 全屏
'preview', // 预览
'htmlPreview', // HTML预览
'catalog', // 目录
'-' // 分隔符
]
</pre></div>
<p>您可以根据需要自由组合这些参数来定制工具栏。</p>
<p>参考以下示例</p>
<div class="jb51code"><pre class="brush:js;"><script setup>
import { ref } from 'vue'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
const text = ref('Hello Editor!')
// 自定义工具栏配置
const toolbars = [
'bold', // 加粗
'underline', // 下划线
'italic', // 斜体
'strikeThrough', // 删除线
'title', // 标题
'sub', // 下标
'sup', // 上标
'quote', // 引用
'-', // 分隔符
'unorderedList', // 无序列表
'orderedList', // 有序列表
'task', // 任务列表
'-', // 分隔符
'codeRow', // 行内代码
'code', // 代码块
'link', // 链接
'image', // 图片
'table', // 表格
'_', // 分隔符
'mermaid', // Mermaid图表
'katex', // 数学公式
'revoke', // 撤销
'next', // 重做
'save', // 保存
'=', // 等宽
'-', // 分隔符
'pageFullscreen', // 页面全屏
'fullscreen', // 全屏
'preview', // 预览
'htmlPreview', // HTML预览
'catalog', // 目录
]
</script>
<template>
<MdEditor v-model="text" :toolbars="toolbars" />
</template>
</pre></div>
<p class="maodian"><a name="_label1"></a></p><h2>2. 预览功能</h2>
<p class="maodian"><a name="_lab2_1_3"></a></p><h3>预览组件 (<MdPreview.vue)</h3>
<ul><li><code>MdPreview</code>是 <strong>文章预览</strong></li><li><code>MdCatalog</code>是<strong>目录预览</strong></li></ul>
<div class="jb51code"><pre class="brush:js;"><template>
<!-- 文章预览 -->
<MdPreview :id="id" :modelValue="text" />
<!-- 目录预览 -->
<MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template>
<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>
</pre></div>
<p>还可以实现很多功能</p>
<p>参考网址：<a href="https://imzbf.github.io/md-editor-v3/en-US/demo" rel="external nofollow" target="_blank">md-editor-v3</a></p>
<p>这个实现提供了完整的Markdown编辑体验，可以直接集成到Vue 3项目中，也可以根据需要进行定制和扩展。</p>
<p class="maodian"><a name="_label2"></a></p><h2>总结</h2>
<p>以上为个人经验，希望能给大家一个参考，也希望大家多多支持琼殿技术社区。</p>
頁:
[1]