基于Vditor实现内部研发文档的管理
概述
文档作为组织资产，是非常重要的部分，所以怎么更好的实现内部研发文档的管理与组织是一个非常重要的事情，本文借鉴简书，基于Vditor实现markdown文档的发布与管理。
Vditor简介
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。
实现后效果
image.png
实现
实现包括：
- 常用markdown文档编写；
- 图片上传
1. 前端代码
<!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, maximum-scale=1.0"/>
<title>sdk issues</title>
<link rel="stylesheet" href="lib/vditor/dist/index.css" />
<style>
html. body, #vditor {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#vditor {
margin-top: 5rem;
}
.vditor-reset {
border: 1px solid #efefef;
}
</style>
</head>
<body>
<div id="vditor"></div>
<script src="lib/vditor/dist/index.min.js"></script>
<script>
let toolbar = [
'headings' , 'bold' , 'italic' , 'strike' , '|',
'list' , 'ordered-list' ,'check' ,'outdent' ,'indent' , '|',
'line' , 'quote' , 'code' , 'inline-code','link' , 'table', 'upload', '|' ,
'undo' , 'redo', 'export', 'both'
]
var vditor = new Vditor('vditor', {
height: 1000,
mode: 'sv', //sv左右分屏, ir及时渲染, wysiwyg所见即所得
minHeight: 500,
theme: 'classic', //dark
icon: 'material', // material
toolbar,
outline: {
enable: true,
position: 'left',
},
debugger: false,
typewriterMode: true,
placeholder: '',
preview: {
markdown: {
toc: false,
mark: false,
footnotes: true,
autoSpace: true,
},
math: {
engine: 'KaTeX',
},
},
toolbarConfig: {
pin: true,
},
counter: {
enable: true,
type: 'text',
},
tab: '\t',
upload: {
accept: 'image/*',
multiple: false,
fieldName: 'file',
url: 'http://localhost:18082/file/uploadimg',
linkToImgUrl: '/api/upload/fetch',
filename (name) {
return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
replace('/\\s/g', '')
},
success(editor, msg) {
msg = JSON.parse(msg)
vditor.insertValue(``)
}
},
})
</script>
</body>
</html>2. 图片上传部分代码
图片上传是通过node实现的。
router.post('/uploadimg', function (req, res) {
const filePath = path.resolve(__dirname, '../')
const basePath = `${filePath}/${config.upload.root}/imgs/`
fileUtils.dirExists(basePath).then(() => {
const file = req.files[0]
const fileName = file.originalname.split('.')[0]
const fileType = file.originalname.split('.')[1]
const des_file = basePath + file.filename + '.' + fileType;
const systemUrl = `//${config.upload.url}/imgs/${file.filename}.${fileType}`
fs.readFile(file.path, function (err, data) {
fs.writeFile(des_file, data, function (err) {
const response = {
code: 200,
url: systemUrl,
fileName
};
res.send(response);
})
})
})
})本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
