wangeditor使用

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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<template>
  <div id='wangeditor'>
	<div id="wangeditor">
      <div ref="editorElem" style="text-align:left;"></div>
   </div>
    <button @click="updata">提交啊</button>
  </div>
</template>
 
<script>
  import E from "wangEditor";
  import 'wangeditor/release/wangEditor.min.css'
  export default {
    name:'wangeditor',
    data() {
      return {
         form: {
                title: '',
                ImageUrl: '',
                content:'',
                titleSource:'',
                fileSource:'',
            },
      }
    },
    mounted(){
 
          this.editor = new E(this.$refs.editorElem); 
            // 编辑器的事件，每次改变会获取其html内容 
            this.editor.customConfig.onchange = html => {
            this.form.content = html; 
            //  this.catchData(this.editorContent); 
            // 把这个html通过catchData的方法传入父组件 
            }; 

            this.editor.customConfig.menus = [
              // 菜单配置 
              'head', // 标题 
              'bold', // 粗体 
              'fontSize', // 字号 
              'fontName', // 字体 
              'italic', // 斜体 
              'underline', // 下划线 
              'strikeThrough', // 删除线 
              'foreColor', // 文字颜色 
              'backColor', // 背景颜色 
              'link', // 插入链接 
              'list', // 列表 
              'justify', // 对齐方式 
              'quote', // 引用 
              'emoticon', // 表情 
              'image', // 插入图片 
              'table', // 表格 
              'code', // 插入代码 
              'undo', // 撤销 
              'redo' // 重复 
              ]; 
              
            this.editor.customConfig.pasteFilterStyle = false
           	// 手过滤word样式
            this.editor.customConfig.pasteTextHandle = function (content) {
              // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
              if (content == '' && !content) return ''
              var str = content
              str = str.replace(/<xml>[sS]*?</xml>/ig, '')
              str = str.replace(/<style>[sS]*?</style>/ig, '')
              str = str.replace(/</?[^>]*>/g, '')
              str = str.replace(/[ | ]*n/g, 'n')
              str = str.replace(/&nbsp;/ig, '')
              console.log('****', content)
              console.log('****', str)
              return str
          }
            this.editor.customConfig.uploadFileName = "file";
            this.editor.customConfig.uploadImgHeaders = {
            'token':this.$store.getters.token
            }
            this.editor.customConfig.uploadImgServer = '/prod-api/file/upload' 
            // this.editor.customConfig.uploadImgServer = '/file/upload' 
            this.editor.customConfig.uploadImgTimeout = 10 * 60 * 1000 // 设置超时时间
            //自定义上传图片事件
            this.editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                },
                success: function (xhr, editor, result) {
                    console.log("上传成功");
                },
                fail: function (xhr, editor, result) {
                    console.log("上传失败,原因是" + result);
                    Message({
                      message: "请重新登录!",
                      type: 'error',
                      duration: 5 * 1000
                    })
                    this.$router.push({
                            path: '/login',
                        })
                },
                error: function (xhr, editor) {
                    console.log("上传出错");
                    Message({
                      message: "请重新登录!",
                      type: 'error',
                      duration: 5 * 1000
                    })
                    console.log(this.$router)
                    this.$router.push({
                            path: '/login',
                        })
                },
                timeout: function (xhr, editor) {
                  Message({
                      message: "上传超时!",
                      type: 'error',
                      duration: 5 * 1000
                    })
                    console.log("上传超时");
                },
          customInsert: function (insertImg, result, editor) {
            console.log(result)
            var url = result.data.url;
            insertImg(url)
        }
      };
            // this.editor.customConfig.uploadImgShowBase64 = true //图片以base64形式保存
            this.editor.customConfig.uploadImgMaxSize = 1024 * 1024 * 1024; // 将图片大小限制为 3M
            this.editor.create();
        },
    },
  }
</script>
 
<style>
 
</style>


组件封装参考：https://www.bbsmax.com/A/amd0g2Vq5g/