本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义，供大家参考，具体内容如下
1.安装
npm install vue-quill-editor --save
2.在main.js中引入
import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor);
3. template
<div> <!-- 图片上传组件辅助--> <el-upload class="avatar-uploader" :action="serverUrl" name="img" :headers="header" :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload"> </el-upload> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" > </quill-editor> </div>
4.js
<script>
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'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'],
['clean']
]
export default {
data() {
return {
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
content: null,
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
serverUrl: '/manager/common/imgUpload', // 这里写你要上传的图片服务器地址
header: {
// token: sessionStorage.token
} // 有的图片服务器要求请求头需要有token
}
},
methods: {
onEditorChange({editor, html, text}) {//内容改变事件
console.log("---内容改变事件---")
this.content = html
console.log(html)
},
// 富文本图片上传前
beforeUpload() {
// 显示loading动画
this.quillUpdateImg = true
},
uploadSuccess(res, file) {
// res为图片服务器返回的数据
// 获取富文本组件实例
console.log(res);
let quill = this.$refs.myQuillEditor.quill
// 如果上传成功
if (res.code == 200 ) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.url)
// 调整光标到最后
quill.setSelection(length + 1)
} else {
this.$message.error('图片插入失败')
}
// loading动画消失
this.quillUpdateImg = false
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false
this.$message.error('图片插入失败')
}
}
}
注意：serverUrl :文件上传地址不能直接写全路径，会出现跨域问题报错。需要在conf/index.js 中 进行配置
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
host: 'localhost', // can be overwritten by process.env.HOST
port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
cssSourceMap: true,
proxyTable: {
'/api': {
target: 'http://localhost:18080/', //设置调用接口域名和端口号别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api'代替target里面的地址，组件中我们调接口时直接用/api代替
// 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add'即可 代理后地址栏显示/
}
},
'/manager': {
target: 'http://localhost:18081/',
changeOrigin: true,
pathRewrite: {
'^/manager': '/'
}
}
}
},
5.style
<style>
.ql-editor.ql-blank, .ql-editor {
height: 350px;
}
</style>
6.后台图片上传接口
@RequestMapping(value = "/imgUpload")
public Map<String ,Object> imgUpload(HttpServletRequest req, MultipartHttpServletRequest multiReq)
throws IOException {
FileOutputStream fos = new FileOutputStream(
new File("E://fileupload//upload.jpg"));
FileInputStream fs = (FileInputStream) multiReq.getFile("img").getInputStream();
byte[] buffer = new byte[1024];
int len = 0;
while ((len = fs.read(buffer)) != -1) {
fos.write(buffer, 0, len);
}
fos.close();
Map<String ,Object> map=new HashMap<>();
map.put("code",200);
map.put("msg","上传成功");
map.put("url","http://localhost:8080/tomcat.png");
return map;//这里只做返回值测试用，url 参数为图片上传后访问地址。具体根据功能进行修改}
7.效果如下