在Vue项目中使用vue-quill-editor上传文件,可以按照以下步骤进行配置和实现。以下是一个详细的指南,包括安装、初始化、配置上传处理函数以及与后端接口交互的代码示例。 1. 安装并引入vue-quill-editor 首先,你需要通过npm或yarn安装vue-quill-editor及其依赖项: bash npm install vue-quill-editor quill --save # ...
和图片上传相同,不同的是上传文件。解决的思路也相同:在vue-quill-editor中自定义按钮,点击使用iView的文件上传,然后将地址赋值给a标签的href属性,插入到富文本光标处。 步骤 一、自定义编辑器附件上传 我想通过download属性自定义文件下载名称,但是两种方式都失败了,可以忽略相关代码。以下是为富文本自定义插入a链接 ...
1、如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改配置。 创建一个quill-config.js的文件,里面写自定义图片上传。代码如下 /*富文本编辑图片上传配置*/ const uploadConfig = { action: '', // 必填参数 图片上传地址 methods: 'POST', // 必填参数...
创建QuillEditor组件 <template> <quill-editor ref="myTextEditor" v-model="contentValue" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)" class="cfpa-quill-editor" :style="{ height: ...
editorOption: { // some quill options modules: { toolbar: { container: toolbar, // 工具栏 handlers: { 'image':function (value) { if (value) { document.querySelector('#article-uploader').click(); //这里就是点击上传图片按钮会触发的事件,然后,你这里直接触发我们饿了么上传图片的按钮点击 ...
首先我需要定制化导航栏,其次我要定制化图片上传功能: 代码语言:javascript 复制 <template><quill-editor v-model="postContent"ref="myQuillEditor":options="editorOption"@blur="onEditorBlur($event)"@focus="onEditorFocus($event)"@change="onEditorChange($event)"></quill-editor>提交<tab-bar></tab-...
先看看效果,可以支持直接上传文件和裁切图片 工具栏处理 先创建一个组件Editor.vue,引入vue-quill-editor,我们要做的就是重新定义它的操作按钮,也就是使用slot="toolbar"这个插槽,先贴出quill案例的关键代码 <quill-editor v-model="content" :options="editorOption" ...
新建一个文件名为 vue-quill-editor-config.js(文件名可自定义),点击上面的链接复制代码到本文件 绑定配置 引入配置参数 import {editorOptions} from '@/config/vue-quill.editor-config' // '@/config/vue-quill.editor-config' 为你存放自定义配置的文件路径 ...
const quill = this.$refs["myQuillEditor"].quill; console.log(quill.container.querySelector(".ql-editor").innerHTML); this.remarks = quill.container.querySelector(".ql-editor").innerHTML; }, // 内容改变事件 由于项目中图片上传需要在上传又拍云之前调用后台得到验证信息,所以在beforeUpload时加入...
['image', 'video'] //上传图片、上传视频 ], handlers: { 'video':(val)=>{ // 覆盖默认的上传视频 this.onVideo(); }, 'image':(value)=>{ // 覆盖默认的图片上传 // 获取光标所在的位置 var range = this.$refs.myQuillEditor.quill.getSelection(); ...