又一个强大的开源编辑器Vditor

1. Vditor编辑器概述

1.1 编辑器的基本功能

Vditor 是一款功能强大的浏览器端 Markdown 编辑器，它提供了多种编辑模式和丰富的功能，使得用户可以高效地进行文本编辑和格式化。以下是 Vditor 的一些基本功能：

• 所见即所得（WYSIWYG）：用户在编辑时可以直接看到终极的渲染效果，雷同于利用富文本编辑器，但支持 Markdown 语法。
  
• 即时渲染（IR）：雷同于 Typora 的渲染模式，用户在输入 Markdown 文本时，编辑器会实时将其渲染为 HTML 格式，提供即时的视觉反馈。
  
• 分屏预览（SV）：编辑器提供一个分屏界面，一边是 Markdown 源码，另一边是实时渲染的 HTML 预览，方便用户对照编辑和预览。
  
• 语法高亮：支持 Markdown 语法的高亮体现，资助用户更清晰地识别和编辑文本。
  
• 扩展功能：支持多种 Markdown 扩展语法，如表格、使命列表、代码块等，以及自定义工具栏和快捷键。
  

1.2 支持的渲染模式

Vditor 提供了三种紧张的渲染模式，每种模式都有其独特的特点和实用场景：

• 所见即所得（WYSIWYG）模式：在这种模式下，用户在编辑文本时，编辑器会实时体现终极的渲染效果，雷同于利用富文本编辑器。这种模式适合不认识 Markdown 语法的用户，或者必要频仍调整格式和布局的场景。
  
• 即时渲染（IR）模式：这种模式下，用户在输入 Markdown 文本时，编辑器会实时将其渲染为 HTML 格式，提供即时的视觉反馈。这种模式适合必要快速查看渲染效果的用户。
  
• 分屏预览（SV）模式：在这种模式下，编辑器分为两个部门，一边是 Markdown 源码，另一边是实时渲染的 HTML 预览。这种模式适合必要同时查看和编辑源码和渲染效果的用户。
  

1.3 技术实现与支持框架

Vditor 利用 TypeScript 实现，这使得它在类型安全和代码维护方面具有优势。别的，Vditor 支持多种前端框架，包括：

• 原生 JavaScript：可以直接在任何支持 JavaScript 的网页中利用。
  
• Vue：提供了 Vue 组件，方便在 Vue 项目中集成和利用。
  
• React：提供了 React 组件，可以在 React 项目中轻松集成。
  
• Angular：提供了 Angular 组件，支持在 Angular 项目中利用。
  

这些支持框架的实现，使得 Vditor 能够适应不同的开发环境和需求，为开发者提供了极大的机动性和便利性。
通过上述介绍，我们可以看到 Vditor 不但功能强大，而且具有高度的机动性和可扩展性，能够满意不同用户和开发者的需求。 ## 2. 编辑模式详解
Vditor 提供了三种紧张的编辑模式，分别是所见即所得（WYSIWYG）、即时渲染（IR）和分屏预览（SV）。每种模式都有其独特的特点和实用场景，用户可以根据本身的需求选择最合适的模式。
2.1 所见即所得（WYSIWYG）

所见即所得（What You See Is What You Get）模式是一种直观的编辑方式，用户在编辑时可以直接看到终极的渲染效果，无需预览即可知道文档的终极呈现形式。这种模式对于不认识 Markdown 语法的用户非常友爱，同时也适合那些希望快速编辑文档的用户。
初始化代码示例

1. new Vditor('vditor', {
2.   "height": 360,
3.   "cache": { "enable": false },
4.   "value": "## 所见即所得（WYSIWYG）\n所见即所得模式对不熟悉 Markdown 的用户较为友好，熟悉 Markdown 的话也可以无缝使用。",
5.   "mode": "wysiwyg"
6. });

复制代码

特点

• 直观性：用户在编辑时可以直接看到终极的渲染效果。
  
• 易用性：适合不认识 Markdown 语法的用户。
  
• 无缝切换：认识 Markdown 的用户也可以无缝利用。
  

2.2 即时渲染（IR）

即时渲染（Instant Rendering）模式雷同于 Typora 的编辑方式，用户在输入 Markdown 语法的同时，编辑器会实时渲染出终极的文档效果。这种模式理论上是最优雅的 Markdown 编辑方式，适合那些希望在编辑过程中就能看到文档终极效果的用户。
初始化代码示例

