vue项目中使用开源Vditor

Vditor 是一款所见即所得 编辑器,支持 Markdown

  • 支持多种前端框架 这里介绍在vue中使用
  • 包括编辑所见即所得模式,以及仅仅预览展示

更多细节和用法请参考 Vditor - 浏览器端的 Markdown 编辑器,谢谢 ❤️

所见即所得(编辑+预览状态)教程

首先我们需要在html中添加一个有id的容器放置Vditor ,如果你也需要大纲 那在添加一个放置大纲的容器很有必要。

接着我们在script 中,引入它的实例和样式(确认路径)

复制代码
import Vditor from 'vditor'
import 'vditor/dist/index.css'
同时在你的 data中声明工具栏变量和接手vdtor的实例变量
toolbar: [],
contentEditor: {} // Vditor实例
然后在挂载时,即可声明vditor了

关于option其他说明

这段内容展示了在所见即所得,比如:

  • 除了toolbar 我们注意还有其他的配置
  • comment 以及cache,cache中的after是实时保存钩子函数
  • option链接 - [超级链接](https://ld246.com/article/1549638745630/comment/1681288989528#options-comment)

仅预览展示模式

在上文中提及如果只预览,那么我们如何使用Vditor

NOTE:

  1. 通常markdown解析的东西很多比如vue-markdown,可依据返回值灵活使用
  2. vditor也可以自己解析 预览

雷同点💢

和上文一样 也需要盒子放置markdown内容,如果需要大纲预览 这时候需要一个盒子放大纲。

同时也需要引入❤️

import Vditor from 'vditor'

import 'vditor/dist/index.css'

注意💋

如果你要使用大纲,那挂载时,即可声明initoutline函数了。

1,需要初始化获取后端的数据

2,然后调用vditor的预览api

如下 这里挂载了id为preview和outline的两个dom,同时渲染了后端返回值,渲染结束后时刻待执行着initoutline函数

官网地址

NOTE: 这里很容易出现一个问题就是 父组件设置滚动会触发不了initoutline,需要注意!

同时大纲和内容的联动 标记高亮色其实是自己写上去的😤

结束语🙏

到这里就结束了💯,希望能帮助到你

相关推荐
百锦再17 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
飞翔的佩奇20 小时前
Java项目:基于SSM框架实现的忘忧小区物业管理系统【ssm+B/S架构+源码+数据库+毕业论文+开题报告】
java·数据库·mysql·vue·毕业设计·ssm框架·小区物业管理系统
百锦再3 天前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code3 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16883 天前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员3 天前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
海的诗篇_3 天前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte4 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
skyymrj13 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D13 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台