Vditor在原生JS中如何结合后端使用
Vditor在原生JS中如何结合后端使用
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>
</html>
<script>
const initVditor = (language) => {
window.vditor = new Vditor("vditor", {
cdn: "",//关键
lang: language,
height: window.innerHeight - 40,
preview: {
theme: {
path: "/dist/css/content-theme",//关键
},
},
hint: {
emojiPath: "/dist/images/emoji",//关键
},
cache: {
enable: false,
},
});
};
initVditor("zh_CN");
window.setLang = (language) => {
window.vditor.destroy();
initVditor(language);
};
</script>
上面几个关键位置需要配置的已经说明，当然对官方文档查看比较详细也能发现，以上就是编辑页面了，如何保存数据可以使用vditor的getValue()方法来获取当前内容，具体保存事件如何触发，可以自己看官方文档加一个自定义按钮，建议直接将md内容保存入库，方便后期编辑和预览，使用liveserver插件打开，效果如下：
2.2.2 回显页面（修改页面）
我们想把这个编辑器利用到自己项目当中，肯定是要做一个支持保存了再修改的功能的，后端如何返回数据这里就不说了，我这里直接以一个本地的md文件来作为接口返回数据，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create</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>
</html>
<script>
//模拟接口返回内容
let markdown;
fetch("/test.md")
.then((response) => response.text())
.then((md) => {
markdown=md;
});
const initVditor = (language) => {
window.vditor = new Vditor("vditor", {
cdn: "",
placeholder:"我是创建页面",
value:markdown,
lang: language,
height: window.innerHeight - 40,
preview: {
theme: {
path: "/dist/css/content-theme",
},
},
hint: {
emojiPath: "/dist/images/emoji",
},
cache: {
enable: false,
},
});
};
initVditor("zh_CN");
window.setLang = (language) => {
window.vditor.destroy();
initVditor(language);
};
function htmlDecode(text) {
//1.首先动态创建一个容器标签元素，如DIV
var temp = document.createElement("div");
//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
temp.innerHTML = text;
//3.最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
</script>
效果如下：
2.2.3 预览页面
实现预览也有多种方式，可以转成html展示，我这里直接官方的api来渲染md文件，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/dist/index.css" />
<script src="/dist/method.min.js"></script>
</head>
<body>
<div id="preview"></div>
</body>
<script>
const previewElement = document.getElementById("preview");
fetch("/test.md")
.then((response) => response.text())
.then((md) => {
Vditor.preview(previewElement, md, {
cdn: "",
mode: "light",
theme: {
path: "/dist/css/content-theme",
},
});
});
</script>
</html>
预览效果图如下：
3.小结一下
这里只写到了前端部分，具体后端的接口如何保存和返回数据大家可以自行发挥。说一下自己在这里做后端时踩到的坑：
我们直接将md文件通过接口保存时，由于会经过网络传输，md内容中的部分html标签会被转义，所以后端在保存入库前进行一下html的反转义，最后在页面回显的时候也记得将接口返回数据做一下html的反转义，这样样式显示就不会有问题了。
觉得有帮助的欢迎关注一下公众号【猿心声】，后期也会分享一些自己的经验和经历
