如何在vue项目中使用markdown编辑器

该博客介绍了如何在Vue项目中集成Markdown编辑器Vditor,包括安装、引入、配置及不同模式的使用。Vditor提供了分屏预览、即时渲染和所见即所得三种编辑模式,并支持自定义高度、缓存、事件监听等功能,适用于前端开发中的Markdown编辑需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在Vue 中使用 Vditor

官方文档 Vditor

  • 安装

npm install vditor --save

  • 引入

import Vditor from ‘vditor’
import ‘vditor/dist/index.css’

  • 使用
new Vue({
  el: '#app',
  data: {
    contentEditor: '',//组件实例
  },
  mounted () {
    this.contentEditor = new Vditor('vditor', {
      height: 360, //设置高度
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: false,
      },
      after: () => {
      //渲染完成 触发方法
        this.contentEditor.setValue('hello, Vditor + Vue!')
      },
    })
  },
})

markdown编辑分为3种模式
options中mode字段可选值

  • sv (分屏预览)
  • ir (即时渲染)
  • wysiwyg (所见即所得)

完整示例

<template>
  <div class="plugin-markdown">
    <div class="plugin-markdown-header">
      <span class="edit">编辑</span>
      <span class="prevew">预览</span>
    </div>
    <div
      id="vditor"
      name="description"
    ></div>
  </div>
</template>

<script>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
export default {
  name: 'MarkDown',
  props: {
    actionItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      contentEditor: {}
    }
  },
  mounted() {
    this.contentEditor = new Vditor('vditor', {
      height: 360,
      cache: {
        enable: false
      },
      value: this.actionItem.pluginAction.message,
      mode: 'sv',
      preview: {
        mode: 'both'
      },
      after: () => {
        // 渲染完成后触发  回显用
        if (this.actionItem.pluginAction.message) {
          this.contentEditor.setValue(this.actionItem.pluginAction.message)
        }
      },
      input: () => {
        //输入时触发
        if (this.contentEditor.getHTML()) {
          this.actionItem.pluginAction.message = this.contentEditor.getValue()
        } else {
          this.actionItem.pluginAction.message = ''
        }
      }
    })
  }
}
</script>

<style lang="scss">
.plugin-markdown {
  width: 100%;
  em {
    font-style: italic;
  }
  ol {
    list-style-type: decimal;
  }
  a {
    outline: 0;
    text-decoration: none;
    color: #4285f4;
  }
  &-header {
    width: 100%;
    display: flex;
    border: 1px solid #d1d5da;
    border-bottom: unset;
    .edit,
    .prevew {
      display: inline-block;
      padding: 10px 0px 10px 16px;
      border-right: 1px solid #d1d5da;
      font-size: 16px;
      color: #272e3b;
    }
    .edit {
      width: 545.91px;
    }
    .prevew {
      flex: 1;
      border-right: 0;
    }
  }
  .vditor-preview__action {
    display: none;
  }
}
</style>

### 集成和使用 Markdown 编辑器Vue 3 项目 #### 推荐的库 对于在 Vue 3 中集成 Markdown 编辑功能,`vuepress-vite` 插件可能不是最佳选择。相反,可以考虑 `v-md-editor` 或者 `tiptap` 这样的专门针对富文本编辑场景设计的库[^1]。 - **v-md-editor**: 提供了一个易于使用的 API 来创建自定义工具栏按钮,并支持多种主题样式。 - **tiptap**: 基于 ProseMirror 构建的强大且灵活的内容可编辑区域框架,允许开发者构建复杂的编辑体验。 #### 安装依赖项 为了简化说明过程,这里将以 `v-md-editor` 为例来展示安装命令: ```bash npm install v-md-editor --save ``` #### 导入并初始化 Editor 组件 接下来,在项目的入口文件(通常是 main.js 或 app.vue)中引入该插件,并完成必要的全局注册工作: ```javascript import VMdEditor from 'v-md-editor'; import 'v-md-editor/lib/style/base-editor.css'; // 如果想要添加额外的语言包或其他扩展特性的话也可以在此处继续导入相应模块... app.use(VMdEditor); ``` #### 使用 Editor 和 Viewer 组件 现在可以在任何页面或组件内部通过 `<v-md-editor>` 标签轻松调用编辑器实例;而对于只读视图,则应采用对应的查看模式标签 `<v-md-preview>`: ```html <template> <div id="editor-container"> <!-- 可编辑状态 --> <v-md-editor v-model="text"></v-md-editor> <!-- 查看已渲染的结果 --> <v-md-preview :text="text"></v-md-preview> </div> </template> <script setup lang="ts"> import { ref } from 'vue' const text = ref('') // 初始值为空字符串 </script> ``` 上述代码片段展示了如何在一个简单的 Vue SFC (Single File Component) 文件里同时嵌入 editor 和 viewer 的基本实现方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值