在Vue中使用Vditor編輯器

• 在Vue中使用Vditor編輯器
  • 1.技術概述
  • 2.技術詳述
    • 1.首先安裝vditor
    • 2.檢查package.json中是否存在vidor依賴，如果有則引入成功,如果沒有可能是網路原因導致可以試試多次嘗試步驟1。
    • 3.使用
      • 1.引入
      • 2.建立一個Vditor例項並賦值給contentEditor
      • 3.在前端程式碼中使用
      • 4.通過getValue()獲取輸入框內容
  • 3.技術使用中遇到的問題和解決過程
  • 4.總結
  • 5.參考文獻

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
          }
          if (this.ruleForm.tags == null || this.ruleForm.tags.length === 0) {
            alert('標籤不可以為空')
            return false
          }
          this.ruleForm.content = this.contentEditor.getValue()

          postBlog(this.ruleForm).then((response) => {
            const { data } = response
            this.$message({
              message: "釋出成功",
              type: "success",
              duration: 2000,
            });
            setTimeout(() => {
              this.loading = false;
              this.$router.push({ path: this.redirect || "/admin/ofBlog" });
            }, 0.5 * 1000);
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
 

3.技術使用中遇到的問題和解決過程

上面的使用部分使用Vditor時我們不難發現：前端與後端傳輸使用的是未經"翻譯"的markdown內容(如：##標題)，如果我們將從後端獲取的內容不加處理地拿來顯示，‘##標題’還是會原樣顯示為‘##標題’，所以我們將其轉化為markdown形式。

方法如下所示：

1.renderMarkdown()方法中呼叫Vditor.preview()來進行轉換

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

2.使用rederMarkdown()方法並傳入需要以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