vue项目 vue-quill-editor富文本编辑器+图片上传
2024-06-23 18:43:11
目录
基础使用：
进阶版：
使用 el-upload 图片上传：
进阶版2.0：
可拖动调整图片大小：
基础使用：
富文本编辑器：
此方法得到的图片为base64编码，图片上传在下面。
npm install vue-quill-editor –save直接使用：
<template><div>富文本编辑器<quill-editor ref="myQuillEditor" v-model="value" :options="editorOption" /><el-button type="primary" size="mini" @click="submit">确认</el-button></div>
</template><script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {components: {quillEditor,},data() {return {value: "", //富文本内容editorOption: {},//配置};},mounted() {},methods: {// 获取编辑数据submit() {console.log(this.$refs["myQuillEditor"].value);},},
};
</script>------------------------------------------------------------------------------------------------------------------------
进阶版：
编辑器 使用 el-upload 图片上传：
效果图：
先npm下载
npm install vue-quill-editor –save页面引入
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";html代码：
<el-uploadv-show="false"id="quill-upload"ref="quill-upload":action="serverUrl":headers="headers"name="file"multiple:limit="3"list-type="picture":show-file-list="false":before-upload="beforeUpload":on-error="uploadError":on-success="handleExceed"><el-button size="small" type="primary"></el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload><el-row v-loading="uillUpdateImg"><quill-editorref="myQuillEditor"@change="onEditorChange($event)"v-model="value":options="editorOption"/></el-row><el-button type="primary" size="mini" @click="submit">确认</el-button>data数据：图片上传的地址 serverUrl需要改动，不需要token的话去掉headers
//因为是组件所以需要挂载components: {quillEditor,},data() {return { headers: "",//请求头uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画serverUrl: "https://api/xxxxxxxx", //上传的图片服务器地址value: "", //富文本内容editorOption: {//符文本编辑器的配置placeholder: "",theme: "snow",modules: {toolbar: {container: [["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"], // 上传图片、上传视频],handlers: {image: function (value) {if (value) {// 给个点击触发Element-ui，input框选择图片文件document.querySelector("#quill-upload input").click();} else {this.quill.format("image", false);}},},},},},},};图片上传需要token
mounted() {let token = localStorage.getItem("user_token");this.headers = {Authorization: token,};},图片上传的事件：
methods: { // 富文本编辑器上传图片onEditorChange({ quill, html, text }) {//富文本编辑器内容发生改变的时候this.value = html;this.$emit("textChange", html); //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改},beforeUpload() {//上传图片之前开启loadingthis.uillUpdateImg = true;},uploadError() {//图片上传失败,关闭loadingthis.uillUpdateImg = false;this.$message.error("图片插入失败");},handleExceed(response, file, fileList) {//图片添加成功let quill = this.$refs.myQuillEditor.quill;console.log(response);if (response.code == 200) {let length = quill.getSelection().index;// 插入图片 response.data.url为服务器返回的图片地址quill.insertEmbed(length, "image", response.data.data);// 调整光标到最后quill.setSelection(length + 1);} else {this.$message.error("图片插入失败");}this.fileList = fileList;this.uillUpdateImg = false;},// 编辑好的数据submit() {console.log(this.$refs["myQuillEditor"].value);},
},此时的图片不可以拖动改变大小
默认的文本编译可以只能设置字体[{size:['small',false,'large','huge']}]，如果要设置12px,16px这样的需要增加设置：修改依赖包中的代码，引入Quill 下面加
import { Quill,quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 自定义字体大小let Size = Quill.import('attributors/style/size')Size.whitelist = ['10px', '12px', '16px', '18px', '20px','22px','24px','26px','28px', '30px', '32px','40px',]Quill.register(Size, true)// 自定义字体类型var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'sans-serif']var Font = Quill.import('formats/font')Font.whitelist = fontsQuill.register(Font, true)然后再建一个css文件引入进去
css内容：
.editor {line-height: normal !important;height: 300px;}.SizeTiShi{font-size: 12px;color: #999999;text-align: right;/* margin-right: 20px; */margin-top: 60px;}.ql-snow .ql-tooltip[data-mode=link]::before {content: "请输入链接地址:";}.ql-snow .ql-tooltip.ql-editing a.ql-action::after {border-right: 0px;content: '保存';padding-right: 0px;}.ql-snow .ql-tooltip[data-mode=video]::before {content: "请输入视频地址:";}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before {content: '14px' !important;font-size: 14px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {content: '10px' !important;font-size: 10px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {content: '12px' !important;font-size: 12px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {content: '16px' !important;font-size: 16px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {content: '18px' !important;font-size: 18px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {content: '20px' !important;font-size: 20px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='22px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='22px']::before {content: '22px' !important;font-size: 22px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {content: '24px' !important;font-size: 24px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='26px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='26px']::before {content: '26px' !important;font-size: 26px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {content: '28px' !important;font-size: 28px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {content: '30px' !important;font-size: 30px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {content: '32px' !important;font-size: 32px;}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='40px']::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='40px']::before {content: '40px' !important;font-size: 40px;}.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;}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {content: "宋体" !important;font-family: "SimSun";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {content: "黑体" !important;font-family: "SimHei";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {content: "微软雅黑" !important;font-family: "Microsoft YaHei";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {content: "楷体" !important;font-family: "KaiTi";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {content: "仿宋" !important;font-family: "FangSong";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {content: "Arial" !important;font-family: "Arial";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {content: "Times New Roman" !important;font-family: "Times New Roman";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {content: "sans-serif" !important;font-family: "sans-serif";}.ql-font-SimSun {font-family: "SimSun";}.ql-font-SimHei {font-family: "SimHei";}.ql-font-Microsoft-YaHei {font-family: "Microsoft YaHei";}.ql-font-KaiTi {font-family: "KaiTi";}.ql-font-FangSong {font-family: "FangSong";}.ql-font-Arial {font-family: "Arial";}.ql-font-Times-New-Roman {font-family: "Times New Roman";}.ql-font-sans-serif {font-family: "sans-serif";}这样就可以了
--------------------------------------------------------------------------------------------------------------------------
进阶版2.0：
可拖动调整图片大小：
安装插件：
npm install quill-image-drop-module -S // 拖拽
npm install quill-image-resize-module -S // 改变大小找到项目中build / webpack.dev.conf.js / plugins配置项，添加代码
new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'
})加完要重启项目哦，在这加
main.js中引入
//富文本编辑器
import VueQuillEditor, { Quill } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import imageResize from 'quill-image-resize-module' // 调整大小组件。
import { ImageDrop } from 'quill-image-drop-module'; // 拖动加载图片组件。
Quill.register('modules/imageResize', imageResize );
Quill.register('modules/imageDrop', ImageDrop);
Vue.use(VueQuillEditor);在页面data的editorOption的modules里面加：
// 调整图片大小
imageResize: {displayStyles: {backgroundColor: "black",border: "none",color: "white",},modules: ["Resize", "DisplaySize", "Toolbar"],
},
完事
写的不好，欢迎指教！
vue项目 vue-quill-editor富文本编辑器+图片上传相关推荐
- 富文本编辑器图片上传失败的BUG解决：IndexError：list index out of range
富文本编辑器图片上传失败的BUG解决 问题原因 我们将通过Django上传的图片保存到了FastDFS中,而保存在FastDFS中的文件名没有后缀名(.png/.jpg/.jif),而ckeditor ...
- layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
- layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
- SSM+KindEditor实现富文本编辑器图片上传
场景 KindEitor官方文档: http://kindeditor.net/demo.php 实现 效果 下载Kindeditor 下载地址: http://kindeditor.net/down ...
- WangEditor富文本编辑器图片上传踩坑之路
最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...
- springboot整合H+,基于summernote的富文本编辑器图片上传
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码. 首先看前台页面: 需要注意的是summernote的默认图片上传是base6 ...
- bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站 欢迎关注 今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了 但是图片上传到 ...
- Layui富文本编辑器图片上传接口(.NET C#)
本来想偷懒找个现成的接口,搜了一下发现没有现成的,那我在这写一个并分享给大家吧. demo打包好了在我的csdn下载中心:http://download.csdn.net/download/xiang ...
- Tinymce富文本编辑器图片上传即编辑配置详解
Tinymce富文本编辑器 本站使用的也是Tinymce富文本编辑器,非常的好用,就是图片上传和编辑配置上有点麻烦,当时没有看完Tinymce官网的资料,导致浪费了点时间,下面就把图片上传的配置分享给 ...
最新文章
- 【计算机网络】计算机网络 OSI 参考模型 与 TCP/IP 参考模型 对比
- I.MX6 Android CAN 命令行测试
- redisson用阿里云集群版redis的问题_redission 序列化问题追踪
- 经典Wide Deep模型介绍及tensorflow 2代码实现
- mysql update 跳过重复_MySQL通过UPDATE / DELETE整合重复的数据记录
- HTML5 布局元素
- MySQL安装教程及配置环境变量（建议收藏）
- text 热敏打印机_ESC/POS热敏打印机示例
- codeblocks 终端设置
- otool是mac自带的工具
- ajax加载图片使用,Lightbox–Ajax加载下图片灯箱的使用
- 51单片机红外遥控继电器电路部分设计
- Mac电脑如何设置屏幕保护程序的颜色？
- 玩转PS路径，轻松画logo！
- （弃更）一些黑科技和技巧
- 使用计算机制作数字文本格式,电脑excel表格如何将文本格式变成数字格式
- 【读书笔记】Jenkins权威指南
- 错误记录----javac错误：javac不是内部或外部命令 也不是可运行的程序
- Hive数据去重、多变一与一变多等实现
- latex 公式 （正式，非正式。编号，不编号）