基于Vditor实现内部研发文档的管理

概述

文档作为组织资产，是非常重要的部分，所以怎么更好的实现内部研发文档的管理与组织是一个非常重要的事情，本文借鉴简书，基于Vditor实现markdown文档的发布与管理。

Vditor简介

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

实现后效果

实现

实现包括：

常用markdown文档编写；
图片上传

1. 前端代码

代码语言：javascript复制

<!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-9u4e00-u9fa5.)]/g, '').
        replace(/[?\/:|<>*[]()$%{}@~]/g, '').
        replace('/\s/g', '')
      },
      success(editor, msg) {
        msg = JSON.parse(msg)
        vditor.insertValue(`![${msg.fileName}](${msg.url})`)
      }
    },
  })
</script>
</body>
</html>

2. 图片上传部分代码

图片上传是通过node实现的。

代码语言：javascript复制

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);
      })
    })
  })
})

markdown

0 人点赞