vue使用vditor(组件)

1. 安装vditor

   npm install vditor --save

2. 在项目的components文件夹下新建一个Markdown文件夹
   
3. index.vue内容如下

4. 添加编辑页面使用markdown
   

    
   
   import Markdown from '@/components/Markdown'
   export default {
     name: 'SystemProjectDocumentDetailAddEdit',
     directives: {
       waves
     },
     components: { Markdown },
     props: {
       isAdd: {
         type: Boolean,
         default: false
       },
       templateData: {
         type: Object,
         default: null
       }
     },

5. 添加时获取值：

   this.model.spdd_content = this.$refs.markdownEditor.getValue()

   

6. 打开编辑页面时赋值：

    this.$refs.markdownEditor.setValue(this.model.spdd_content)

   
   

7. 查看文档细节时，赋值+隐藏tools+隐藏多余边框
   
   

     
   
   import Markdown from '@/components/Markdown'
   export default {
     name: 'SystemProjectDocumentDetail',
     directives: {
       waves
     },
     components: { Markdown },
     props: {
       isAdd: {
         type: Boolean,
         default: false
       },
       templateData: {
         type: Object,
         default: null
       }
     },
   
   
   
   //给预览页面赋值
    this.$refs.markdownEditor.setValue(this.model.spdd_content)
               this.$refs.markdownEditor.toPreview()

   

   /deep/.vditor-toolbar {
     /* //background-color: var(--toolbar-background-color); */
     border-bottom: 0px solid var(--border-color);
     padding: 0 0px;
     line-height: 0;
   }

8. 后台上传文件接口，基于gin.Engine：/api/admin/uploadFile?type=99
   

   router.StaticFS("/api/temp", gin.Dir("./temp", false))
   	
   loginBase.POST("/uploadFile", ginResponse.uploadFile) //上传文件

9. 上传文件方法
   
    

   package main
   
   import (
   	"crypto/md5"
   	"encoding/hex"
   	"io"
   	"io/ioutil"
   	"net/http"
   	"os"
   	"path"
   	"strings"
   	"time"
   
   	"cntotal.com/sbjapi/xfileserviceapi"
   	"cntotal.com/sbjbase"
   	"cntotal.com/sbjlog"
   	"github.com/gin-gonic/gin"
   )
   /*uploadFile 上传文件*/
   func (r *GinResponse) uploadFile(c *gin.Context) {
   	//c.Query 获取url中get的参数
   	apitype := c.Query("type")
   	if apitype == "99" { //type=60 文件上传,支持所有格式
   		isupload, filename, err := uploadFileToTemp(c)
   		if !isupload {
   			sbjlog.Printfer("099", "上传文件_创建文件或者上传文件时出错，错误消息为:%v，文件名称为:%s", err, filename) //记录上传文件错误
   			c.String(http.StatusOK, getVueResult(0, false, "上传失败", ""))
   		}
   		c.String(http.StatusOK, getVueResult(0, true, filename, "/temp/"+filename))
   	} else { //type 不可识别7
   		c.String(http.StatusOK, getVueResult(0, false, "无效的请求", ""))
   	}
   }
   
   //上传文件到临时文件夹
   //输入参数, *gin.Context
   //输出参数,是否上传成功,文件名,错误信息
   func uploadFileToTemp(c *gin.Context) (bool, string, error) {
   	filename := ""
   	//sbjlog.Debuger("078", "开始读取文件") //记录上传文件错误
   	//c.ParseMultipartForm(128 << 20)
   	file, err := c.FormFile("file")
   	//sbjlog.Debuger("078", "结束读取文件:%v", err) //记录上传文件错误
   	if err != nil {
   		return false, filename, err
   	}
   	//这里想得到的文件名在C#中是DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo)
   	//path.Ext(file.Filename)这里不需要原来的文件名了直接用现在的文件名
   	filename = strings.Replace(time.Now().Format("20060102150405.0000"), ".", "_", -1) + path.Ext(file.Filename)
   	isExitFile("temp")
   	err = c.SaveUploadedFile(file, "temp/"+filename)
   	if err != nil {
   		return false, filename, err
   	}
   	return true, filename, nil
   }
   

10. 效果图：