vue-quill-editor富文本编辑器插入图片_quill-editor 插入img

主要就是增加了elment-ui的el-upload上传图片组件

editor.vue 组件

<template>
	<div>
	<!-- 图片上传组件辅助-->
	<el-upload
		class="avatar-uploader"
		:action="serverUrl"
		name="file"
		:data="imgData"
		:show-file-list="false"
		:on-success="uploadSuccess"
		:on-error="uploadError"
		:before-upload="beforeUpload"
		id="quill-upload">
	</el-upload>
	<!--富文本编辑器组件-->
	<el-row v-loading="quillUpdateImg">
		<quill-editor
		v-model="detailContent"
		ref="myQuillEditor"
		:options="editorOption"
		@change="onEditorChange($event)"
		@ready="onEditorReady($event)"
		>
		</quill-editor>
	</el-row>
	</div>
</template>
<script>
import {quillEditor} from 'vue-quill-editor';
const toolbarOptions = [
	['bold', 'italic', 'underline', 'strike'], // toggled buttons
	['blockquote', 'code-block'],
	
	[{'header': 1}, {'header': 2}], // custom button values
	[{'list': 'ordered'}, {'list': 'bullet'}],
	[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
	[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
	[{'direction': 'rtl'}], // text direction
	
	[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}], // custom dropdown
	[{'header': [1, 2, 3, 4, 5, 6, false]}],
	
	[{'color': []}, {'background': []}], // dropdown with defaults from theme
	[{'font': []}],
	[{'align': []}],
	['link', 'image'],
	['clean'] // remove formatting button
]
export default {
	props:{
		serverUrl:String,
		imgData:Object
	},
	data() {
		return {
			quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
			// serverUrl: '', // 这里写你要上传的图片服务器地址
			// header: {token: sessionStorage.token}, // 有的图片服务器要求请求头需要有token之类的参数，写在这里
			detailContent: '', // 富文本内容
			editorOption: {
				placeholder: '',
				theme: 'snow', // or 'bubble'
				modules: {
					toolbar: {
						container: toolbarOptions, // 工具栏
						handlers: {
							'image': function (value) {
								if (value) {
									document.querySelector('#quill-upload input').click()
								} else {
									this.quill.format('image', false);
								}
							}
						}
					}
				}
			} // 富文本编辑器配置
		}
	},
	methods: {
		// 上传图片前
		beforeUpload(res, file) {
			this.quillUpdateImg = true
		},
		// 上传图片成功
		uploadSuccess(res, file) {
			// res为图片服务器返回的数据
			// 获取富文本组件实例
			let quill = this.$refs.myQuillEditor.quill
			// 如果上传成功
			console.log(res)
			if (res.code == 200 && res.result !== null) {
				// 获取光标所在位置
				let length = quill.getSelection().index;
				// 插入图片 res.info为服务器返回的图片地址
				quill.insertEmbed(length, 'image', res.result.url)
				// 调整光标到最后
				quill.setSelection(length + 1)
			} else {
				this.$message.error('图片插入失败')
			}
			// loading动画消失
			this.quillUpdateImg = false
		},
		// 上传图片失败
		uploadError(res, file) {
			// loading动画消失
			this.quillUpdateImg = false
			this.$message.error('图片插入失败')
		},
		onEditorChange(){},
		onEditorReady(){},
		getContent(value){
			this.detailContent = value
		}
	},
	components:{
		quillEditor
	},
	watch:{
		detailContent(newVal,oldVal){
			this.$emit('changeContent',newVal)
		}
	}
}
</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
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

使用editor.vue的组件

<template>
    <Editor :serverUrl="imgUrl" :imgData="imgData" :msg="content" @changeContent="changeContent" ref="editor"></Editor>
</template>
<script>
    import Editor from 'components/editor/editor';
    export default {
        computed:{ 
            data(){
                content:""  //如果初始化从接口拿到显示的数据就复制给this.content
            },
            imgUrl(){
                return SERVER_PATH+"dapp/backmgr/dapp/open/uploadImg";   // 上传图片的接口地址
            },
            imgData(){
                return {type:'img',token:this.token}  //上传图片除图片文件外需要的参数
            },
        },
        methods:{
            changeContent(value){
                this.content = value;
            }
        },
        
        components:{
            Editor
        },
        watch:{
           // 监听初始化是否有数据，有的话触发editor的getContent事件
           content(newVal,oldVal){
               this.$refs.editor.getContent(newVal);
            }
        }
    }
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