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

简介: 本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。

概述

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件

  1. 轻量版编辑器
    轻量版编辑器左侧编辑区域使用 textarea 实现。
    优点:足够轻量
    缺点:不支持更为丰富的编辑区功能扩展。例如:无法根据不同的语法在输入框内显示不同的样式。
  2. 进阶版编辑器
    进阶版编辑器左侧编辑区域使用 CodeMirror (opens new window)实现。
    优点:可以根据 CodeMirror 提供的 Api 来自定义扩展编辑区域功能,提高编辑体验。
    缺点:文件体积远大于轻量版
  3. 预览组件
    当你只需要对 markdown 语法进行解析并预览的时候,可以使用该组件。
  4. html 预览组件
    当你只需要对保存后的 html 文本进行预览的时候,可以使用该组件。
  5. 特性
    高度可定制化,高度可扩展性,支持自定义主题包,提供开箱即用的主题包,提供多个组件。可按需使用。

安装支持vue3版本

# 使用 npm
npm i @kangc/v-md-editor@next -S

# 使用 yarn
yarn add @kangc/v-md-editor@next

使用

1.使用markdown编辑器 VMdEditor

首先在项目的main.js中进行挂载,然后再去页面中使用

import {
    createApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs from 'highlight.js';

VMdEditor.use(githubTheme, {
   
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdEditor);

页面使用

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script setup>
  import {
    ref} from 'vue'
  const text = ref("")
</script>

2.markdown文本格式前端渲染 VMdPreview

import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css'

VMdPreview.use(githubTheme, {
   
  Hljs: hljs,
});

const app = createApp(/*...*/);

app.use(VMdPreview);
<template>
  <v-md-preview :text="content"></v-md-preview>
</template>
<script setup>
  import {
    ref} from 'vue'
  const content =ref() 
</script>

例子

效果

  1. markdown 编辑器界面
    在这里插入图片描述

  2. markdown 预览界面

在这里插入图片描述

代码部分

  1. main.js
import './assets/main.css'

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'

// markdown编辑器
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js'; // highlightjs

VMdEditor.use(githubTheme, {
   
    Hljs: hljs,
});



// markdown 预览 markdown解析需要的配置项目
import VMdPreview from '@kangc/v-md-editor/lib/preview';
// import '@kangc/v-md-editor/lib/style/preview.css'
// import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// import hljs from 'highlight.js';

VMdPreview.use(githubTheme, {
   
  Hljs: hljs,
});

const app = createApp(App)

app.use(router)
app.use(VMdEditor)
app.use(VMdPreview)
app.mount('#app')
  1. MarkdownEdit.vue
<script setup>
import {
     ref } from 'vue'
import {
     RouterLink } from 'vue-router'
const text = ref("")
</script>

<template>
  <main>
   <div style="width:80vw;">
    <h3>markdown编辑器</h3> <RouterLink to="/read">markdown预览测试</RouterLink>
    <v-md-editor v-model="text" height="700px" ></v-md-editor>
   </div>
  </main>
</template>
  1. MarkdownRead.vue
<script setup>
import {
     ref } from 'vue'

const contentA = ref() 
const readText = ()=>{
    
  // 请求的是我自己的接口地址,后端代码逻辑就是存到数据库中的一个text文件,然后下面完整的代码中,我提供了我的markdown文本
  fetch('http://robin.com/Article/18')  
    .then(response => response.text())  
    .then(data => {
    
      contentA.value = JSON.parse(data).content
      //console.log(contentA.value)
    })  
    .catch((error) => console.error('Error:', error));
}
readText()
</script>

<template>
  <div class="about">
    <div>
      <v-md-preview :text="contentA"></v-md-preview>
    </div>
  </div>
</template>

<style>
@media (min-width: 1024px) {
    
  .about {
    
    min-height: 100vh;
    min-width: 1024px;
    margin: 0 auto;
    display: flex;
    align-items: center;
  }
}
</style>

完整代码

链接: https://pan.baidu.com/s/1kzCxIt-oXdsKCKgBW91gOQ 提取码: zk3w 复制这段内容后打开百度网盘手机App,操作更方便哦

相关文章
|
16天前
|
Linux UED C++
MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
嗨,大家好,我是小华同学。MarkEdit是一款跨平台的Markdown编辑器,支持Windows、macOS和Linux,提供实时预览、快捷键、自定义主题和插件系统等核心功能。它适用于日常笔记、技术文档、博客写作、学术论文和电子书制作等多种场景。
109 31
|
3月前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
175 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
280 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
4月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
215 1
Linux系统之部署轻量级Markdown文本编辑器
|
7月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
7月前
|
Linux 开发工具 数据安全/隐私保护
【linux】如何优雅的使用vim编辑器
【linux】如何优雅的使用vim编辑器
|
8月前
|
缓存 人工智能 Linux
【Linux】--- 详解Linux软件包管理器yum和编辑器vim
【Linux】--- 详解Linux软件包管理器yum和编辑器vim
109 0
|
8月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
94 5
|
8月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解
|
8月前
|
程序员 Linux 开发工具
Vi和Vim编辑器
Vi和Vim编辑器

热门文章

最新文章