vue-quill-editor如何设置字体大小

目录
  • vue-quill-editor设置字体大小
  • vue-quill-editor 样式问题

vue-quill-editor设置字体大小

项目中需要用到富文本编辑器，用的Vue，所以选择了vue-quill-editor这个富文本编辑器，发现字体只有几种大小可以选择，满足不了产品的需求，研究了半天终于改好了。主要是需要更改配置文件，以及对应的CSS和js文件。

editor.vue 页面下改变 toolbarOptions的配置项

（editor.vue就是封装的富文本编辑器）

const toolbarOptions = [
//  原本是 'small',fasle,'large','huge'，改成自己想要设置的大小，这会改变页面下拉框的个数以及每个选项的data-value值，插件的js会根据data-value的值去增加对应的class类名。 
[{'size': ['10px', '12px', '14px', '16px' ,'18px', '20px', '22px', '24px', '26px', '32px', '48px']}], 
]

再到node_modules下面找到 quill, 对目录dist 下面的 css文件和 js文件进行修改。

quill.core.js 下面

// small,large,huge 这三个是默认的，可以删可以留。后面必须增加和editor配置项一样。
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']

quill.js 下面

// 跟quill.core.js 同理，修改下面两项,huge及之前都是默认的
whitelist: ['small', 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px']
var SIZES = ['small', false, 'large', 'huge','8px','10px','12px','14px','16px','18px','20px','22px','24px','26px','32px','48px'];

quill.bubble.css 下面

// 需要全部增加一下css选项，需要注意的是data-value=如果是接数字要有引号，字符串可以不带引号
//10px,12px等等新设置的大小都要设置相应的类名字体大小
.ql-editor .ql-size-8px {
    font-size: 8px;
}
// select选择的字体大小
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    font-size: 8px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    content: '8px';    
}

quill.core.css 下面

// 需要全部增加一下css选项
.ql-editor .ql-size-10px {
    font-size: 10px;
}

quill.snow.css 下面

// 需要全部增加一下css选项
.ql-editor .ql-size-8px {
    font-size: 8px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    content: '8px';
}
// select选择的字体大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before {
    font-size: 8px;
}

tips：

如果后台管理系统编辑富文本，前台页面展示出来(没引用vue-quill-editor)，前台页面别忘了引用改动后的css文件哦！

vue-quill-editor 样式问题

引入snow.css，在需要展示的页面中用如下元素包裹即可

<div class="ql-container ql-snow">
    <div class="ql-editor" v-html="content">
    </div>
