安装 cnpm install vue-quill-editor -s<el-form-item label="推送内容"><!--<el-input v-model="form.content" style="width: 370px;"/>--><div><!-- 图片上传组件辅助--><el-uploadclass="avatar-uploader":action="serverUrl"name="file":headers="header":show-file-list="false":on-success="uploadSuccess":on-error="uploadError":before-upload="beforeUpload"></el-upload><quill-editorv-model="content"ref="myQuillEditor":options="editorOption"@change="onEditorChange($event)"></quill-editor></div></el-form-item>const toolbarOptions = [['bold', 'italic', 'underline', 'strike'], // toggled buttons[{'header': 1}, {'header': 2}],// custom button values[{'list': 'ordered'}, {'list': 'bullet'}],[{'indent': '-1'}, {'indent': '+1'}],// outdent/indent[{'direction': 'rtl'}],// text direction[{'size': ['small', false, 'large', 'huge']}], // custom dropdown[{'header': [1, 2, 3, 4, 5, 6, false]}],[{'color': []}, {'background': []}],// dropdown with defaults from theme[{'font': []}],[{'align': []}],['link', 'image'],['clean']]serverUrl: '/api/slMessagePush/uploadFile', // 这里写你要上传的图片服务器地址header: {'Authorization': getToken()// 有的图片服务器要求请求头需要有toke},//--------------------------------------富文本开始-----------------------------------quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示content: null,editorOption: {placeholder: '',theme: 'snow', // or 'bubble'placeholder: '最多输入2000字。',modules: {toolbar: {container: toolbarOptions,handlers: {'image': function (value) {if (value) {// 触发input框选择图片文件document.querySelector('.avatar-uploader input').click()} else {this.quill.format('image', false);}}}}}},serverUrl: '/api/slMessagePush/uploadFile', // 这里写你要上传的图片服务器地址header: {'Authorization': getToken()// 有的图片服务器要求请求头需要有toke},}//--------------------------------------富文本结束-----------------------------------// 富文本图片上传前beforeUpload() {// 显示loading动画this.quillUpdateImg = true},uploadSuccess(res, file) {// res为图片服务器返回的数据// 获取富文本组件实例console.log(res);let quill = this.$refs.myQuillEditor.quill// 如果上传成功if (res.code == '00' ) {// 获取光标所在位置let length = quill.getSelection().index;// 插入图片 res.url为服务器返回的图片地址quill.insertEmbed(length, 'image', res.filePath)// 调整光标到最后quill.setSelection(length + 1)} else {this.$message.error('图片插入失败')}// loading动画消失this.quillUpdateImg = false},// 富文本图片上传失败uploadError() {// loading动画消失this.quillUpdateImg = falsethis.$message.error('图片插入失败!')},
