Markdown编辑器Vditor的基本使用以及在Vue3中使用

news2024/9/20 22:45:25

介绍

官网
GitHub
帮助文档

Vditor是一个Markdown编辑器组件（也支持富文本编辑器），可以嵌入到自己的Web应用中。
此Markdown编辑器支持三种模式（几乎没有一个Markdown编辑器同时支持这三种模式）：

所见即所得WYSIWYG（富文本)
即时渲染(类似于Typora)
分屏预览
支持在原生JS中使用，同样支持目前主流的前端框架Vue、React、Svelte，还支持TS。

安装

安装是不区分框架的，直接安装就好了。

npm i vditor --save

核心对象Vditor

原理就是：在HTML结构中有一个容器，把这个容器交给Vditor管理就可以了。
我们在编辑器中输入的文本，会临时缓存到localStorage中

Vditor编辑器的核心就是Vditor这个类，我们来看一下源码中对这个类的定义

class Vditor extends VditorMethod {
	// ...
    /**
     * @param id 要挂载 Vditor 的元素或者元素 ID。
     * @param options Vditor 参数
     */
     
    constructor(id: string | HTMLElement, options?: IOptions) { }
	// ...
}

创建Vditor对象时，有两个参数：

第一个参数必填，用来指定HTML结构中作为容器的元素。值可以是两种：
- 元素的id值
- HTML元素对象，例如`document.getElementById(‘editor-container’)
第二个是配置对象，可选。

知道了这些之后，使用就非常简单了。

原生JS中使用

引入JS、CSS即可。

<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>

指定一个容器即可，示例代码

<head>
    <link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
    <script src="https://unpkg.com/vditor/dist/index.min.js"></script>
</head>

<body>
    <div id="vditor"></div>
    <script>
        // 第一个参数是容器的id，必填
        // 第二个参数是配置对象，可选
        new Vditor('vditor',{})
    </script>
</body>

Vue3中基本使用

知道了以上的核心原理之后，在Vue中使用就很简单了。
第一步安装。

npm install vditor --save

第二步使用

<script setup>
// 1.1 引入Vditor 构造函数
import Vditor from 'vditor'
// 1.2 引入样式
import 'vditor/dist/index.css';
import { ref, onMounted } from 'vue';

// 2. 获取DOM引用
const vditor = ref()

// 3. 在组件初始化时，就创建Vditor对象，并引用
onMounted(() => {
  vditor.value = new Vditor('vditor',{
    height: '50vh',
    width: '50vw'
  })
})

</script>

<template>
  <!-- 指定一个容器 -->
  <div id="vditor"></div>
</template>

因为我们肯定是要操作Vditor对象，所以才会通过DOM引用来指向Vditor对象。
如果只是new Vditor()，虽然有了编辑器，但是我们没法操作Vditor对象，所以通过Vue中的ref对象来指向Vditor对象。

常用配置项

创建Vditor对象时，通过第二个参数传入配置对象。
关于有哪些配置项，可以看官网——option,我这里说几个常用的

width编辑器的宽度
height编辑器的高度
lang编辑器的语言
value编辑器中的值，即编辑器中的真实的值
input(value)输入时的回调函数
focus(value)编辑器获取到焦点时的回调函数
blur(value)编辑器失去焦点时的回调函数，例如可以在此时保存文档等

以上是编辑器的基本配置项，下面是工具栏相关的配置项

toolbarConfig是否开启工具栏，有两个子配置：
- hide是否隐藏工具栏，默认值false
- pin是否固定工具栏，默认false
toolbar，该配置项是一个数组，用来列出工具栏中的工具。
- 通过工具名称，枚举工具栏中的工具toolbar: ['emoji', 'br', 'bold', '|', 'line']
- Vditor内置的工具的名称有：
  - emoji , headings , bold , italic , strike , | , line , quote , list , ordered-list , check ,outdent ,indent , code , inline-code , insert-after , insert-before ,undo , redo , upload , link , table , record , edit-mode , both , preview , fullscreen , outline , code-theme , content-theme , export, devtools , info , help , br
- 还可以自定义工具，看官网__toolbar

在创建Vditor时传入的这个配置对象，会直接挂载到Vditor对象身上，属性名叫做options

看个样例

new Vditor('vditor',{
    // 编辑器中默认展示的文本
    value:'请在此处输入Markdown文本',
    // 设置编辑器的宽高
    height: '50vh',
    width: '50vw',
    // 设置工具栏中展示的工具
    toolbar: ['emoji', 'br', 'bold', '|', 'line','quote','list','check'],
    // 编辑器失去焦点后的回调函数
    blur(value){
      // 保存文档....
      console.log('保存成功')
    }
  })