在Vue中使用Vditor编辑器

1.技术概述

Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。

2.技术详述

1.首先安装vditor

npm install vditor --save

用VScode直接在终端输入，如下图

2.检查package.json中是否存在vidor依赖，如果有则引入成功,如果没有可能是网络原因导致可以试试多次尝试步骤1。

3.使用

使用方法如下：

<template>
        <div id="vditor" name="description" ></div>
    </template>
    <script>
    import Vditor from "vditor";
    import "vditor/src/assets/scss/index.scss";
    export default {
        data(){
            return{
                contentEditor: {},
            }
        },
        mounted(){
            this.contentEditor = new Vditor(‘vditor‘, {
              height: 500,
              placeholder: ‘此处为话题内容……‘,
              theme: ‘classic‘,
              counter: {
                enable: true,
                type: ‘markdown‘
              },
              preview: {
                delay: 0,
                hljs: {
                  style: ‘monokai‘,
                  lineNumber: true
                }
              },
              tab: ‘\t‘,
              typewriterMode: true,
              toolbarConfig: {
                pin: true
              },
              cache: {
                enable: false
              },
              mode: ‘sv‘,
              toolbar: [
                ‘emoji‘,
                ‘headings‘,
                ‘bold‘,
                ‘italic‘,
                ‘strike‘,
                ‘link‘,
                ‘|‘,
                ‘list‘,
                ‘ordered-list‘,
                ‘check‘,
                ‘outdent‘,
                ‘indent‘,
                ‘|‘,
                ‘quote‘,
                ‘line‘,
                ‘code‘,
                ‘inline-code‘,
                ‘insert-before‘,
                ‘insert-after‘,
                ‘|‘,
                // ‘record‘,
                ‘table‘,
                ‘|‘,
                ‘undo‘,
                ‘redo‘,
                ‘|‘,
                ‘edit-mode‘,
                // ‘content-theme‘,
                ‘code-theme‘,
                ‘export‘,
                {
                    name: ‘more‘,
                    toolbar: [
                        ‘fullscreen‘,
                        ‘both‘,
                        ‘preview‘,
                        ‘info‘,
                        ‘help‘,
                    ],
                }],
            })
        }  
    }
    </script>

步骤详解：

1.引入

import Vditor from ‘vditor‘
import ‘vditor/dist/index.css‘

2.创建一个Vditor实例并赋值给contentEditor

3.在前端代码中使用

<div id="vditor"></div>

4.通过getValue()获取输入框内容

this.contentEditor.getValue()可以获取输入内容，提交表单方法中有多次使用到，如下所示：

submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            this.contentEditor.getValue().length === 1 ||
            this.contentEditor.getValue() == null ||
            this.contentEditor.getValue() === ‘‘
          ) {
            alert(‘话题内容不可为空‘)
            return false
          }
          
          this.ruleForm.content = this.contentEditor.getValue()

          ......
      })
    },

3.技术使用中遇到的问题和解决过程

上面的使用部分使用Vditor时我们不难发现：前端与后端传输使用的是未经"翻译"的markdown内容(如：##标题)，如果我们将从后端获取的内容不加处理地拿来显示，‘##标题’还是会原样显示为‘##标题’，所以我们将其转化为markdown形式。

方法如下所示：

1.renderMarkdown()方法中调用Vditor.preview()来进行转换

renderMarkdown(md) {
  Vditor.preview(document.getElementById("preview"), md, {
    hljs: { style: "github" },
  });
},

2.使用renderMarkdown()方法并传入需要以markdown显示的内容，这样被传入内容就会被修改为markdown形式。

this.renderMarkdown(this.blog.content);

4.总结

1.首先安装vditor

npm install vditor --save

2.检查package.json中是否存在vidor依赖

3.使用

1. 引入

   import Vditor from ‘vditor‘
   import ‘vditor/dist/index.css‘

2. 创建一个Vditor实例并赋值给contentEditor

3. 在前端代码中使用

4.通过getValue()可以获取输入框内容
5.需要以markdown形式显示

5.参考文献

https://www.bilibili.com/video/BV1Wz4y1U7vC中的P37和P39

在Vue中使用Vditor编辑器