踩坑多次之后终于找到一个完美的解决方法
//富文本编译器完整代码
<template>
<div>
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@change="onEditorChange($event,content,500)"
/>
</div>
</template>
<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);
export default {
data() {
return {
setTime:null,
content: '',
editorOption: {
// Some Quill options...
modules: {
ImageExtend: {
loading: true,
name: "good_pic",
action: "http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic",
headers: (xhr) => {
xhr.setRequestHeader(
"X-Nideshop-Token",
localStorage.getItem("token")
);
}, // change: (xhr, formData) => {},这里也可以触发
response: (res) => {
// console.log(res);
return res.data.fileUrl;
},
},
toolbar: {
container: container,
handlers: {
image: function () {
QuillWatch.emit(this.quill.id);
},
},
},
},
},
};
},
methods: {
onEditorChange({ quill, html, text }) {
// console.log("editor change!", quill, html, text);
this.content = html;
this.$store.commit("quilledit", this.content);
},
},
created(){
this.setTime=setInterval(()=>{
this.content=this.$store.state.QuillEdit
},100)
},
destroyed(){
clearTimeout(this.setTime)
}
};
</script>
<style>
</style>
首先 安装vue-quill-editor和quill-image-extend-module
然后在main.js文件配置如下代码
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor, /* { default global options } */)
另外建议新建一个文件,这里我建的是MyQuill.vue文件
以后要用复制粘贴就完事了
<template>
<div>
<quill-editor
ref="myQuillEditor"
v-model="content"
:options="editorOption"
@change="onEditorChange($event,content,500)"
/>
</div>
</template>
<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
Quill.register("modules/ImageExtend", ImageExtend);
export default {
data() {
return {
setTime:null,//
content: '',//这是文本内容
editorOption: {
// Some Quill options...
modules: {
ImageExtend: {
loading: true,
name: "上传图片的参数名",
action: "上传图片的接口路径",
headers: (xhr) => {
xhr.setRequestHeader(//设置请求头,看需求
"X-Nideshop-Token",
localStorage.getItem("token")
);
}, // change: (xhr, formData) => {},这里也可以触发
response: (res) => {
//
上传成功的回调函数
// console.log(res);
return res.data.fileUrl;
},
},
//加载工具栏
toolbar: {
container: container,
handlers: {
image: function () {
QuillWatch.emit(this.quill.id);
},
},
},
},
},
};
},
然后再写方法将请求回来的数据保存到content,完美
methods: {
onEditorChange({ quill, html, text }) {
// console.log("editor change!", quill, html, text);
this.content = html;//获取到内容赋值给content显示
//我这里因为在其他组件需要用到数据所以上传到vuex上
this.$store.commit("quilledit", this.content);
},
},
};
这样就可以在上面书写文字,上传图片了,而且都是字符串的形式,转码好了的。保存起来以后要是还需要用到复制粘贴就完事了,我做项目搞这个就坑了一天了