富文本 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
import E from "wangeditor";
import {filterXSS} from "xss"; //xss攻击
mounted(){
this.$nextTick(function () {
let html = this.ruleForm.content
this.init(html);
});
}，
methods: {
async init(html){
//methods里创建调用、或是mounted里面直接生产
this.editContent = new E(this.$refs.editorElem);//获取组件并构造编辑器
this.editContent.config.menus =[
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入图片
"table", // 表格
// "video", // 插入视频
"undo", // 撤销
"redo", // 重复
"fullscreen"// 全屏
]
// 上传图片方法二
// this.editContent.config.uploadImgMaxSize = 3 * 1024 * 1024;
// this.editContent.config.uploadFileName = 'file'
// this.editContent.config.uploadImgHeaders ={'Authorization':'Bearer '+ getToken()}
// this.editContent.config.uploadImgServer = 'http://112.35.127.4:8089/api/file/upload'//换成后端给你的上传图片的接口
// this.editContent.config.uploadImgHooks = {
//
before: function (xhr, editor, files) {
//
let formdata=new FormData();
//
console.log(xhr, editor, files)
//
// for(let i=0;i<files.length;i++){
//
//
let url = files[i];
//
//
formdata.append('file', url)
//
// }
//
},
//
customInsert: function (insertImg, result, editor) {
//
console.log(result)
//
insertImg(result.data)
//
}
// }
// 上传图片方法二
this.editContent.config.showLinkImg = true; //是否隐藏网络图片上传
this.editContent.config.uploadImgShowBase64 = true; //图片以base64形式保存
this.editContent.config.uploadFileName = "file";
this.editContent.config.uploadImgMaxSize = 1 * 1024 * 1024;
this.editContent.config.customUploadImg = (files, insert) => {
let formDataCover = new FormData()
formDataCover.append('file',files[0])
post('file/upload',formDataCover).then(res=>{
let {data,code} = res
insert(data)
})
};
this.editContent.create(); // 创建富文本实例
this.editContent.txt.html(html)
}，
submit(){
//生成html上传
let htmlTow = this.editContent.txt.html()
htmlTow = filterXSS(htmlTow)
this.ruleForm.content = htmlTow
}
}