基于Vditor实现内部研发文档的管理
Posted 牛老师讲GIS
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于Vditor实现内部研发文档的管理相关的知识，希望对你有一定的参考价值。
概述
文档作为组织资产，是非常重要的部分，所以怎么更好的实现内部研发文档的管理与组织是一个非常重要的事情，本文借鉴简书，基于Vditor实现markdown文档的发布与管理。
Vditor简介
Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 javascript、Vue、React、Angular，提供桌面版。
实现后效果
实现
实现包括：
- 常用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);
)
)
)
)
以上是关于基于Vditor实现内部研发文档的管理的主要内容，如果未能解决你的问题，请参考以下文章
第十期基于 ApolloKoa 搭建 GraphQL 服务端
SpringBoot + Vue + Electron 开发 QQ 版聊天工具