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

介绍

官网
 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('保存成功')
    }
  })

常用 API

我们是通过操作Vditor对象来操作整个编辑器的，所以下面的API是利用Vditor对象来调用的。

通过Vditor对象调用以下API：

setTheme()设置编辑器主题名称name
getValue()获取原始的Markdown文本内容
setValue()设置编辑器的值，即Markdown的内容
getHTML()获取渲染后的HTML内容
focus()聚焦到编辑器上
blur()编辑器失去焦点
disabled()禁用编辑器
enable()编辑器解除禁用
getCursorPosition()获取焦点位置，即此时光标的坐标
insertValue()在焦点处插入内容，并默认进行Markdown渲染
clearCache()清空缓存在localStorage中的内容

posted @ 2023-07-09 00:44 秋天Code 阅读(880) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 利用VitePress部署静态网站

· 【GitHub前端练手项目--50天50个项目---商品加载效果-----day08】

· Vditor在原生JS中如何结合后端使用

· 基于 vite2 + Vue3 写一个在线帮助文档工具

· vue3 markdown插件库 v-md-editor与md-editor-v3

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

itkkk

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

介绍

安装

核心对象Vditor

原生JS中使用

Vue3中基本使用

常用配置项

常用 API

公告

搜索

常用链接

我的标签

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	class Vditor extends VditorMethod {
	// ...
	/**
	* @param id 要挂载 Vditor 的元素或者元素 ID。
	* @param options Vditor 参数
	*/

	constructor(id: string \| HTMLElement, options?: IOptions) { }
	// ...
	}

	<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>

	<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>

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