|
|
|
|
@ -2,8 +2,8 @@ |
|
|
|
|
<div class="quill" :class="[classes,readonly ? 'readonly' : '']"> |
|
|
|
|
<div :ref="toref" :style="styles" v-loading="loading"></div> |
|
|
|
|
|
|
|
|
|
<el-upload :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" style="display: none"> |
|
|
|
|
<el-button class="editorUpload" ref="editorUpload" size="small" type="primary">点击上传</el-button> |
|
|
|
|
<el-upload :headers="headers" :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" style="display: none"> |
|
|
|
|
<el-button :id="'editorUpload' + index" ref="editorUpload" size="small" type="primary">点击上传</el-button> |
|
|
|
|
</el-upload> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -43,11 +43,19 @@ |
|
|
|
|
}, |
|
|
|
|
minHeight: { |
|
|
|
|
type: Number |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 当前富文本的索引。一个页面引入多个富文本的时候会无法获取到对应的实例，所以通过在父级存储实例的方式来保存 |
|
|
|
|
index: { |
|
|
|
|
type: Number, |
|
|
|
|
default: 0 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data () { |
|
|
|
|
let that = this |
|
|
|
|
return { |
|
|
|
|
headers: { |
|
|
|
|
token: this.$store.state.token |
|
|
|
|
}, |
|
|
|
|
Quill: null, |
|
|
|
|
currentValue: '', |
|
|
|
|
options: { |
|
|
|
|
@ -57,18 +65,16 @@ |
|
|
|
|
modules: { |
|
|
|
|
toolbar: { |
|
|
|
|
container: this.readonly ? [] : toolbarOptions, |
|
|
|
|
// handlers: { |
|
|
|
|
// 'image' (value) { |
|
|
|
|
// console.log(22,value,that.Quill,that.toref,that.$refs) |
|
|
|
|
// if (value) { |
|
|
|
|
// that.qu = that.Quill |
|
|
|
|
// // 调用iview图片上传 |
|
|
|
|
// document.querySelector('.editorUpload').click() |
|
|
|
|
// } else { |
|
|
|
|
// this.Quill.format('image', false); |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
handlers: { |
|
|
|
|
"image": function(value) { |
|
|
|
|
if (value) { |
|
|
|
|
// 调用iview图片上传 |
|
|
|
|
document.querySelector("#editorUpload" + that.index).click(); |
|
|
|
|
} else { |
|
|
|
|
this.Quill.format("image", false); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
placeholder: '', |
|
|
|
|
@ -185,28 +191,22 @@ |
|
|
|
|
beforeUpload(file){ |
|
|
|
|
this.loading = true |
|
|
|
|
}, |
|
|
|
|
editorUploadSuccess (res) { |
|
|
|
|
editorUploadSuccess(res) { |
|
|
|
|
// 获取富文本组件实例 |
|
|
|
|
// let toeval = "this.$refs."+this.toref+'.quill' |
|
|
|
|
let toeval = 'this.$refs.editor2' |
|
|
|
|
// console.log("toeval",toeval); |
|
|
|
|
let quill = eval(toeval); |
|
|
|
|
// let quill = this.Quill |
|
|
|
|
let quill = this.Quill; |
|
|
|
|
// 如果上传成功 |
|
|
|
|
console.log(11,this.$refs) |
|
|
|
|
|
|
|
|
|
// if (res.data.filesResult.fileUrl) { |
|
|
|
|
// // 获取光标所在位置 |
|
|
|
|
// let length = quill.selection.savedRange.index; |
|
|
|
|
// // 插入图片，res为服务器返回的图片链接地址 |
|
|
|
|
// quill.insertEmbed(length, 'image', res.data.filesResult.fileUrl) |
|
|
|
|
// // 调整光标到最后 |
|
|
|
|
// quill.setSelection(length + 1) |
|
|
|
|
// } else { |
|
|
|
|
// this.$message.success('图片插入失败') |
|
|
|
|
// } |
|
|
|
|
this.loading = false |
|
|
|
|
}, |
|
|
|
|
if (res.data.filesResult.fileUrl) { |
|
|
|
|
// 获取光标所在位置 |
|
|
|
|
let length = quill.getSelection().index; |
|
|
|
|
// 插入图片，res为服务器返回的图片链接地址 |
|
|
|
|
quill.insertEmbed(length, "image", res.data.filesResult.fileUrl); |
|
|
|
|
// 调整光标到最后 |
|
|
|
|
quill.setSelection(length + 1); |
|
|
|
|
} else { |
|
|
|
|
util.successMsg("图片插入失败"); |
|
|
|
|
} |
|
|
|
|
this.loading = false; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
