以下内容你得使用过 可能对你才会有所帮助 ^!^
1、引用
import { vueQuillEditor, Quill } from 'vue-quill-editor';
import {ImageResize} from 'quill-image-resize-module';
Quill.register('modules/imageResize',ImageResize); // 图片缩放
2、option 配置
defaultEditorOption: {
placeholder: '请输入点评内容',
// formats: getFormatList({ list: false }),
modules: {
toolbar: `#toolbar${id}`, //Math.random() .toString(36) .substr(2);// 随机数
// 图片缩放
imageResize: {
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
},
// 粘贴图片配置
ImageExtend: this.pasteImgConfig(),
clipboard: {
matchers: [[Node.ELEMENT_NODE, this.handlePaste]]
},
keyboard: {
bindings: {
'list autofill': {
key: ' ',
shiftKey: null,
collapsed: true,
format: {
list: false,
'code-block': false,
blockquote: false,
header: false,
table: false
},
prefix: /^\s*?(\d+\.|-|\*|\[ ?\]|\[x\])$/,
handler() {
return true;
}
}
}
}
}
}
3、pasteImgConfig 上传配置图片
pasteImgConfig() {
return {
loading: false,
name: 'file',
action: URL,
headers: (xhr) => {
// let merchantInfo = JSON.parse(localStorage.getItem('merchantInfo'));
xhr.setRequestHeader('Auth', JSON.parse(localStorage.getItem('userInfo')).auth || '');
},
start: () => {
this.imgUploading = true;
},
response: (res) => {
this.imgUploading = false;
if (res.code === 0) {
return `//cdn.****.com/${res.data.url}`;
} else {
$tool.message('error', '上传图片失败', 1500);
}
},
onerror: () => {
this.imgUploading = false;
$tool.message('error', '上传图片失败', 1500);
}
};
},
4、上传图片的方法
// 上传图片
async handleFileChange(e) {
this.imgUploading = true;
try {
const file = e.target.files[0];
e.target.value = '';
if (file.size > 1024 * 1024 * 2) {
$tool.message('error', '图片大小不能大于2M', 1500);
this.imgUploading = false;
return;
}
const res = await uploadImg(file);
if (res && res.url) {
const position = this.$refs.myTextEditor.quill.selection.savedRange.index;
this.$refs.myTextEditor.quill.insertEmbed(position, 'image', `//cdn.***.com/${res.url}`);
} else {
$tool.message('error', '上传图片失败', 1500);
}
} catch (err) {}
this.imgUploading = false;
}
Quill 相关文档：https://www.kancloud.cn/
