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
| <template>
| <div id="wangeditor">
| <div ref="editorElem" style="text-align:left;" />
| </div>
| </template>
| <script>
| import E from 'wangeditor'
| let self
| export default {
| name: 'EditorElem',
| props: {
| catchdata: {
| type: Function,
| default() {}
| },
| content: {
| type: String,
| default: ''
| },
| rangenum: {
| type: Range,
| default: null
| }
| },
| data() {
| return {
| editor: null,
| editorContent: ''
| }
| }, // 接收父组件的方法
| watch: {
| content(value) {
| console.log('content**', value)
| // console.log("没有光标则执行，有光标不执行，回显--解决输入时光标老跳到最底部", this.content, this.rangenum)
| if (this.rangenum == null) {
| // this.content.setRange(this.rangenum)
| this.editor.txt.html(value)
| }
| }
| },
| mounted() {
| self = this
| this.editor = new E(this.$refs.editorElem)
| this.editor.config.focus = false
| this.editor.config.onchange = (html) => {
| this.editorContent = html
| this.catchdata(this.editorContent) // 把这个html通过catchData的方法传入父组件
| }
| // 去掉插入网络图片
| this.editor.config.showLinkImg = false
| // 粘贴来的内容过滤图片
| this.editor.config.pasteIgnoreImg = true
| this.editor.config.menus = [ // 菜单配置
| 'head', // 标题
| 'bold', // 粗体
| 'fontSize', // 字号
| 'fontName', // 字体
| 'italic', // 斜体
| 'underline', // 下划线
| 'strikeThrough', // 删除线
| 'foreColor', // 文字颜色
| 'backColor', // 背景颜色
| 'link', // 插入链接
| 'list', // 列表
| 'justify', // 对齐方式
| 'quote', // 引用
| // 'emoticon', // 表情
| 'image', // 插入图片
| // 'table', // 表格
| // 'code', // 插入代码
| 'undo', // 撤销
| 'redo' // 重复
| ]
| // 下面是最重要的的方法
| // this.editor.config.withCredentials = true
| // 将图片大小限制为 5M
| this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024
| // 限制一次最多上传 1 张图片
| this.editor.config.uploadImgMaxLength = 1
| // 不忽略粘贴内容中的图片
| this.editor.config.pasteIgnoreImg = false
| this.editor.config.customUploadImg = function(files, insert) {
| // files 是 input 中选中的文件列表
| // insert 是获取图片 url 后，插入到编辑器的方法
| // 因为file是个FormData格式的对象所以可以直接通过接口开始上传，不需要做多余操作
| // 虽然文档说是FormData格式，但是我实际使用需要以下操作
| const formData = new FormData()
| formData.append('file', files[0])
| self.postFN(
| {
| url: 'admin/image/upload',
| header: { 'Content-Type': 'multipart/form-data' },
| params: formData,
| mockData: {
| code: 100,
| msg: '',
| data: {
| imgUrl: 'xxxx'
| }
| }
| },
| inf => {
| insert(inf.imgUrl)
| }
| )
| }
| // 自定义错误提示
| this.editor.config.customAlert = function(info) {
| // info 是需要提示的内容
| self.$messagewarn(info)
| }
| this.editor.create() // 创建富文本实例
| // if (!this.content) {
| // // this.editor.txt.html('请编辑内容1')
| // }
| }
| }
| </script>
| <style lang="scss" scoped>
| #wangeditor {
| position: sticky;
| /*设置富文本框高度*/
| .w-e-text-container{
| height: 500px !important;
| }
|
| }
| </style>
|
|
