1.使用npm安装vue-quill-editor
npm install vue-quill-editor -s
2.挂载到项目,这里使用的是全局挂载,在main.js中加入如下代码
import VueQuillEditoe from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditoe)
3.设置上传接口,创建api文件夹,在该文件夹下设置request.js与upload.js
其中request.js是用于封装axios请求,获取本地请求路径
import axios from 'axios'
/**
* 封装axios请求
*/
// create an axios instance
const service = axios.create({
baseURL: 'http://localhost:8080/ceshi/',//本地请求路径
timeout: 5000 // request timeout
})
// request 拦截器,
service.interceptors.request.use(
config => {
// do something before request is sent
//TODO: 请求拦截器,如设置Token
return config
},
error => {
// do something with request error
console.log(error)
return Promise.reject(error)
}
)
// 响应拦截
service.interceptors.response.use(
response => {
//TODO: 响应拦截器,可以统一处理返回响应码
return response
},
error => {
return Promise.reject(error)
}
)
export default service
upload.js为上传接口
import request from '@/api/request'
//图片上传
export function upload(data){
return request({
url:'/image/upload',
method:'post',
data:data,
headers:{ "token": sessionStorage.getItem("token")}
})
}
4.使用组件
<template>
<div>
<el-row style="left: 40px">
<el-button @click="update" style="background-color: #42b983;color: white;left: 120px" icon="el-icon-edit-outline">编辑</el-button>
</el-row>
<el-form :modal="form">
<el-form-item label="aboutUs:" prop="about us" :label-width="formLabelWidth">
<div class="ql-editor" v-html="content"></div><!--富文本框中的内容展示,包括图片,文字等信息-->
</el-form-item>
</el-form>
<!--编辑-->
<el-dialog title="编辑" :visible.sync="dialogApp1">
<el-form :model="form1" ref="contractUs">
<el-form-item label="aboutUs:" prop="about us" :label-width="formLabelWidth">
<!-- 1.第一步:引入上传图片组件并且设置其style为none -->
<el-upload
style="display: none"
class="quill-avatar-uploader"
:show-file-list="false"
accept="image/png, image/jpeg, image/jpg"
:before-upload="beforeAvatarUpload"
:http-request="uploadLicencePicNo"
>
</el-upload>
<quill-editor ref="myQuillEditor"
:options="editorOption"
:content="content"
@change="onEditorChange($event)">
</quill-editor>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogApp1=false">取消</el-button>
<el-button @click="edit" style="background-color: #409EFF;color: white">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { Message } from "element-ui";
import {upload} from '@/api/upload'
// 工具栏配置
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'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', 'video'],
['clean'] // remove formatting button
]
export default {
name: "index",
data() {
return {
content: "", // 富文本框内容展示
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
//自定义图片上传
'image': function (value) {
if (value) {
document.querySelector('.quill-avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
dialogApp1:false,
formLabelWidth:'120px',
}
},
methods:{
// 文字内容
onEditorChange({ quill, html, text }) {
this.content = html; // 保存输入的内容
},
/* ----------第三步:编写上传事件,并且将内容放置于展示区域-----------*/
// 图片上传前---格式与大小验证
beforeAvatarUpload(file) {
let isPass = false;
if (
file.type === "image/png" ||
file.type === "image/jpeg" ||
file.type === "image/jpg"
) {
isPass = true;
}
const isLt = file.size / 1024 / 1024 < 5;
if (!isPass) {
this.$message.error("当前仅支持上传图片JPG/jpeg/png格式!");
return false;
}
if (!isLt) {
this.$message.error("上传图片大小不能超过 5MB!");
return false;
}
return isPass && isLt;
},
// 图片-上传操作
uploadLicencePicNo(e) {
// 打开上传动画
const loading = this.$loading({
lock: true,
text: "上传中...",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
// 调用上传接口将文件传递给后台 --- 这里uploadFile()是上传文件接口
let formData = new FormData();
formData.append("image", e.file);
upload(formData).then((res) => {
// 如果上传成功,就可以获得相关路径如:http:xxxx.jpg,我这里是在res.data.url中
if (res.data.code=="0") {
/*---核心操作区域---start---*/
// 获取富文本组件实例
let quill = this.$refs["myQuillEditor"].quill;
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片insertEmbed()三个参数,前两个固定即可
quill.insertEmbed(length, "image", "http://website.s.muicc.com"+res.data.data);
// 调整光标到最后
quill.setSelection(length + 1);
/*---核心操作区域---end---*/
} else {
this.$message.error("图片插入失败!");
}
// 关闭上传动画
loading.close();
})
.catch(() => {
// 错误,则关闭上传动画
loading.close();
});
},
listAboutUs(){
list().then(res=>{
if(res.data.code=="0"){
this.content=res.data.data.companyAbout;
}else{
Message.error(res.data.message);
}
})
},
//富文本框中的内容修改
update(){
this.dialogApp1=true;
},
edit(){
let data={
"companyAbout":this.content
}
add(data).then(res=>{
if(res.data.code=="0"){
Message.success(res.data.message);
this.listAboutUs();
this.dialogApp1=false;
}else{
Message.error(res.data.message);
}
})
}
},
created() {
this.listAboutUs();
}
}
</script>