在线工具markdown——Vditor

本文最后更新于：2020年7月10日 凌晨

写在前面

之前看好多博客都有自己的markdown在线排版工具，正巧强哥给vditor点了star，我尝试做一个练练手，结果才发现自己菜，深刻认识到：隔行如隔山，写的东西凑合看吧。当然，如果写的不对，还请指教。

源文件上传至仓库：vditor-markdown

Vditor

Vditor[1]给出的定位是这样的

Vditor 一款浏览器端的 Markdown 编辑器，支持所见即所得（富文本）、即时渲染（类似 Typora）和分屏预览模式

当然，我也看到其他的在线编辑器，例如markdown-online-editor，其实markdown-online-editor做出来的和Vditor效果基本一样，操作流程更简单，但是就想做点新鲜玩意。

新建一个Vue项目

虽然官网[2]给出了通过Vue、React、Angular三者方式的demo，但我菜的扣脚，啥都不会，不过好在官网的demo都有源代码[3]，菜鸟复制粘贴还不小心弄通了😄。

  • 修改index.html
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<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, user-scalable=0"/>
    <title>Markdown-Vditor</title>
    <link rel="icon" href="https://s-bj-1531-pxxyyz-blog.oss.dogecdn.com/img/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="https://s-bj-1531-pxxyyz-blog.oss.dogecdn.com/img/favicon.ico" type="image/x-icon"/>
    <link type="text/css" rel="stylesheet" href="//static.b3log.org/css/base.css" charset="utf-8"/>    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vditor@latest/dist/index.css"/>
    <script src="//vditor.b3log.org/vditor.js?v1.0.0" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/vue" defer></script>


	<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" defer></script>

    <style>
        .header {
            background-color: #fff;
            box-shadow: rgba(0, 0, 0, 0.05) 0 1px 7px;
            border-bottom: 1px solid #e1e4e8;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="fn-100"></div>
	    <div id="app">
	        <div id="vditor" class="vditor" style="width: auto;"></div>
	    </div>
	</div>
  
<!-- end main -->


</body>
</html>
  • 修改src/App.vue
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  • 修改src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import Vditor from 'vditor'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  data: {
    contentEditor: '',
  },
  mounted () {
    this.contentEditor = new Vditor('vditor', {
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: false,
      },
      hint: {
        emoji: {
          pray: '🙏',
          broken_heart: '💔',
          ok_hand: '👌',
          smile: '😄',
          laughing: '😆',
          smirk: '😏',
          heart_eyes: '😍',
          grin: '😁',
          stuck_out_tongue: '😛',
          expressionless: '😑',
          unamused: '😒',
          sob: '😭',
          joy: '😂',
          tired_face: '😫',
          blush: '😊',
          cry: '😢',
          fearful: '😨'
        }
      },
      upload: {
        accept: 'image/*,.mp3, .wav, .rar',
        token: 'test',
        url: '/api/upload/editor',
        linkToImgUrl: '/api/upload/fetch',
        filename (name) {
          return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
            replace('/\\s/g', '')
        },
      },
      height: 360,
      counter: 65535,
      preview: {
        mode: 'both',
        parse: () => {
          LazyLoadImage()
        },
      },
      typewriterMode: true,
      after: () => {
        this.contentEditor.setValue('# hello, Vditor + Vue!')
      },
    })
  },
})

运行Vue

npm run dev

中途会提示安装包

npm install --save vditor

再重新运行一遍就没问题了。访问http://localhost:8080/#/即可。

打包Vue

  • 首先修改config/index.js的build配置
assetsPublicPath: './',

这一步修改的目的是打包的html可以访问static下的文件，不需要service服务打开网页。

  • 执行打包
npm run build

打包后会产生dist文件夹，并附有如下提示：

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

nginx本地服务器访问

该步可跳过。

虽然dist文件夹下的html可以直接打开浏览，但是我还是折腾server来浏览。

  • 将dist文件夹放在与nginx.exe同级的文件夹下
  • 修改conf/nginx.conf
server {
    listen       8999; # 自定义端口
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   dist;
        index  index.html;
    }

那么就可以通过http://localhost:8999/访问Vditor + Vue😄

博客配置

下面将dist文件夹放在hexo博客的source文件夹下，并在_config.yml设置不渲染(当然也可以改文件夹名称)

skip_render: 
  - dist/**

以上步骤完成后，就可通过域名/dist来访问Vditor了。我做的网址是https://pxxyyz.com/markdown，也可通过导航栏的工具访问。

接下来...

革命尚未成功，同志仍须努力。我做的这个还很初级，很多功能欠缺

  • 上传：需要设定Vditor的upload
  • 导出：ppt预览\(\to\)nodeppt

参考

  1. Vditor 仓库 ↩︎
  2. Vditor官网 ↩︎
  3. b3log-index ↩︎