<div v-show='false'>
<el-upload class="avatar-uploader"
action=""
accept="image/png,image/jpg,image/jpeg"
:show-file-list="false"
:http-request='uploadImgInQuill'
:before-upload="beforethumbnail"
auto-upload>
<i class="el-icon-plus"
id="uploadImg"></i>
</el-upload>
</div>
<div class="edit_container"
style="margin-top: 10px;">
<quill-editor v-model="addForm.useExplain"
:options="editorOption"
ref="myQuillEditor"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"></quill-editor>
</div>
<script>
// 富文本工具栏配置
const toolbarOptions = [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["image"] // 链接、图片、视频
];
export default {
name: "addArticle",
data () {
// 富文本编辑器选项
editorOption: {
theme: "snow", // or 'bubble'
placeholder: "请输入内容",
modules: {
toolbar: {
container: toolbarOptions,
// container: "#toolbar",
handlers: {
image: function (value) {
console.log(value);
if (value) {
// 触发input框选择图片文件
document.querySelector("#uploadImg").click();
} else {
this.quill.format("image", false);
}
}
}
}
}
},
// 上传图片状态
uploadState: true,
}
methods: {
// 图片上传显示
beforethumbnail (file) { // 图片上传前
this.uploadState = true;
if (file.type != "image/png") {
this.$message.error('上传图片格式应为:png');
this.uploadState = false;
return false;
}
if (file.size / 1024 / 1024 > 10) {
this.$message.error('上传图片不能大于10M')
this.uploadState = false;
return false;
}
},
// 商品详情插入前校验
beforeDetailUpload (file) {
console.log("before");
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
// 图片转base64完成后返回reader对象
//this.smallbase64 = reader.result;
resolve(reader.result);
};
});
},
// 商品详情插入图片
async uploadImgInQuill (file) { // 文章中上传图片返回URL
if (this.uploadState) {
let imgInQuill = await this.beforeDetailUpload(file.file);
let parames = {
functionName: "productbiz.service.puhui.integralMall.IntegralMallService",
methodName: "saveGoodsSmallImage",
data: {
file: imgInQuill
}
};
this.http(JSON.stringify(parames))
.then(res => {
if (res.data.status === 1) {
this.$message({
type: "success",
message: "上传成功!"
});
this.insertImgUrl(res.data.smallImage)
}
})
.catch(res => { });
}
},
// 插入图片
insertImgUrl (res) {
let quill = this.$refs.myQuillEditor.quill;
console.log("editer :", quill.getSelection());
if (quill.getSelection()) {
let length = quill.getSelection().index;
// 插入图片,res为服务器返回的图片链接地址
quill.insertEmbed(
length,
"image",
res
);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
quill.insertEmbed(
"0",
"image",
res
);
// 调整光标到最后
quill.setSelection(length + 1);
}
},
}
</script>