在 Vue3 中使用 v-md-preview

最新推荐文章于 2024-05-17 15:09:28 发布

箫笙默

最新推荐文章于 2024-05-17 15:09:28 发布

阅读量3.2k

点赞数

分类专栏： Vue.js v-md-preview 文章标签：前端 typescript vue.js

本文链接：https://blog.csdn.net/qq_40984565/article/details/126284474

版权

先附上效果图——点击左侧目录，右侧可以定位到对应内容

安装

npm i @kangc/v-md-editor@next -S

注意要安装支持vue3的版本

官网链接

引入

主题有两种 github主题和 vuePress主题，这里用的是github主题的。

详见官网这里就不贴了复制一下就好

具体实现

布局用的是 element-plus 中响应式布局

<template>
  <div class="markInner">
    <el-row :gutter="10">
      <!-- 目录部分 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="4">
        <div
          :style="{
            cursor: 'pointer',
            height: sHeight,
            ov

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

箫笙默

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
在 Vue3 中使用 v-md-preview

在vue3中使用v-md-preview
复制链接

扫一扫

专栏目录

vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用

10-17

vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用

vue3预览图片和pdf封装

weixin_48198130的博客

01-06

301

vue3预览图片和pdf封装

3 条评论您还未登录，请先登录后发表或查看评论

vue3使用MarkDown编辑器并预览以及报错解决办法

XujiRe的博客

08-02

1797

vue3使用MarkDown编辑器并预览以及报错解决方法，v-md-editor防踩坑，v-md-editor使用方法

vite vue3使用 VMdPreview @kangc/v-md-editor编辑器解析md文件

最新发布

this__valve的博客

05-17

458

文件数据读取 VMdPreview

vu3项目使用 v-md-editor 生成文章目录(点击跳转、滚动高亮)

wrz2018的博客

01-09

1245

怎么安装v-md-editor编辑器以及使用不是这篇文章的内容，以下内容主要是v-md-editor编辑器的预览组件生成内容生成目录实现点击标题跳转、滚动页面标题高亮方法。

vue3 中让页面显示markdown文件内容

weixin_66496801的博客

08-12

1287

vue3 markdown的文件显示

vue3 markdown与锚点的完美交互

qq_33816243的博客

09-15

2172

markdown与锚点的交互使用是现在博客网站的标配。例如CSDN、简书、掘金，都有类似的功能。最近在开发博客网站时也遇到了同样的需求。本文详细总结了markdown与锚点交互相关的问题解决方法，如果你的博客网站也有类似的需求，希望这篇文章可以帮助到你。

vue解析md文件

mfxcyh的博客

01-19

481

vue解析md文件

Vue3展示Markdown内容

yml9528的博客

06-19

5424

起因想要搭建一个个人网站，然后在网站上展示个人信息以及平时学习或者使用框架的一些内容。所以需要一个能够将markdown内容转化到页面上展示（就类似于github或者各大博客网站）。个人网站是vue3，vite构建。首先是在 npm上搜索markdown去找寻对应框架，试过其中几个，例如： markdown-loader vue-markdown markdown-it markdown-it-vue v-md-editor markdown-loader 搜索markdown首先出来的就是这个，然

解决vue组件中使用v-for出现告警问题及v for指令介绍

08-28

在 Vue 组件中使用 v-for 指令时，经常会出现告警问题，这篇文章将为大家介绍解决该问题的方法，并详细介绍 v-for 指令的使用。解决 Vue 组件中使用 v-for 告警问题在项目中运行 v-for 代码段时，可能会出现告警...

vue3实现v-model原理详解

10-16

主要介绍了vue3实现v-model原理详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在vue的v-for中使用索引index值

01-06

下面我们将详细探讨在Vue的`v-for`中如何使用索引`index`值。首先，`v-for`语法的基本形式是： ```html <template v-for="(item, index) in array">  ``` 这里的`item`是数组中的当前项，`index`...

vue中input的v-model清空操作

10-16

首先，当我们在组件中使用`v-model`时，例如 `<input v-model="num">`，`num`是父组件的一个数据属性。通常，我们可以通过直接改变`num`的值来更新输入框的内容，但当试图在子组件内部清空这个输入框时，直接修改`...

MD操作文档

qq_26821793的博客

07-26

823

某些预览主题的代码模块背景是暗色系，将这个属性设置为 true，会自动在该主题下的 light 模式下使用暗色系的代码风格。在每次生成 html 后，通过该方法移除危险内容，比如 xss 相关，当你很确定你的内容不会出现类似情况时，不必设置它。编辑器唯一标识，非必须项，服务端渲染时，防止产生服务端与客户端渲染内容不一致错误提示，以及单页面多编辑器时做区别。标题栏添加表格时，预设待选表格大小，第一个代表最大列数，第二个代表最大行数。)，可自行扩展其他语言，同时可覆盖内置的中英文。

前端读取md，生成对应目录并实现点击标题跳转到指定位置

qq_41822084的博客

06-23

3146

公司项目需要读取md文件。项目前端实现为vue3+ts，引入的md解析插件为v-md-editer，但是只引入了预览模式，所以没有插件自带的目录功能，需要自己实现。

vue3使用v-md-editor预览markdown内容

weixin_60886885的博客

06-01

3912

vue3使用v-md-editor预览markdown内容

Vue3 实现文件预览 Word Excel pdf 图片视频等格式大全!!!!

m0_65607651的博客

10-17

9313

Vue3 实现文件预览 Word Excel pdf 图片视频等格式大全!!!!

vue3中 v-md-editor 编辑器按需引入

07-28

在 Vue 3 中按需引入 v-md-editor 编辑器，你可以按照以下步骤进行操作： 1. 首先，安装 v-md-editor 包及其相关依赖： ``` npm install v-md-editor @kangc/v-md-editor @kangc/v-md-editor/lib/theme/style/vuepress.css ``` 2. 在你的 Vue 3 项目中，创建一个名为 `vmdeditor.js` 的文件，用于配置按需引入： ```javascript // vmdeditor.js import { createApp } from 'vue' import VMdEditor from '@kangc/v-md-editor' import '@kangc/v-md-editor/lib/style/base-editor.css' import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js' // 引入你需要使用的编辑器组件 import { Vditor, CodeMirror, Prism, TextArea } from '@kangc/v-md-editor/lib/codemirror-editor' // 注册编辑器组件 VMdEditor.use(vuepressTheme, { Prism, CodeMirror, TextArea }) // 创建 Vue 应用实例 const app = createApp({}) app.use(VMdEditor) app.mount('#app') ``` 3. 在你的 Vue 3 项目中的入口文件（通常是 `main.js`）中引入 `vmdeditor.js` 文件： ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import './vmdeditor.js' // 引入 vmdeditor.js 文件 createApp(App).mount('#app') ``` 4. 现在，你可以在 Vue 组件中使用 v-md-editor 编辑器组件了。例如，在 `App.vue` 组件中使用 Vditor 编辑器： ```vue <template> <v-md-editor> <Vditor v-model="content" /> </v-md-editor> </template> <script> export default { data() { return { content: '' } } } </script> ``` 通过以上步骤，你可以按需引入 v-md-editor 编辑器，并在 Vue 3 项目中使用。记得根据你的需求选择合适的编辑器组件进行引入和使用。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交