ToB企服应用市场:ToB评测及商务社交产业平台

标题: 又一个强大的开源编辑器Vditor [打印本页]
作者: 数据人与超自然意识    时间: 2024-12-1 00:19
标题: 又一个强大的开源编辑器Vditor
1. Vditor编辑器概述

1.1 编辑器的基本功能

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

1.2 支持的渲染模式

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

1.3 技术实现与支持框架

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

这些支持框架的实现，使得 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. });
复制代码
特点


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. });
复制代码
特点


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. });
复制代码
特点


通过以上三种编辑模式的详细介绍，用户可以根据本身的需求选择最合适的编辑方式。无论是初学者还是资深用户，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的紧张资源。

7.2 社区支持与交流

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

7.3 相干资源与插件

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

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

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

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

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

9.2 版本记载

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


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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4