准备工作:安装 yarn install vue-quill-editor
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'
// 需要在new VUE之前
Vue.use(VueQuillEditor);
test.vue
<template>
<div>
<!-- // 新增按钮-->
<div style="width: 100%; text-align: right;">
<el-button type="success" style="float: left" @click="addCommodity">新增商品</el-button>
</div>
<br><br>
<div>
<el-dialog title="新增商品信息" :visible.sync="dialogFormVisible" width="50%" :close-on-click-modal="false">
<el-form-item label="商品介绍" :rules="[{ required: true, message: '请输入商品介绍', trigger: 'blur' }]"><br>
<quill-editor
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="handleAdd">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import {quillRedefine} from 'vue-quill-editor-upload'
export default {
name: "CommodityList",
data() {
return {
dialogFormVisible: false,
formLabelWidth: 200,
form: {
xuni: 0,
},
content: '',
uploadUrl: this.$webSite + "/manage/upload_api/",
}
},
created() {
this.editorOption = quillRedefine(//修改富文本编辑器图片上传路径
{
// 图片上传的设置
uploadConfig: {
action: this.uploadUrl, // 必填参数 图片上传地址\
too: [['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{'header': 1}, {'header': 2}], [{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}], [{'indent': '-1'}, {'indent': '+1'}], [{'direction': 'rtl'}], [{'size': ['small', false, 'large', 'huge']}], [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background': []}], [{'font': []}], [{'align': []}], ['clean'], ['image']],
header: (xhr) => {
//关键是这句话
xhr.setRequestHeader('Authorization', window.localStorage.getItem('token'));
xhr.setRequestHeader('Username', window.localStorage.getItem('userid'));
return xhr
},
res: (response) => {
return response.url;//return图片url
},
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',
name: 'file' // 图片上传参数名
}
})
this.editorOption.modules = {
toolbar: [
['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
['blockquote', 'code-block'], //引用,代码块
[{'header': 1}, {'header': 2}], // 标题,键值对的形式;1、2表示字体大小
[{'list': 'ordered'}, {'list': 'bullet'}], //列表
[{'script': 'sub'}, {'script': 'super'}], // 上下标
[{'indent': '-1'}, {'indent': '+1'}], // 缩进
[{'direction': 'rtl'}], // 文本方向
[{'size': ['small', false, 'large', 'huge']}], // 字体大小
[{'header': [1, 2, 3, 4, 5, 6, false]}], //几级标题
[{'color': []}, {'background': []}], // 字体颜色,字体背景颜色
[{'font': []}], //字体
[{'align': []}], //对齐方式
['clean'], //清除字体样式
['image'] //上传图片、上传视频
],
}
this.editorOption.placeholder = "请输入商品描述"
},
methods: {
addCommodity() {
this.dialogFormVisible = true;
}
}
}
</script>
<style scoped>
</style>
views.py
class ImageArticleView(APIView):
@check_role
def post(self, request):
file_data = request.FILES['file'] # 获取上传的文件数据
file_type = '.' + file_data.name.split('.')[-1]
tmp_data = uid()
file_data.name = tmp_data + file_type
file_path = 'http://127.0.0.1:8000' + '/media/image_path/' + file_data.name
image = ImageUpload(
sid=tmp_data,
image=file_data,
account=account(request)
)
image.save()
response_data = {'file_name': file_data.name, 'url': file_path}
print('upload response: ', response_data)
return JsonResponse(response_data)
至此,只要点击图片并上传后,图片会插入到编辑器当中,以URL的方式进行保存。