Vue3整合掘金同款Markdown编辑器

官网：http://ckang1229.gitee.io/vue-markdown-editor/zh/#%E4%BB%8B%E7%BB%8Dv-md-editor 是基于 Vue 开发的 markdown 编辑器组件，分为轻量版和进阶版，这里只演示进阶版。

摘要 本文介绍了如何在Vue项目中集成mavon-editor富文本编辑器，包含以下内容： 安装配置mavon-editor，设置自定义工具栏选项 实现图片上传删除功能，包含前端封装和后端交互代码 使用showdown组件将markdown内容转换为HTML格式展示 提供编辑器样式配置和内容显示的处理方法

将下载后的文件放置到VUE3项目的public/static目录下（VUE2是放置到与src并列的static目录中）。单击上面的按钮可以分别获取左侧的Markdown内容（用于提交给服务端）和右侧的Html内容。放置好后的目录结构如下（EditorMarkdown.vue为下一步要创建的组件——集成了。可是不能直接使用，需要进行一些调整。经过不断尝试，调整成功。最新版本： v1.5.0，更新于 2015-06-09。

v-model="content" 绑定文章属性。

vue3中使用markdown编辑器

-- 可以添加更多的自定义工具按钮 -->

记录一下项目中使用markdown编辑器的流程 本项目使用的是v-md-editor，它是基于 Vue 开发的 markdown 编辑器组件 2. 使用 /plugins/index.ts /main.ts 解决方法 一定要保证此文件在tsconfig.json中有引入 4. 创建MdEditor组件 /components/MdEdtior/index.vue 父组件使用 markdown内容预览 解析后的html文本预览 页面效果 更多配置，请移步v-md-edito

安装markdown-it。在main.js中全局注册。使用markdown。

有两个组件：Editor 和 Viewer。Editor 顾名思义就是 Markdown 编辑器；Viewer 通常用于显示渲染的 Markdown 结果，无需编辑。

Vue3 Markdown 编辑器：md-editor-v3 使用指南及问题解答 项目基础介绍 md-editor-v3 是一款专为 Vue3 设计的 Markdown 编辑器，采用 JSX 和 TypeScript 开发，具备深色主题、使用 Prettier 美化内容（仅限 Markdown 内容）、直接渲染文章、图片粘贴上传等功能。此外，它支持内置的中文和英文双语界面，并且允许高度定制工具栏和...

Vditor是一款浏览器端的Markdown编辑器，支持所见即所得（WYSIWYG）、即时渲染（IR）和分屏预览模式。它具有以下特点：支持三种编辑模式：WYSIWYG、IR和SV内置流程图、甘特图、时序图等图表支持数学公式、音视频、代码高亮等丰富功能高度可定制化的主题和工具栏官网Vditor - 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式 (b3log.org)Vditor允许完全自定义工具栏配置。toolbar: [

替换为您自己的TinyMCE API密钥。如果您还没有API密钥，请访问TinyMCE官方网站（https://www.tiny.cloud）注册并获取。现在，您就可以在Vue项目中使用TinyMCE富文本编辑器并内置Markdown编辑器了。指令绑定到一个数据变量上，同时将其显示为解析后的Markdown语法。步骤1：安装TinyMCE和markdown插件。步骤2：引入TinyMCE和markdown插件。在Vue项目中创建一个编辑器组件（例如。步骤3：创建编辑器组件。步骤4：使用编辑器组件。

Markdown 语法简洁，并且对于图片，图表、数学式都有支持，许多博客网站都广泛使用 Markdown 来撰写文章。

这里使用的v-md-editor 是基于 Vue 开发的 markdown 编辑器组件 安装支持vue3的版本： # 使用 npm npm i @kangc/v-md-editor@next -S 在vue3中注册： import { createApp } from 'vue'; import VueMarkdownEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/style/base-editor.css'; impo.