vue-quill-editor富文本编辑器的使用

已于 2024-05-27 11:18:54 修改
阅读量242 收藏 5
点赞数 2
文章标签： vue.js javascript 前端
于 2024-05-27 11:05:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44165996/article/details/139231013
版权

1、安装

npm install vue-quill-editor

在main.js中进行引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'



Vue.use(VueQuillEditor)

在组件中引入

import { quillEditor } from "vue-quill-editor";
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

设置字体font-family

字体font-family只有三种Sans Serif、Serif、MonoSpace可以选择，满足不了产品的需求，如何修改后展示如下图字体

var fonts = [
    "Microsoft-YaHei",
    "SimSun",
    "SimHei",
    "KaiTi",
    "FangSong",
    "Arial",
    "sans-serif",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; // 将字体加入到白名单
Quill.register(Font, true);

            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: fonts }], //字体
                        [{ align: [] }], //对齐方式
                        ["clean"], //清除字体样式
                        ["image", "video"], //上传图片、上传视频
                    ],
                    imageDrop: true, //图片拖拽，添加这个
                    imageResize: {
                        //放大缩小，添加这个
                        displayStyles: {
                            backgroundColor: "black",
                            border: "none",
                            color: "white",
                        },
                        modules: ["Resize", "DisplaySize", "Toolbar"],
                    },
                },
            },

css样式，设置字体大小，修改标题为中文，添加字体

.ql-editor {
    min-height: 300px;
}
p {
    margin: 10px;
}
.ql-snow .ql-tooltip::before {
    content: "链接地址";
}
.ql-snow .ql-tooltip a.ql-remove::before {
    content: "移除";
}
.ql-snow .ql-tooltip a.ql-action::after {
    content: "编辑";
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: "保存";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px";
}

.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";
}
.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";
}
.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";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本";
}
.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";
}
.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";
}
.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";
}
.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";
}
.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";
}
.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";
}

.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: "宋体";
    font-family: SimSun, sans-serif;
}
.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: "黑体";
    font-family: SimHei, sans-serif;
}
.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: "微软雅黑";
    font-family: Microsoft YaHei, sans-serif;
}
.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: "楷体";
    font-family: KaiTi, sans-serif;
}
.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: "仿宋";
    font-family: FangSong, sans-serif;
}
.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";
    font-family: Arial, sans-serif;
}
.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";
    font-family: Times New Roman, sans-serif;
}
.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";
    font-family: sans-serif;
}

.ql-font-SimSun {
    font-family: SimSun, sans-serif;
}
.ql-font-SimHei {
    font-family: SimHei, sans-serif;
}
.ql-font-Microsoft-YaHei {
    font-family: Microsoft YaHei, sans-serif;
}
.ql-font-KaiTi {
    font-family: KaiTi, sans-serif;
}
.ql-font-FangSong {
    font-family: FangSong, sans-serif;
}
.ql-font-Arial {
    font-family: Arial, sans-serif;
}
.ql-font-Times-New-Roman {
    font-family: Times New Roman, sans-serif;
}
.ql-font-sans-serif {
    font-family: sans-serif;
}

实现图片拖拽改变大小，组件中引入

import { ImageDrop } from "quill-image-drop-module"; // 图片拖动组件引用
import ImageResize from "quill-image-resize-module"; // 图片缩放组件引用
Quill.register("modules/imageDrop", ImageDrop); // 注册
Quill.register("modules/imageResize", ImageResize); // 注册
            editorOption: {
                modules: {
                    toolbar: [],
                    imageDrop: true, //图片拖拽，添加这个
                    imageResize: {
                        //放大缩小，添加这个
                        displayStyles: {
                            backgroundColor: "black",
                            border: "none",
                            color: "white",
                        },
                        modules: ["Resize", "DisplaySize", "Toolbar"],
                    },
                },
            },

vue-quill-editor 富文本编辑文字大小后，v-html样式不生效

需要 ql-editor 这个class名称 不然设置的样式不会生效

<div class="ql-editor" v-html="data"></div>

