前端：开源免费的浏览器端Markdown编辑器——Vditor上手体验浏端Vditor采用TypeScript实现

2024-06-28 21:02:29 [百科] 来源：避面尹邢网

前端：开源免费的前端浏览器端Markdown编辑器——Vditor上手体验

作者：郝光明 2023-06-05 07:16:47系统浏览器 Vditor是一款专业的浏览器端Markdown编辑器，其支持所见即所得、开源即时渲染以及分屏预览模式，免费类似于Typora。浏端Vditor采用TypeScript实现，览器可支持原生JavaScript、辑器Vue、上手React和Angular等多种框架。体验

一、前端编辑器简介

Vditor是开源一款专业的浏览器端Markdown编辑器，其支持所见即所得、免费即时渲染以及分屏预览模式，浏端类似于Typora。览器Vditor采用TypeScript实现，辑器可支持原生JavaScript、上手Vue、React和Angular等多种框架。此外，Vditor提供桌面版，支持Windows、Linux、MacOS，同时也支持浏览器扩展、安卓和iOS版本。无论是在哪个平台上使用，Vditor都能够提供高效、优质的Markdown编辑体验。

前端：开源免费的浏览器端Markdown编辑器——Vditor上手体验浏端Vditor采用TypeScript实现

官网：https://b3log.org/vditor/

前端：开源免费的浏览器端Markdown编辑器——Vditor上手体验浏端Vditor采用TypeScript实现

GitHub：https://github.com/Vanessa219/vditor

前端：开源免费的浏览器端Markdown编辑器——Vditor上手体验浏端Vditor采用TypeScript实现

桌面版下载：https://b3log.org/siyuan/download.html

二、功能特性

三、编辑器模式初始化设定

2.1 所见即所得模式

即所得模式对不熟悉 Markdown 的用户较为友好，熟悉 Markdown 的话也可以无缝使用。

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

2.2 即时渲染模式

对熟悉 Typora 的用户应该不会感到陌生，理论上这是最优雅的 Markdown 编辑方式。

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

2.3 分屏预览（SV）

该模式目前没有发现具体的使用场景。

new Vditor('vditor', {   "height": 360,  "cache": {     "enable": false  },  "value": "## 分屏预览（SV）\n传统的分屏预览模式适合大屏下的 Markdown 编辑。",  "mode": "sv",  "preview": {     "mode": "editor"  }})

2.4 分屏预览模式

分屏预览（SV）\n传统的分屏预览模式适合大屏下的 Markdown 编辑

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

四、案例代码

直接采用最原始的html提供完整的示例代码，直接可以运行。

<html>        <head>  <title>vditor编辑器</title>     <link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />    <script src="https://unpkg.com/vditor/dist/index.min.js"></script>    </head>        <body>        <input type="button" onclick="getContent()" value="确定" />        <div id="content">        </div>        <script>            var vditor = null;            window.onload = function() {                 vditor = new Vditor(document.getElementById('content'), {                     cache: {                         enable: false                    },                    "mode": "sv",                    "preview": {                         "mode": "both"                    }                });            }      // 测试数据填充            function getContent() {                 vditor.setValue("## 测试 \n ### 二级标题 ");            }</script>    </body></html>