Vue使用markdown编辑器：

---

1、效果：

2、实现：

【1】文档地址：

https://gitee.com/wCHCw/mavonEditor

【2】安装依赖：

npm install mavon-editor -S
或者
npm install mavon-editor@2.10.4 -S
1
2
3

【3】全局注册：

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)
1
2
3
4

【4】或在组件内注册：

<script>
// 导入组件 及 组件样式
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
    // 注册
    components: {
        mavonEditor,
    },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12

【5】Vue页面使用：

<mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
1

//预览
<el-dialog title="文章信息" :visible.sync="viewDialogVis" width="60%" >
  <el-card>
        <div>
          <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
          />
        </div>
    </el-card>
</el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
import axios from "axios";
export default {
  	name: "Article",
  	data() {
    	return {
      		form: {},
      		content: '',
      		viewDialogVis: false
    	}
  	},
  	methods: {
     // 绑定@imgAdd event
      imgAdd(pos, $file) { //上传图片
      let $vm = this.$refs.md
      const formData = new FormData()
 
      // 压缩图片
      if($file.type.indexOf("image") === 0) {
        let reader = new FileReader(), img = new Image();
        reader.readAsDataURL($file)
        reader.onload = function(e) {
          img.src = e.target.result
        }
        img.onload = function () {
          // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
          let canvas = document.createElement('canvas');
          let context = canvas.getContext('2d');
 
          // 图片原始尺寸
          let originWidth = this.width
          let originHeight = this.height
 
          // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
          let maxWidth = 800, maxHeight = 800
          // 目标尺寸
          let targetWidth = originWidth, targetHeight = originHeight
          // 图片尺寸超过800x800的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更宽，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
          }
          // canvas对图片进行缩放
          canvas.width = targetWidth
          canvas.height = targetHeight
          // 清除画布
          context.clearRect(0, 0, targetWidth, targetHeight)
          // 图片压缩
          context.drawImage(img, 0, 0, targetWidth, targetHeight)
          /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/
 
          //压缩后的图片转base64 url
          /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
           * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
          let newUrl = canvas.toDataURL('image/jpeg', 0.6);//base64 格式
 
          // base64 转 blob 再转 file
          let arr = newUrl.split(","),
            mime = arr[0].match(/:(.*?);/)[1], // 去掉url的头，并转化为byte
            bstr = atob(arr[1]), // 处理异常,将ascii码小于0的转换为大于0
            n = bstr.length,
            u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          // 转blob
          let filename = Date.parse(new Date()) + ".jpeg"
          // 转file
          let file = new File([u8arr], filename, { type: mime })
 
          // 将图片上传到服务器
          formData.append('file', file)
          axios({
            url: 'http://localhost:9090/file/upload',
            method: 'post',
            data: formData,
            headers: {'Content-Type': 'multipart/form-data'},
          }).then((res) => {
            // 将返回的url替换到文本原位置![...](./0) -> ![...](url)
            $vm.$img2Url(pos, res.data)
          })
        }
      }
    },
    //预览
    view(content) {
      	this.content = content
      	this.viewDialogVis = true
    },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

【6】API 文档=>props

 /*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         bold: true, // 粗体
         italic: true,// 斜体
         header: true,// 标题
    }
    此时, 仅仅显示此三个功能键
 */
toolbars: {
      bold: true, // 粗体
      italic: true, // 斜体
      header: true, // 标题
      underline: true, // 下划线
      strikethrough: true, // 中划线
      mark: true, // 标记
      superscript: true, // 上角标
      subscript: true, // 下角标
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 无序列表
      link: true, // 链接
      imagelink: true, // 图片链接
      code: true, // code
      table: true, // 表格
      fullscreen: true, // 全屏编辑
      readmodel: true, // 沉浸式阅读
      htmlcode: true, // 展示html源码
      help: true, // 帮助
      /* 1.3.5 */
      undo: true, // 上一步
      redo: true, // 下一步
      trash: true, // 清空
      save: true, // 保存（触发events中的save事件）
      /* 1.4.2 */
      navigation: true, // 导航目录
      /* 2.1.8 */
      alignleft: true, // 左对齐
      aligncenter: true, // 居中
      alignright: true, // 右对齐
      /* 2.2.1 */
      subfield: true, // 单双栏模式
      preview: true, // 预览
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

【7】API 文档=>events