Vditor 开源项目使用教程

伍畅晗Praised

于 2024-08-09 08:06:34 发布

阅读量850

点赞数 15

本文链接：https://blog.csdn.net/gitblog_01028/article/details/141048347

版权

Vditor 开源项目使用教程

vditor♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.项目地址:https://gitcode.com/gh_mirrors/vd/vditor

项目的目录结构及介绍

Vditor 项目的目录结构如下：

vditor/
├── README.md
├── README_en_US.md
├── package.json
├── src/
│   ├── index.ts
│   ├── editor/
│   │   ├── wysiwyg.ts
│   │   ├── instantRendering.ts
│   │   ├── splitView.ts
│   ├── utils/
│   │   ├── highlight.ts
│   │   ├── math.ts
│   │   ├── chart.ts
│   │   ├── mermaid.ts
├── dist/
│   ├── vditor.min.js
│   ├── vditor.min.css

目录结构介绍

README.md 和 README_en_US.md：项目的介绍文档，分别用中文和英文编写。
package.json：项目的依赖管理文件，包含项目的元数据和依赖包。
src/：源代码目录，包含项目的所有源代码文件。
- index.ts：项目的入口文件。
- editor/：编辑器相关的代码文件，包含所见即所得、即时渲染和分屏预览模式的实现。
- utils/：工具函数目录，包含代码高亮、数学公式、图表和流程图等工具函数。
dist/：打包后的文件目录，包含编译后的 JavaScript 和 CSS 文件。

项目的启动文件介绍

项目的启动文件是 src/index.ts，它是整个项目的入口点。该文件主要负责初始化编辑器实例，并提供对外的接口。

import Vditor from './editor/wysiwyg';

const vditor = new Vditor('vditor', {
  mode: 'wysiwyg',
  cdn: 'https://unpkg.com/vditor@latest'
});

vditor.render();

启动文件介绍

import Vditor from './editor/wysiwyg';：导入所见即所得模式的编辑器类。
const vditor = new Vditor('vditor', { mode: 'wysiwyg', cdn: 'https://unpkg.com/vditor@latest' });：创建一个 Vditor 实例，并传入编辑器的容器 ID 和配置选项。
vditor.render();：渲染编辑器。

项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的元数据和依赖包信息。

{
  "name": "vditor",
  "version": "3.8.13",
  "description": "♏ 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式",
  "main": "dist/vditor.min.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "dependencies": {
    "highlight.js": "^10.7.2",
    "katex": "^0.13.11",
    "mermaid": "^8.11.0"
  },
  "devDependencies": {
    "typescript": "^4.2.3",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
  }
}