</div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传 分析原因 项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差. 引入element-ui 编辑editor.vue文件 <template> <div> <

  • vue-quill-editor的使用及个性化定制操作

    最近在用vue + element ui写一个小应用要用到富文本编辑器,以前做项目都一直都用ueditor,但是看了一下它与vue的兼容性并不好,又对比了几个后,选择了vue-quill-editor. vue-quill-editor基于Quill.适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用,正是我想要的☻.这里只介绍基本的安装和部分简单的定制.我翻了很多别人写的东西对我的项目都无效,最后自己折腾出来在这记录备忘. 一.安装 1.安装模块 npm install vue-quil

  • vue-quill-editor 自定义工具栏和自定义图片上传路径操作

    背景: 1.某些场景下vue-quill-editor默认的工具栏部分功能不希望出现,需要删除部分功能. 2.vue-quill-editor默认提供的图片上传方案是将图片转成base64存放到内容区,这会导致content字符长度太长,不一定可以传到后台保存(其实即使可以保存也不推荐这种方案).所以我们需要将方案修改为将图片上传到服务器,然后通过URL的 方式访问到图片回显及使用. vue-quill-editor工具栏改造及自定义图片上传(这里使用的是element-ui的上传组件): 引入

  • 详解Vue基于vue-quill-editor富文本编辑器使用心得

    vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQui

  • vue-quill-editor如何设置字体大小

    目录 vue-quill-editor设置字体大小 vue-quill-editor 样式问题 vue-quill-editor设置字体大小 项目中需要用到富文本编辑器,用的Vue,所以选择了vue-quill-editor这个富文本编辑器,发现字体只有几种大小可以选择,满足不了产品的需求,研究了半天终于改好了.主要是需要更改配置文件,以及对应的CSS和js文件. editor.vue 页面下改变 toolbarOptions的配置项 (editor.vue就是封装的富文本编辑器) const

  • Android TextView 设置字体大小的方法

    废话不多说了,直接给大家贴代码了,具体代码如下所示: package com.example.yanlei.yl4; import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.text.Spannable; import android.text.style.AbsoluteSizeSpan; import and

  • 浅扒Android动态设置字体大小的示例

    说点废话 Android开发中,TextView类的控件应该说是很常用了.一般来说我们是通过android:textSize="20sp" 来设置字体大小,但是很多时候也需要动态设置字体大小,调用也很简单: textView.setTextSize(textSize); 为了适配各种各样的型号,我们一般会将字体大小定义到dimens.xml之中: <dimen name="text_size">16sp</dimen> 然后在java代码中设

  • Android Dialog 设置字体大小的具体方法

    Android Dialog 设置字体大小的具体方法

    先看下面图片: 这是我在做登录页面的时候,调用系统的ProgressDialog 进行等待,可是看起来很不协调,左边的等待图片过大,右边文字过小,看起来老别扭,虽然功能上不存在什么问题,但是我有强迫症,看不顺的就像弄掉.可是找了好久,没发现 ProgressDialog  有一个方法是可以设置字体的. 于是我又来CSDN查找解决方案,可是找了好久,翻了好几页都没看到想要的结果,心冷了,找到的都说ProgressDialog 可以自定义一个View,在layout定义一个布局,然后设置到Progr

  • vue quill editor 使用富文本添加上传音频功能

    1. 前言 vue-quill-editor 是vue项目中常用的富文本插件,其功能能满足大部分的项目需求.但是,最近项目中,需要在富文本中上传音频文件,但是vue-quill-editor这个富文本仅支持图片,视频上传:所以这个功能需要自定义. 怎么实现这个功能? 写一个只能上传音频的组件,并且隐藏 在富文本插件的toolbar定义一个按钮,点击时调用上传组件 监听上传成功的回调函数,在富文本输入框中插入音频标签 2. 功能实现 2.1 基于Element-ui实现上传组件,并且隐藏(不能让用

  • pycharm 使用心得（二）设置字体大小

    pycharm 使用心得（二）设置字体大小

    步骤: Settings-->Editor-->Colors & Fonts-->Font 然后在size那里调整.

  • EditPlus 3设置字体大小(附图)

    EditPlus 3设置字体大小(附图)

    tools ---> preferences ---> fonts

  • vue项目设置活性字体过程(自适应字体大小)

    vue项目设置活性字体过程(自适应字体大小)

    目录 vue项目设置活性字体 起因 我们来看看详细步骤吧 效果 vue项目引入特殊字体 特殊字体指的是默认电脑中没有的 vue项目设置活性字体 起因 最近,博主在按照ui设计稿参数编写页面之后,发现页面整体偏大,尤其是字体现实的特别大,但是在按UI设计的页面尺寸展示的时候却十分舒服,这是怎么回事,在和另一位前端交流之后,得知可以动态设置字体大小,即不同页面有不同的大小的字体十分灵活. 首先,我们要清楚字体设置比较常用的三个单位px,rem,em px是一个大小单位,相当于1像素,这要写死就是固定

  • Android编程中TextView字体属性设置方法(大小、字体、下划线、背景色)

    本文实例讲述了Android编程中TextView字体属性设置方法(大小.字体.下划线.背景色).分享给大家供大家参考,具体如下: import android.content.Context; import android.graphics.Color; import android.text.SpannableString; import android.text.Spanned; import android.text.style.AbsoluteSizeSpan; import andr

  • Pycharm使用之设置代码字体大小和颜色主题的教程

    1. File->Setting  打开如下所示的对话框,可以在Editor->General->Font下设置字体大小(Size).行距(Line spacing) 2. Editor->Color Scheme  展开如下所示内容,可以选择自己喜欢的主题样式,设置颜色等属性. 以上这篇Pycharm使用之设置代码字体大小和颜色主题的教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