在vue里面使用quill的扩展模块vue-quill-editor
效果图:
实现:
1.鼠标悬停时的提示,
2.因为编辑器默认图片是base64格式,所以需要自定义上传图片到服务器,通过服务器给的ID返回给后端,后端再给出URL然后前端插入在编辑器中
3.图片的拖拽和缩放
1、下载Vue-Quill-Editor
npm install vue-quill-editor --save
2、下载quill(Vue-Quill-Editor需要依赖)
npm install quill --save
3、拖拽,缩放模块
npm install quill-image-resize-module quill-image-drop-module --save
两种引用方法:全局引用和局部引用
- 全局引用
项目入口文件中(main.js)注册(也可以写在一个js里面然后把这个js引到main里面)
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
局部引用,在需调用的vue页面中声明
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
局部代码:
<template>
<div>
<quill-editor
ref="myQuillEditor"
@change='onEditorChange'
:content="content"
:options="editorOption"></quill-editor>
</div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
quillEditor } from 'vue-quill-editor';
export default {
data(){
return{
content: '',
editorOption: {
placeholder: '编辑文章内容'
},
}
},
components: {
quillEditor
},
methods:{
onEditorChange({
editor, html, text }) {
this.content = html;
},
}
}
</script>
我是全局引入的
全部代码:
<template>
<div class="box">
<el-upload
class="avatar-uploader"
action="#"
name="img"
:show-file-list="false"
:auto-upload="false"
:on-change="changeFile"
:before-upload="beforeUpload">
</el-upload>
<!-- 富文本编辑器组件 -->
<el-row v-loading="uillUpdateImg">
<quill-editor
ref="myQuillEditor"
@change='onEditorChange'
:content="content"
:options="editorOption"></quill-editor>
<!-- 显示字数 -->
<span class="sizeTishi">{
{
tiLength}}/10000</span>
</el-row>
</div>
</template>
<script>
import editorTarbar from '@/utils/editorTarbar' //头部的功能配置
import uploadPicToIOBS from '@/api/content/article/api.js'
import {
saveImageUploadRecord, getIobsUrl }