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

VinTom

已于 2022-05-24 00:31:02 修改

阅读量868

点赞数

分类专栏： vditor 文章标签： javascript vscode 前端

于 2022-05-24 00:24:48 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43937638/article/details/124937375

版权

本文介绍了如何在原生JavaScript环境中结合后端使用Vditor Markdown编辑器。首先介绍了Vditor的基本功能，然后详细阐述了在编辑、回显和预览页面的正确配置方法，并提醒在后端处理MD内容时要注意HTML标签的反转义问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Vditor介绍

Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript以及 Vue、React、Angular 和 Svelte 等框架。

2.如何在原生JS中结合后端使用

2.1 背景

了解过这个开源项目的应该都知道，这是一款很好用的markdown在线编辑工具。但是可能有些小伙伴在想使用它的时候却发现一些问题，比如在本地无法正常运行和展示，控制台报错、找不到对应文件等等。由于官网上也没有很详细的示例，所以这里给大家介绍一下如何使用。

2.2 正确使用方式

npm工具相信大家都安装了，所以我们打开vscode，控制台执行命令：npm install vditor --save，安装完成后是这个样子的，如下图：
在这里插入图片描述
可以看到，我把dist文件夹移出来了，相信很多都是按照官网这个demo使用发现无法使用，无法使用应该是这个cdn挂了

<!-- ⚠️生产环境请指定版本号，如 https://cdn.jsdelivr.net/npm/vditor@x.x.x/dist... -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor/dist/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js"></script>

2.2.1 编辑页面

我们这里直接全部用本地文件来测试，直接上代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" href="/dist/index.css" />
    <script src="/dist/index.min.js"></script>
  </head>

  <body>
    <div id="vditor" class="vditor" style="margin-top: 30px"></div>
  </body>
&l

最低0.47元/天解锁文章