weixin_44165996
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueQuillEditor富文本编辑器的使用
Caeser110的博客
05-29 1109
前言 以前我对富文本的使用和保存不是很懂，停留在理解为textarea就是富文本的阶段，后来接触到了UEditor，被它华丽的外表所惊艳，按钮多功能丰富，但是使用起来却没那么顺手。 慢慢开始学习前端开发框架，学习使用Vue就开始正视前端的学习其中接触到了vue-quill-editor和Tinymce，学Vue的这两款应该都会接触到但从功能上来讲Tinymce肯定优秀一点，但是我自己觉得vue-quill-editor更适合我的项目一些，我就使用了vue-quill-editor，接下来介绍一下我的使用心.
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js ...vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
富文本编辑器 VUE-QUILL-EDITOR 使用教程
Gefangenes的博客
05-14 1945
vue-quill-editor 默认的是以 base64 保存图片，会直接把图片 base64 和内容文本一起以字符串的形式提交到后端。这样小图片还行，如果要上传大图片会提示上传失败，优秀的前端打字员显然不会这样做。一般的，我们在使用的时候并不需要这么多功能，可以适当的对编辑器配置项进行配置。到这里一个默认的富文本编辑器已经导入使用了，如下图所视！可以根据自己的实际需求，保留相应的工具栏。在指定的 vue 文件中引入。这样就完成了图片上传的功能。这样就导入完成了，如下图所示。
quill-editor：Vue轻量级富文本编辑器-Vue-Quill-Editor
最新发布
2401_85158083的博客
07-12 1332
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
vue使用富文本编辑器vue-quill-editor
热门推荐
m0_73248604的博客
08-31 1万+
（1），安装插件（2），在文件中导入包（3），在原本的配置项上添加（与toolbar平级进行配置）// 调整图片大小},//在quill中使用toolbar: {// 方法中使用},// 样式/* 自定义toobar样式设计 *//* 工作汇报弹窗 */
Vue富文本编辑器(vue-quill-editor)
来了波，兄嘚
12-20 2199
想看官方文档请点我---->官方文档 使用步骤 1.npm进行安装 npm install vue-quill-editor 安装依赖项： npm install quill 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' // require styles 引入样式 import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import
vue富文本编辑器
weixin_34408624的博客
12-17 907
Vue-Quill-Editor 主流富文本编辑器对比 前言：vue中很多项目都需要用到富文本编辑器，在使用了ueditor和tinymce后，发现并不理想。所以果断使用vue-quill-editor来实现。 wangEditor（国产，基于javascript和css开发的web富文本编辑器，开源免费）优势：轻量简介，最重要的是开源且中文文档齐全。缺点：更新不及时。没有强...
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
详解Vue基于vue-quill-editor富文本编辑器使用心得
10-17
vue-quill-editor是Quill编辑器的Vue封装版本，Quill是一款现代的、功能强大的、面向未来的富文本编辑器，支持跨浏览器操作。下面详细介绍vue-quill-editor在Vue项目中的集成与使用心得。 首先，要使用vue-quill-...
使用vue-quill-editor实现富文本编辑器（封装带移入提示）
shuai_bao_10的博客
04-22 2471
使用vue-quill-editor实现富文本编辑器（封装带移入提示） 看了很多关于vue项目的富文本编译器，终于找到一个最适合项目的了 vue-quill-editor的完整使用方法及封装，分享给大家！ 使用方法： 1、npm 安装 vue-quill-editor npm i vue-quill-editor 2、在main.js中全局注册引入（也可以在页面中按需引入） import VueQuillEditor from 'vue-quill-editor' // requi...
vue 富文本编辑器
W8034的博客
08-21 803
添加、编辑回显
vue-quill-editor富文本
刘刘刘的博客
09-15 119
3、在vue.config.js配置文件中。1、安装 quill-editor。
vue中使用富文本编辑器
qq_35219361的博客
08-24 1069
前端使用富文本编辑器的插件有很多，今天献上wangeditor的使用教程，教你如何在vue中使用富文本编辑器 先敬上官网：http://www.wangeditor.com/index.html wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！ 第一步：先保证你的电脑中安装有node，当然使用cdn也可以，下载到本地也行，我这里用的vue-cli，顺便下载到项目依赖中了 本地下载： https://github.com/
vue适用的富文本编辑器
王湘佰的博客
09-08 1041
最近在做vue项目的模板的封装，其中用到富文本编辑器，这里小结一下 wangEditor—— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。可用于vue，react，angular wangEditor使用地址 TextBus ——在普通网页中使用非常方便，vue中没搞出来，有想使用的同学自己琢磨吧 TextBus使用地址 Vue-Quill-Editor——安装导入直接使用，比较方便， Vue-Quill-Editor使用地址 d2-admin也有封装好的文本
vue中使用富文本编辑器(vue2、vue3皆可)
work_fei的专栏
09-28 456
vue中快捷使用富文本
vue-quill-editor富文本编辑器使用步骤
10-18
好的，关于vue-quill-editor富文本编辑器的使用步骤，可以按照以下步骤进行： 1. 安装vue-quill-editor ``` npm install vue-quill-editor --save ``` 2. 在需要使用的组件中引入vue-quill-editor ``` import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值