1. new Vditor('vditor', {
2.   "height": 360,
3.   "cache": { "enable": false },
4.   "value": "## 即时渲染（IR）\n即时渲染模式对熟悉 Typora 的用户应该不会感到陌生，理论上这是最优雅的 Markdown 编辑方式。",
5.   "mode": "ir"
6. });

复制代码

特点

• 实时渲染：用户在输入 Markdown 语法的同时，编辑器会实时渲染出终极的文档效果。
  
• 优雅性：理论上是最优雅的 Markdown 编辑方式。
  
• 认识感：对认识 Typora 的用户应该不会感到陌生。
  

2.3 分屏预览（SV）

分屏预览（Split View）模式将编辑区域和预览区域分开体现，用户在编辑 Markdown 文档的同时，可以在另一侧看到文档的实时预览效果。这种模式适合在大屏幕下进行 Markdown 编辑，用户可以同时看到编辑内容和预览效果，便于进行内容调整和格式优化。
初始化代码示例

1. new Vditor('vditor', {
2.   "height": 360,
3.   "cache": { "enable": false },
4.   "value": "## 分屏预览（SV）\n传统的分屏预览模式适合大屏下的 Markdown 编辑。",
5.   "mode": "sv",
6.   "preview": { "mode": "both" }
7. });

复制代码

特点

• 分屏体现：编辑区域和预览区域分开体现。
  
• 实时预览：用户在编辑 Markdown 文档的同时，可以在另一侧看到文档的实时预览效果。
  
• 适合大屏：适合在大屏幕下进行 Markdown 编辑。
  

通过以上三种编辑模式的详细介绍，用户可以根据本身的需求选择最合适的编辑方式。无论是初学者还是资深用户，Vditor 都能提供高效、便捷的 Markdown 编辑体验。 ## 3. 语法支持与扩展功能
Vditor 编辑器不但支持标准的 Markdown 语法，还扩展了多种语法和功能，以满意更丰富的编辑需求。以下是 Vditor 支持的紧张语法和扩展功能。
3.1 CommonMark 语法

CommonMark 是一种标准化的 Markdown 语法规范，旨在消除不同 Markdown 分析器之间的差异。Vditor 严格依照 CommonMark 规范，确保用户在不同平台上都能获得一致的渲染效果。
3.1.1 标题

在 CommonMark 中，标题通过在文本前添加 # 来定义，# 的数量表示标题的级别。例如：

1. # 一级标题
2. ## 二级标题
3. ### 三级标题

复制代码

3.1.2 列表

列表分为有序列表和无序列表。无序列表利用 -、+ 或 * 作为列表项标记，有序列表利用数字加 . 作为列表项标记。例如：

1. - 无序列表项1
2. - 无序列表项2
4. 1. 有序列表项1
5. 2. 有序列表项2

复制代码

3.1.3 代码块

代码块可以通过在代码前后添加三个反引号（```）来定义，也可以通过缩进四个空格或一个制表符来定义。例如：

1. ```javascript
2. console.log('Hello, Vditor!');
3. ```

复制代码

3.2 GFM 语法

GFM（GitHub Flavored Markdown） 是 GitHub 对标准 Markdown 的扩展，增长了一些实用的功能。Vditor 支持 GFM 语法，使得用户可以更方便地编写适合在 GitHub 上展示的文档。
3.2.1 使命列表

使命列表允许用户创建带有复选框的列表项。例如：

1. - [x] 已完成任务
2. - [ ] 未完成任务

复制代码

3.2.2 表格

GFM 支持通过简单的语法创建表格。例如：

1. | 列1 | 列2 | 列3 |
2. | --- | --- | --- |
3. | 数据1 | 数据2 | 数据3 |

复制代码

3.2.3 删除线

删除线可以通过在文本前后添加两个波浪线（~~）来实现。例如：

1. ~~被删除的文本~~

复制代码

3.3 Markdown 扩展语法

Vditor 还支持多种 Markdown 扩展语法，以提供更丰富的编辑功能。
3.3.1 数学公式

Vditor 支持通过 LaTeX 语法插入数学公式。例如：

1. $$
2. E = mc^2
3. $$

复制代码

3.3.2 流程图

Vditor 支持通过特定的语法插入流程图。例如：

1. ```mermaid
2. graph TD;
3.     A-->B;
4.     A-->C;
5.     B-->D;
6.     C-->D;

复制代码

