vue+element-ui实现富文本(含有图片粘贴拖拽上传)

Just For Share | 仅仅分享

首先需要安装

cnpm i vue-quill-editor -D 富文本编辑器
cnpm install quill-image-resize-module --save 照片缩小放大
cnpm install --save quill-image-drop-module 照片拖拽
cnpm install --save quill-image-paste-module 照片拖拽

特别注意会出现以下错误

安装好上述之后会出现下面错误

Cannot read property ‘imports’ of undefined"

解决

找到webpack.base.conf.js，然后添加下面代码
const webpack = require('webpack')plugins: [
new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'
})
]

整体代码

包含以下的功能点

中文展示

.editor {line-height: normal !important;height: 500px !important;}.ql-snow .ql-tooltip[data-mode=link]::before {content: "请输入链接地址:" !important;
}.ql-snow .ql-tooltip  .ql-editing a.ql-action::after {border-right: 0px !important;content: '保存' !important;padding-right: 0px !important;
}.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: '14px' !important;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {content: '10px' !important;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {content: '18px' !important;
}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {content: '32px' !important;
}.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {content: '文本' !important;
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {content: '标题1' !important;
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {content: '标题2' !important;
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {content: '标题3' !important;
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {content: '标题4' !important;
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {content: '标题5' !important;
}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {content: '标题6' !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {content: '标准字体' !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {content: '衬线字体' !important;
}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {content: '等宽字体' !important;
}

支持拖拽图片上传

image: function image() {
var self = this;
var fileInput = this.container.querySelector('input.ql-image[type=file]');
if (fileInput === null) {fileInput = document.createElement('input');fileInput.setAttribute('type', 'file');// 设置图片参数名if (uploadConfig.filename) {fileInput.setAttribute('name', uploadConfig.filename);}// 可设置上传图片的格式fileInput.setAttribute('accept', uploadConfig.accept);fileInput.classList.add('ql-image');let name = ''// 监听选择文件fileInput.addEventListener('change', function () {// 创建formDatavar formData = new FormData();name = fileInput.files[0].nameformData.append("filename", name);formData.append("file", fileInput.files[0]);formData.append("path", "advice");// 图片上传var xhr = new XMLHttpRequest();xhr.open(uploadConfig.methods, uploadConfig.action, true);// 上传数据成功，会触发xhr.onload = function (e) {if (xhr.status === 200) {var res = JSON.parse(xhr.responseText);let length = self.quill.getSelection(true).index;//这里很重要，你图片上传成功后，img的src需要在这里添加，res.path就是你服务器返回的图片链接。let path = '/api/oa/loadFile?path=advice&filename=' + nameself.quill.insertEmbed(length, 'image', path);self.quill.setSelection(length + 1)}fileInput.value = ''};// 开始上传数据xhr.upload.onloadstart = function (e) {fileInput.value = ''};// 当发生网络异常的时候会触发，如果上传数据的过程还未结束xhr.upload.onerror = function (e) {};// 上传数据完成（成功或者失败）时会触发xhr.upload.onloadend = function (e) {// console.log('上传结束')};xhr.send(formData)});this.container.appendChild(fileInput);
}
fileInput.click();

}

支持粘贴图片上传

  ImageExtend: {
loading: true,
name: 'file',
action: '/api/oa/uploadFile',
change: (xhr, FormData) => {var uuid = "cms"+this.guid();FormData.append('path', "advice")FormData.append('filename', uuid)this.fileName = uuid
},
response: (res) => {console.log(res, 'response')return "/api/oa/loadFile?path=advice&filename="+this.fileName
}
}

支持方法和缩小

github地址是:https://github.com/lmx110522/vue-quill-editor.git

vue+element-ui实现富文本(含有图片粘贴拖拽上传)相关推荐

Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...
dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库....
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
vue+flask实现视频合成(拖拽上传)
vue+flask实现视频合成效果如下欢迎访问博客代码哈士奇技术聊天交流群 974178910 前端交流群 535620886 vue+flask实现视频合成拖拽上传我们之前一个文章有写过 ...
js 监听复制图片拖拽上传文件并填充到markdown编辑器
文章目录效果获取粘贴的文件获取拖拽的文件发送请求生成markdown 语句实现逻辑代码(主要实现) 后端代码效果获取粘贴的文件 const { clipboardData } = e; ...
dropzone.js php,Laravel 5.1 中基于 Dropzone.js 实现图片拖拽上传及删除功能
注:本教程代码适用于Laravel 5.1版本. 1.概述 Dropzone 是目前最好的免费文件拖拽上传库,它拥有很多特性和选项以便你可以使用多种方式来自定义. 在Laravel项目集成Dropzo ...
类似新浪微博和google图片的HTML5实现图片拖拽上传功能
2019独角兽企业重金招聘Python工程师标准>>> 来源: http://www.lovesunlife.com/?p=315 这篇文章对google图片为蓝本就拖拽上传功能分析 ...
vue对文件夹进行拖拽上传完整流程（文件夹中超出100个文件）
前言上个文章介绍了多图片压缩,多图片可以通过直接多选图片进行拖拽,也可以通过直接拖拽文件夹进行解析得到多图片,接下来直接上代码先展示文件拖拽后对文件的解析效果图片文件夹图片文件夹解析大文件夹 ...
element ui html编辑器,Vue + Element UI使用富文本编辑器
第一步下载组件 npm install vue-quill-editor 第二步在需要使用的组件内引入· 富文本组件 import { quillEditor } from 'vue-quill-ed ...

vue+element-ui实现富文本(含有图片粘贴拖拽上传)

vue+element-ui实现富文本(含有图片粘贴拖拽上传)

首先需要安装

特别注意会出现以下错误

安装好上述之后会出现下面错误

解决

整体代码

包含以下的功能点

中文展示

支持拖拽图片上传

支持粘贴图片上传

支持方法和缩小

github地址是:https://github.com/lmx110522/vue-quill-editor.git

vue+element-ui实现富文本(含有图片粘贴拖拽上传)相关推荐

最新文章

热门文章