1
<template>
2
  <div class="index-page" v-loading="isLoading">
3
    <div id="vditor" class="vditor" :style="vditorClass" />
4
  </div>
5
</template>
6

7
<script>
8
  import Vditor from 'vditor'
9
  import { getToken } from '@/utils/auth'
10
  export default {
11
    name: 'MarkdownEditor',
12
    props: ["height"],
13
    data() {
14
      return {
15
        isLoading: true,
16
        isMobile: window.innerWidth <= 960,
17
        vditor: null
18
      }
19
    },
20
    created() {
21

22
    },
23
    components: {
24

25
    },
26
    computed:{
27
      vditorClass: function(){
28
        return {
29
          height: this.height + 'px'
30
        }
31
      }
32
    },
33
    mounted() {
34
      this.initVditor()
35
      this.$nextTick(() => {
36
        this.isLoading = false
37
      })
38
    },
39
    methods: {
40
      initVditor() {
41
        const that = this
42
        const options = {
43
          width: this.isMobile ? '100%' : '100%',
44
          height: '0',
45
          tab: '\t',
46
          counter: '999999',
47
          typewriterMode: true,
48
          mode: 'wysiwyg',
49
          preview: {
50
            delay: 100,
51
            show: !this.isMobile
52
          },
53
          outline: true,
54
          upload: {
55
            max: 5 * 1024 * 1024,
56
            handler(file) {
57
              let formData = new FormData()
58
              for (let i in file) {
59
                formData.append('smfile', file[i])
60
              }
61
              let request = new XMLHttpRequest()
62
              // 图片上传路径
63
              request.open('POST', process.env.PICTURE_API + '/ckeditor/imgUpload?token=' + getToken())
64
              request.onload = that.onloadCallback
65
              request.send(formData)
66
            }
67
          }
68
        }
69
        this.vditor = new Vditor('vditor', options)
70
        // this.vditor.focus()
71
      },
72
      onloadCallback(oEvent) {
73
        const currentTarget = oEvent.currentTarget
74
        console.log("返回的结果", currentTarget)
75
        if (currentTarget.status !== 200) {
76
          return this.$message({
77
            type: 'error',
78
            message: currentTarget.status + ' ' + currentTarget.statusText
79
          })
80
        }
81
        let resp = JSON.parse(currentTarget.response)
82
        let imgMdStr = ''
83
        if (resp.uploaded !== 1) {
84
          return this.$message({
85
            type: 'error',
86
            message: resp.error.message
87
          })
88
        }
89
        if (resp.uploaded === 1) {
90
          imgMdStr = `![${resp.fileName}](${resp.url})`
91
        }
92
        this.vditor.insertValue(imgMdStr)
93
      },
94
      //获取data
95
      getData: function() {
96
        // let text = localStorage.getItem('vditorvditor')
97
        // 返回的文本
98
        // return this.$commonUtil.markdownToHtml(text);
99

100
        return this.vditor.getHTML();
101
      },
102
      setData: function(data) {
103

104
        // console.log("将html转", this.vditor.html2md(data))
105
        var that = this;
106
        this.$nextTick(() => {
107
          //DOM现在更新了
108
          that.initVditor()
109

110
          let markdownText = that.$commonUtil.htmlToMarkdown(data)
111
          console.log("转换前", data)
112
          console.log("得到的html", markdownText)
113
          localStorage.setItem('vditorvditor', markdownText)
114
        });
115
      },
116
      initData: function () {
117
        var that = this
118
        this.$nextTick(() => {
119
          that.vditor.setValue("")
120
        });
121
      }
122
    }
123
  }
124
</script>
125

126
<style>
127
  .vditor-panel {
128
    line-height: 0px;
129
  }
130
  .index-page {
131
    width: 100%;
132
    height: 100%;
133
    background-color: #FFFFFF;
134
  }
135
  .vditor {
136
    width: 100%;
137
    /*height: calc(100vh - 100px);*/
138
    top: 20px;
139
    /*margin: 20px auto;*/
140
    text-align: left;
141
  }
142
  .vditor-reset {
143
    font-size: 14px;
144
  }
145
  .vditor-textarea {
146
    font-size: 14px;
147
    height: 100% !important;
148
  }
149
</style>

1
let request = new XMLHttpRequest()
2
// 图片上传路径
3
request.open('POST', process.env.PICTURE_API + '/ckeditor/imgUpload?token=' + getToken())

1
// 引入组件
2
import MarkdownEditor from "../../components/MarkdownEditor";
3

4
// 声明组件
5
components: {
6
  MarkdownEditor
7
},

1
<MarkdownEditor :content="form.content" ref="editor" :height="465"></MarkdownEditor>