2. #### 3.3.3 甘特图
4. Vditor 支持通过特定的语法插入甘特图。例如：
6. ```markdown
7. ```mermaid
8. gantt
9.     dateFormat  YYYY-MM-DD
10.     title 甘特图示例
11.     section 任务1
12.     任务1 :a1, 2024-01-01, 30d
13.     section 任务2
14.     任务2 :after a1, 20d

复制代码

2. ### 3.4 工具栏扩展与自定义
4. Vditor 的工具栏提供了丰富的操作选项，并且支持扩展和自定义。
6. #### 3.4.1 工具栏操作
8. Vditor 的工具栏包含 36+ 项操作，包括加粗、斜体、插入链接、插入图片等常用操作。例如：
10. ```javascript
11. new Vditor('vditor', {
12.   toolbar: [
13.     {
14.       name: 'bold',
15.       tip: '加粗',
16.       tipPosition: 's'
17.     },
18.     {
19.       name: 'italic',
20.       tip: '斜体',
21.       tipPosition: 's'
22.     }
23.   ]
24. });

复制代码

3.4.2 自定义工具栏

用户可以自定义工具栏的每一项，包括快捷键、提示、提示位置、图标、点击事件、类名、子工具栏等。例如：

1. new Vditor('vditor', {
2.   toolbar: [
3.     {
4.       name: 'custom',
5.       tip: '自定义操作',
6.       tipPosition: 's',
7.       icon: '<svg>...</svg>',
8.       click: function() {
9.         // 自定义操作
10.       }
11.     }
12.   ]
13. });

复制代码

通过以上介绍，我们可以看到 Vditor 编辑器不但支持标准的 Markdown 语法，还提供了丰富的扩展功能和机动的工具栏自定义选项，使得用户可以更高效地进行文档编辑和内容创作。 ## 4. 在Vue中的应用
Vditor 是一款功能强大的 Markdown 编辑器，支持多种渲染模式，而且可以轻松集成到 Vue 项目中。本节将详细介绍如何在 Vue2 和 Vue3 项目中安装、设置和利用 Vditor 组件。
4.1 Vue2中的安装与设置

在 Vue2 项目中利用 Vditor，首先必要安装 Vditor 依赖包。可以通过 npm 或 yarn 进行安装：

1. npm install vditor --save

复制代码

或

1. yarn add vditor

复制代码

安装完成后，可以在 Vue 组件中引入并初始化 Vditor。以下是一个简单的示例：

1. <template>
2.   <div id="vditor"></div>
3. </template>
5. <script>
6. import Vditor from 'vditor'
7. import 'vditor/dist/index.css'
9. export default {
10.   mounted() {
11.     this.initVditor()
12.   },
13.   methods: {
14.     initVditor() {
15.       const vditor = new Vditor('vditor', {
16.         height: 300,
17.         placeholder: '请输入内容...',
18.         toolbar: [
19.           'emoji',
20.           'headings',
21.           'bold',
22.           'italic',
23.           'strike',
24.           'link',
25.           '|',
26.           'list',
27.           'ordered-list',
28.           'check',
29.           'outdent',
30.           'indent',
31.           '|',
32.           'quote',
33.           'line',
34.           'code',
35.           'inline-code',
36.           'insert-before',
37.           'insert-after',
38.           '|',
39.           'upload',
40.           'record',
41.           'table',
42.           '|',
43.           'undo',
44.           'redo',
45.           '|',
46.           'fullscreen',
47.           'preview',
48.           'outline',
49.           'code-theme',
50.           'content-theme',
51.           'export',
52.           'devtools',
53.           'info',
54.           'help'
55.         ],
56.         after() {
57.           vditor.setValue('欢迎使用 Vditor!')
58.         }
59.       })
60.     }
61.   }
62. }
63. </script>

复制代码

4.2 Vue3中的安装与设置

在 Vue3 项目中利用 Vditor，安装和引入的方式与 Vue2 雷同。首先安装 Vditor：

1. npm install vditor --save

复制代码

或

1. yarn add vditor

复制代码

然后在 Vue3 组件中引入并初始化 Vditor：

1. <template>
2.   <div ref="vditor"></div>
3. </template>
5. <script>
6. import { ref, onMounted } from 'vue'
7. import Vditor from 'vditor'
8. import 'vditor/dist/index.css'
10. export default {
11.   setup() {
12.     const vditor = ref(null)
14.     onMounted(() => {
15.       initVditor()
16.     })
18.     const initVditor = () => {
19.       vditor.value = new Vditor(vditor.value, {
20.         height: 300,
21.         placeholder: '请输入内容...',
22.         toolbar: [
23.           'emoji',
24.           'headings',
25.           'bold',
26.           'italic',
27.           'strike',
28.           'link',
29.           '|',
30.           'list',
31.           'ordered-list',
32.           'check',
33.           'outdent',
34.           'indent',
35.           '|',
36.           'quote',
37.           'line',
38.           'code',
39.           'inline-code',
40.           'insert-before',
41.           'insert-after',
42.           '|',
43.           'upload',
44.           'record',
45.           'table',
46.           '|',
47.           'undo',
48.           'redo',
49.           '|',
50.           'fullscreen',
51.           'preview',
52.           'outline',
53.           'code-theme',
54.           'content-theme',
55.           'export',
56.           'devtools',
57.           'info',
58.           'help'
59.         ],
60.         after() {
61.           vditor.value.setValue('欢迎使用 Vditor!')
62.         }
63.       })
64.     }
66.     return { vditor }
67.   }
68. }
69. </script>

复制代码

4.3 Vditor组件的详细利用

Vditor 提供了丰富的设置选项和 API 方法，可以根据必要进行自定义。以下是一些常用的设置和方法：
4.3.1 工具栏设置

Vditor 的工具栏可以通过 toolbar 选项进行自定义。例如，添加自定义按钮：

1. toolbar: [
2.   'emoji',
3.   'headings',
4.   'bold',
5.   'italic',
6.   'strike',
7.   'link',
8.   '|',
9.   'list',
10.   'ordered-list',
11.   'check',
12.   'outdent',
13.   'indent',
14.   '|',
15.   'quote',
16.   'line',
17.   'code',
18.   'inline-code',
19.   'insert-before',
20.   'insert-after',
21.   '|',
22.   'upload',
23.   'record',
24.   'table',
25.   '|',
26.   'undo',
27.   'redo',
28.   '|',
29.   'fullscreen',
30.   'preview',
31.   'outline',
32.   'code-theme',
33.   'content-theme',
34.   'export',
35.   'help',
36.   {
37.     name: 'custom',
38.     tip: '自定义按钮',
39.     tipPosition: 's',
40.     icon: '<svg viewBox="0 0 1024 1024"><path d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512s190.933333 426.666667 426.666667 426.666667 426.666667-190.933333 426.666667-426.666667S747.733333 85.333333 512 85.333333z m0 768c-188.544 0-341.333333-152.789333-341.333333-341.333333S323.456 170.666667 512 170.666667 853.333333 323.456 853.333333 512 700.544 853.333333 512 853.333333z m136.533333-443.733333l-170.666666 102.4-102.4 170.666667-68.266667-68.266667 102.4-170.666667 170.666667-102.4 68.266666 68.266667z"></path></svg>',
41.     click: () => {
42.       alert('自定义按钮点击事件');
43.     },
44.   },
45. ]

复制代码

4.3.2 插入内容

Vditor 提供了 insertValue 方法，用于在当前光标位置插入内容：

1. vditor.insertValue('插入的内容');

复制代码

4.3.3 获取和设置内容

可以通过 getValue 和 setValue 方法获取和设置编辑器的内容：

1. const content = vditor.getValue();
2. vditor.setValue('新的内容');

复制代码

4.3.4 事件监听

Vditor 支持多种事件监听，例如 input 事件：

1. vditor.on('input', () => {
2.   console.log('编辑器内容发生变化');
3. });

复制代码

通过以上步骤和示例，开发者可以在 Vue 项目中轻松集成和利用 Vditor 编辑器，实现丰富的 Markdown 编辑功能。 ## 5. 开发与利用文档
5.1 安装依赖

在利用Vditor编辑器之前，首先必要在项目中安装相干的依赖。Vditor支持多种前端框架，如原生JavaScript、Vue、React和Angular。以下是安装Vditor的基本步骤：
利用npm安装

1. npm install vditor --save

复制代码

利用yarn安装

1. yarn add vditor

复制代码

安装完成后，你可以在项目中引入Vditor：

1. import Vditor from 'vditor';
2. import 'vditor/dist/index.css';

复制代码

5.2 初始化对象

初始化Vditor对象是利用编辑器的第一步。以下是初始化Vditor的基本方法：

1. const vditor = new Vditor('vditor', {
2.   height: 360,
3.   toolbar: [
4.     'emoji',
5.     'headings',
6.     'bold',
7.     'italic',
8.     'strike',
9.     'link',
10.     '|',
11.     'list',
12.     'ordered-list',
13.     'check',
14.     'outdent',
15.     'indent',
16.     '|',
17.     'quote',
18.     'line',
19.     'code',
20.     'inline-code',
21.     'insert-before',
22.     'insert-after',
23.     '|',
24.     'upload',
25.     'record',
26.     'table',
27.     '|',
28.     'undo',
29.     'redo',
30.     '|',
31.     'fullscreen',
32.     'edit-mode',
33.     {
34.       name: 'more',
35.       toolbar: [
36.         'both',
37.         'code-theme',
38.         'content-theme',
39.         'export',
40.         'outline',
41.         'preview',
42.         'devtools',
43.         'info',
44.         'help'
45.       ]
46.     }
47.   ]
48. });

复制代码

在上述代码中，'vditor'是HTML中容器的ID，height设置了编辑器的高度，toolbar定义了工具栏的按钮。
5.3 HTML 中插入 CSS 和 JavaScript

为了在HTML中利用Vditor，你必要引入相干的CSS和JavaScript文件。以下是一个基本的HTML示例：

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.   <title>Vditor Example</title>
7.   <link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css">
8. </head>
9. <body>
10.   <div id="vditor"></div>
11.   <script src="https://unpkg.com/vditor/dist/index.min.js"></script>
12.   <script>
13.     const vditor = new Vditor('vditor', {
14.       height: 360,
15.       toolbar: [
16.         'emoji',
17.         'headings',
18.         'bold',
19.         'italic',
20.         'strike',
21.         'link',
22.         '|',
23.         'list',
24.         'ordered-list',
25.         'check',
26.         'outdent',
27.         'indent',
28.         '|',
29.         'quote',
30.         'line',
31.         'code',
32.         'inline-code',
33.         'insert-before',
34.         'insert-after',
35.         '|',
36.         'upload',
37.         'record',
38.         'table',
39.         '|',
40.         'undo',
41.         'redo',
42.         '|',
43.         'fullscreen',
44.         'edit-mode',
45.         {
46.           name: 'more',
47.           toolbar: [
48.             'both',
49.             'code-theme',
50.             'content-theme',
51.             'export',
52.             'outline',
53.             'preview',
54.             'devtools',
55.             'info',
56.             'help'
57.           ]
58.         }
59.       ]
60.     });
61.   </script>
62. </body>
63. </html>

复制代码

5.4 API 方法阐明

Vditor提供了丰富的API方法，方便开发者对编辑器进行操作和控制。以下是一些常用的API方法：
获取编辑器内容

1. const content = vditor.getValue();
2. console.log(content);

复制代码

设置编辑器内容

1. vditor.setValue('新的编辑器内容');

复制代码

清空编辑器内容

1. vditor.clear();

复制代码

禁用编辑器

1. vditor.disabled();

复制代码

启用编辑器

1. vditor.enabled();

复制代码

插入内容

1. vditor.insertValue('插入的内容');

复制代码

上传文件

1. vditor.uploadFile();

复制代码

这些API方法可以资助你在不同的应用场景中更好地控制Vditor编辑器的举动。详细的API文档可以在Vditor的官方文档中找到。
通过以上步骤，你可以在项目中成功安装和利用Vditor编辑器，并利用其丰富的功能和机动的API方法来满意不同的开发需求。 ## 6. 高级功能与设置
6.1 图片上传与处置处罚

Vditor 提供了强大的图片上传功能，支持拖拽、剪切板粘贴上传，并体现实时上传进度。以下是关于图片上传与处置处罚的详细设置和利用方法。
6.1.1 基本设置

首先，必要在 Vditor 的初始化选项中设置 upload 参数。以下是一个基本的设置示例：

1. const vditor = new Vditor('vditor', {
2.   upload: {
3.     url: 'https://your-upload-endpoint.com/upload',
4.     max: 10 * 1024 * 1024, // 最大上传文件大小为 10MB
5.     linkToImgUrl: 'https://your-upload-endpoint.com/linkToImg',
6.     filename: (name) => name.replace(/\W/g, ''), // 文件名安全处理
7.     accept: 'image/*', // 限制上传文件类型为图片
8.     multiple: true, // 允许多文件上传
9.     fieldName: 'file[]' // 上传字段名称
10.   }
11. });

复制代码

6.1.2 自定义上传处置处罚

你可以通过 handler 参数来自定义上传逻辑。例如，假如你希望在上传前对文件进行一些处置处罚，可以这样做：

1. const vditor = new Vditor('vditor', {
2.   upload: {
3.     url: 'https://your-upload-endpoint.com/upload',
4.     handler: (files) => {
5.       // 自定义上传逻辑
6.       const formData = new FormData();
7.       files.forEach(file => {
8.         formData.append('file[]', file);
9.       });
10.       return fetch('https://your-upload-endpoint.com/upload', {
11.         method: 'POST',
12.         body: formData
13.       }).then(response => response.json());
14.     }
15.   }
16. });

复制代码

6.1.3 图片上传回调

上传成功或失败后，可以通过 success 和 error 回调函数来处置处罚相应的事件：

1. const vditor = new Vditor('vditor', {
2.   upload: {
3.     url: 'https://your-upload-endpoint.com/upload',
4.     success: (editor, msg) => {
5.       console.log('Upload success:', msg);
6.     },
7.     error: (msg) => {
8.       console.error('Upload error:', msg);
9.     }
10.   }
11. });

复制代码

6.2 自定义工具栏

Vditor 允许用户自定义工具栏，以满意不同的编辑需求。以下是如何设置和自定义工具栏的详细步骤。
6.2.1 基本设置

在 Vditor 的初始化选项中，可以通过 toolbar 参数来设置工具栏。以下是一个基本的设置示例：

1. const vditor = new Vditor('vditor', {
2.   toolbar: [
3.     'emoji',
4.     'headings',
5.     'bold',
6.     'italic',
7.     '|',
8.     'line',
9.     'quote',
10.     'list',
11.     'ordered-list',
12.     'check',
13.     'outdent',
14.     'indent',
15.     'code',
16.     'inline-code',
17.     'insert-after',
18.     'insert-before',
19.     'undo',
20.     'redo',
21.     'upload',
22.     'link',
23.     'table',
24.     'record',
25.     'edit-mode',
26.     'both',
27.     'preview',
28.     'fullscreen',
29.     'outline',
30.     'code-theme',
31.     'content-theme',
32.     'export',
33.     'devtools',
34.     'info',
35.     'help',
36.     'br'
37.   ]
38. });

复制代码

6.2.2 自定义按钮

你可以添加自定义按钮到工具栏中。以下是一个自定义按钮的示例：

1. const vditor = new Vditor('vditor', {
2.   toolbar: [
3.     {
4.       name: 'customButton',
5.       icon: '<svg>...</svg>', // 自定义图标
6.       tip: '自定义按钮',
7.       tipPosition: 's',
8.       click: () => {
9.         alert('自定义按钮点击事件');
10.       }
11.     }
12.   ]
13. });

复制代码

6.3 预览模式设置

Vditor 支持多种预览模式，包括所见即所得（WYSIWYG）、即时渲染（IR）和分屏预览（SV）。以下是如何设置预览模式的详细步骤。
6.3.1 基本设置

在 Vditor 的初始化选项中，可以通过 mode 参数来设置预览模式。以下是一个基本的设置示例：

1. const vditor = new Vditor('vditor', {
2.   mode: 'ir' // 设置为即时渲染模式
3. });

复制代码

6.3.2 预览主题设置

你可以通过 preview.theme 参数来设置预览主题。以下是一个设置预览主题的示例：

1. const vditor = new Vditor('vditor', {
2.   preview: {
3.     theme: {
4.       current: 'light',
5.       list: {
6.         'ant-design': 'Ant Design',
7.         'dark': 'Dark',
8.         'light': 'Light',
9.         'wechat': 'WeChat'
10.       },
11.       path: 'https://unpkg.com/vditor@${VDITOR_VERSION}/dist/css/content-theme'
12.     }
13.   }
14. });

复制代码

通过以上设置，你可以机动地利用 Vditor 的高级功能，满意不同的编辑需求。 ## 7. 社区与资源
7.1 官方文档与教程

Vditor作为一款功能强大的Markdown编辑器，其官方提供了细致的文档和教程，资助开发者快速上手并深入了解其功能和特性。官方文档涵盖了从基础安装到高级设置的各个方面，是学习和利用Vditor的紧张资源。

• 官方文档地址：Vditor官方文档
  
• 安装指南：详细介绍了如何在不同前端框架中安装和设置Vditor。
  
• 利用教程：包括基本利用、编辑模式切换、工具栏设置、API调用等。
  
• 高级功能：介绍了如何进行自定义工具栏、图片上传处置处罚、预览模式设置等高级功能。
  

7.2 社区支持与交流

Vditor拥有一个生动的社区，开发者可以在社区中寻求资助、分享履历、讨论题目。社区支持是Vditor生态体系的紧张组成部门，为用户和开发者提供了交流和学习的平台。

• GitHub堆栈：Vditor GitHub
  
  
  
  • 在GitHub堆栈中，开发者可以提交题目（Issues）、参与讨论（Discussions）、贡献代码（Pull Requests）。
    
  
  
• 论坛：Vditor论坛
  
  
  
  • 论坛是用户交流的紧张场所，可以在这里找到许多关于Vditor的利用履历和办理方案。
    
  
  
• 社交媒体：Vditor在Twitter、Facebook等社交媒体上也有官方账号，定期发布更新和活动信息。
  

7.3 相干资源与插件

为了进一步扩展Vditor的功能，社区和开发者开发了许多相干的资源和插件。这些资源和插件可以资助用户更好地利用Vditor，提升开发服从和用户体验。

• 主题和样式：社区提供了多种主题和样式，用户可以根据本身的喜好进行选择和定制。
  
• 插件：开发者可以开发和利用各种插件来扩展Vditor的功能，例如代码高亮、数学公式支持、图表绘制等。
  
• 示例项目：GitHub上有很多利用Vditor的示例项目，这些项目展示了Vditor在实际应用中的利用方法和效果。
  

通过这些社区资源，用户和开发者可以更好地明白和利用Vditor，同时也能够参与到Vditor的生态建设中，共同推动Vditor的发展和美满。 ## 8. 授权与鸣谢
8.1 开源协议

Vditor 编辑器依照 MIT 开源协议，这是一种非常宽松的软件允许协议，允许用户自由利用、复制、修改、合并、出版发行、散布、再授权及销售软件及其副本。MIT 协议的紧张条款包括：

• 版权声明和允许声明：必须在软件和软件的全部副本中包含版权声明和允许声明。
  
• 免责声明：软件是“按原样”提供的，没有任何形式的明示或暗示的保证，包括但不限于适销性、特定用途实用性和非侵权的保证。
  

利用 Vditor 的用户和开发者应服从 MIT 协议的规定，确保在分发软件时包含原始的版权和允许声明。
9.1 编辑器发展历程

Vditor 编辑器自发布以来，经历了多个版本的迭代和改进，渐渐成为一款功能强大、用户友爱的 Markdown 编辑器。以下是 Vditor 编辑器的发展历程概述：

• 初始版本发布：Vditor 的第一个版本发布于 2019 年，其时紧张支持基本的 Markdown 编辑功能，包括所见即所得（WYSIWYG）模式和即时渲染（IR）模式。
  
• 功能扩展：随着用户需求的增长，Vditor 开始逐步增长新的功能，如数学公式、脑图、图表、流程图等高级功能，以及对多种前端框架的支持。
  
• 性能优化：为了提升用户体验，Vditor 在后续版本中不断进行性能优化，包括减少加载时间、优化渲染速度等。
  
• 多平台支持：Vditor 不但支持浏览器端，还推出了桌面版和移动端版本，使得用户可以在不同平台上无缝利用。
  

9.2 版本记载

以下是 Vditor 编辑器的一些紧张版本记载，展示了其功能和性能的逐步提升：

• v1.0.0：初始版本发布，支持所见即所得（WYSIWYG）和即时渲染（IR）模式。
  
• v1.5.0：增长了对数学公式、脑图、图表等高级功能的支持。
  
• v2.0.0：引入了分屏预览（SV）模式，优化了编辑器的性能和稳定性。
  
• v2.5.0：增长了对 Vue、React 和 Angular 等前端框架的支持。
  
• v3.0.0：推出了桌面版和移动端版本，实现了多平台支持。
  
• v3.5.0：增长了自定义工具栏和预览模式设置功能，提升了用户体验。
  
• v4.0.0：引入了图片上传与处置处罚功能，加强了编辑器的实用性。
  
• v4.5.0：优化了编辑器的加载速度和渲染性能，提升了团体性能。
  
• v5.0.0：增长了对 CommonMark 和 GFM 语法的支持，扩展了编辑器的语法功能。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。