先安裝

npm install vditor --save

簡單使用

<template>
    <div id="vditor" name="description" ></div>
</template>
<script>
    import Vditor from "vditor"
    import "vditor/dist/index.css"
export default {
    data(){
        return{
            contentEditor:""
        }
    },
    mounted(){
        this.contentEditor = new Vditor("vditor",{
            height:360,
            toolbarConfig:{
                pin:true
            },
            cache:{
                enable:false
            },
            after:()=>{
                this.contentEditor.setValue("hello,Vditor+Vue!")
            }
        })
    },
    methods:{
    }
}
</script>

輸入的正文可以使用

this.contentEditor.getValue() 得到

============================分割線============================

以上這是最簡單的使用，下邊加入圖片文件等上傳操作

圖片.png

<script>
      mounted(){
      this.contentEditor = new Vditor("vditor",{
        height:450,
          width:800,
        placeholder:'此處為提示信息',
        toolbarConfig:{
          pin:true
        },
        cache:{
          enable:false
        },
      //這里寫上傳
        upload:{
          accept:'image/*',
          url:'http://127.0.0.1/question/fileupload',
          filename(name) {
            return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g)
          },
          linkToImgCallback() {
            console.log("api處理")
          },
          success(editor, msg) {
            let responseData = JSON.parse(msg)
//此處后臺返回一個上傳保存的url地址，此時編輯器應該將該地址插入到文本中，，，
//本人能力有限，還沒有研究出來，如果有大佬做出來希望可以教我一下
            console.log(responseData.url)
            return true
          },
          error(msg) {
            console.log(msg+"上傳失敗了")
          }
        }
      })
    }

</script>

后臺部分

    @ResponseBody
    @RequestMapping(value = "/question/fileupload",method = RequestMethod.POST)
    public FileDTO uploadImg(HttpServletRequest request) throws IOException {
        MultipartRequest multipartRequest= (MultipartRequest) request;
        MultipartFile file = multipartRequest.getFile("file[]");
        String url=ossUploadImgProvider.UploadFile(file.getInputStream(),file.getContentType(),file.getOriginalFilename());
        FileDTO fileDTO = new FileDTO();
        fileDTO.setMessage("上傳成功");
        fileDTO.setSuccess(1);
        fileDTO.setUrl(url);
        return fileDTO;
    }

============================分割線============================

內容渲染部分

tip：
編輯器在mounted()中初始化就渲染，此時axios還沒有請求到需要渲染的數(shù)據(jù)，所以我這里是在mounted()中先渲染一點無關數(shù)據(jù)，待axios請求到數(shù)據(jù)之后，使用watch監(jiān)聽data中question的變化，再調用renderMarkdown()方法渲染新的數(shù)據(jù)。

<template>
      <div class="vditor-reset" id="vditorPreview"></div>
</template>
<script>
import Vditor from 'vditor'
import "vditor/dist/index.css"
export default {
  data(){
    return{
      contentEditor:"",
      question:{description:"loading..."},
    }
  },
  created() {
    this.getDetails()
  },
  mounted(){
    this.renderMarkdown(this.question.description)
  },
  methods:{
    async getDetails(){
         this.axios.get('/question/'+this.$route.params.id,{
        }).then(res => {
          if(res.data.code==1000){
            let datalist =res.data.extend
            this.question = datalist.question
            console.log("數(shù)據(jù)請求完成")
          }
        }).catch(error => {
         })
      },
    renderMarkdown(md) {
      console.log("開始渲染")
      Vditor.preview(document.getElementById('vditorPreview'),
          md
      )
    }
    },
  watch: {
    question(question) {
      console.log("監(jiān)聽到數(shù)據(jù)改變")
      this.renderMarkdown(question.description);
    }
  }
}
</script>