vue-editor设置字体font-family

news2024/11/15 0:00:23

背景:Vue项目中需要用到富文本编辑器,所以选择了vue-editor这个富文本编辑器,发现字体font-family只有三种Sans Serif、Serif、MonoSpace可以选择,满足不了产品的需求,所以用想要定义成常用字体,主要是需要更改配置文件,以及对应的CSS文件,修改如下:
1.改变 toolbar的配置项,如图是我自定义的字体样式,默认选中的微软雅黑。
在这里插入图片描述
具体操作代码如下:

import {VueEditor} from 'vue2-editor'
import Quill from 'quill' 
var fonts = ['Microsoft-YaHei','SimSun', 'SimHei','KaiTi','Arial','Times-New-Roman'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
  data() {
    return {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike',
          {color: []},
          {background: []},
          {align: []},
          {list: 'ordered'},
          {list: 'bullet'},
          {indent: '-1'},
          {indent: '+1'}
        ],
        [{ 'font': fonts }, {header: [1, 2, 3, 4, 5, 6, false]}],
        [{script: 'sub'}, {script: 'super'}],
        ['image', 'video', 'link', 'blockquote', 'code-block'],
        [{direction: 'rtl'}],
      ]
    }
  },

修改样式的方法有两种 一种是:
1.在 node_modules包 中找到 quill ,再找到它下面的dist文件夹。
2.找到quill.core.css,修改如下:

.ql-editor .ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}
.ql-editor .ql-font-SimSun {
  font-family: "SimSun";
}
.ql-editor .ql-font-SimHei {
  font-family: "SimHei";
}
.ql-editor .ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-editor .ql-font-Arial {
  font-family: "Arial";
}
.ql-editor .Times-New-Roman {
  font-family: "Times New Roman";
}

3.找到quill.snow.css,修改如下:

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '微软雅黑';
}
.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: "微软雅黑";
}
.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: "宋体";
}
.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: "黑体";
}
.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: "楷体";
}
.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";
}
.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";
}

方法二:新建一个css文件覆盖样式,然后在main.js中引入样式文件:

.ql-editor {
  .ql-container.ql-snow {
    height: 100px;
  }
  .ql-toolbar.ql-snow .ql-formats {
    margin: 0;
  }
  .ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei" !important;
  }
  .ql-font-SimSun {
    font-family: "SimSun" !important;
  }
  .ql-font-SimHei {
    font-family: "SimHei" !important;
  }
  .ql-font-KaiTi {
    font-family: "KaiTi" !important;
  }
  .ql-font-Arial {
    font-family: "Arial" !important;
  }
  .Times-New-Roman {
    font-family: "Times New Roman" !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: '微软雅黑';
}
.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: "微软雅黑";
}
.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: "宋体";
}
.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: "黑体";
}
.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: "楷体";
}
.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";
}
.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";
}

在main.js中引入:

import '@style/quillEditor.scss'
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1813231.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AGI时代的奠基石:Agent+算力+大模型是构建AI未来的三驾马车吗

★AI Agent;人工智能体,RPA;大语言模型;prompt;Copilot;AGI;ChatGPT;LLM;AIGC;CoT;Cortex;Genius;MetaGPT;大模…

借助ChatGPT撰写学术论文,如何设定有效的角色提示词指

大家好,感谢关注。这个给大家提供关于论文写作方面专业的讲解,以及借助ChatGPT等AI工具如何有效辅助的攻略技巧。有兴趣的朋友可以添加我(yida985)交流学术写作或ChatGPT等AI领域相关问题,多多交流,相互成就…

段页式管理

缝合怪!!! 分页、分段的对比 分段分页段页式管理 先将进程按逻辑模块分段,再将各段分页 段页式管理的逻辑地址结构 段号页号页内偏移量 段号的位数:决定了每个进程最多可以分为几个段。 页号的位数:决定…

马斯克怒了,禁止员工使用苹果设备,抨击库克出卖数据给OpenA

昨晚,苹果发布会正式宣布了一系列重磅AI升级,甚至创造了一个新的概念——苹果智能(Apple Intelligence)。 这次升级在操作系统的交互层面上进行了智能化改进,使得更多自然语音和语言理解的控制成为可能,将…

常见数据编码方式

数据编码方式: 二进制数字信息在传输过程中可以采用不同的代码,各种代码的抗噪声特征和定时功能各不相同,实现费用也不一样。下面介绍几种常用的编码方式。 1、单极性码 在这种编码方案中,只用正的(或负的)…

服务器如何远程桌面连接不上,服务器远程桌面连接不上解决办法

服务器远程桌面连接不上,是IT运维中常见的挑战之一。针对这一问题,专业的解决方法通常涉及以下几个方面的排查与操作: 首先,我们需要检查网络连接是否正常。远程桌面连接依赖于稳定的网络连接,因此,确认服务…

第十九节:暴力递归到动态规划

一 动画规划的概念 优化出现重复解的递归 一旦写出递归来,改动态规划就很快 尝试策略和状态转移方程是一码事 学会尝试是攻克动态规划最本质的能力 如果你发现你有重复调用的过程,动态规划在算过一次之后把答案记下来,下回在越到重复调用过程…

Java四舍五入保留小数

这里介绍两种方法: package Book.jj.hh;import java.text.DecimalFormat; //使用DecimalFormat类 public class Demo1 {public static void main(String[] args) {double num 123.52631;DecimalFormat a new DecimalFormat("#.00"); //小数点后有几个0…

UE4 RPC进行网络同步

说明 基于UE本身提供的RPC同步机制 RPC远程过程调用允许客户端或服务器通过网络连接相互发送消息: 使用时需要注意: 1、必须从 Actor 上调用 2、Actor 必须被复制,注意勾选BP中Replicates,或使变量bReplicates true 3、注意如…

揭秘独孤信印章:多面性与历史地位的双重传奇

2024高考已经结束,小编回顾前几年高考试卷时发现在2019年全国高考II卷中,一枚古老的印章被做成了一道数学题。这枚印章不仅因其独特的多面体设计而引人注目,更因为其背后所代表的历史人物——独孤信,而成为了热门的话题。那么&…

pip切换至国内镜像超简单方法

新配置的python环境,pip安装包超时 这里给出最简单配置国内镜像的方法 这里将服务器地址切换为国内清华镜像,具体执行的命令如下: pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple 执行完,看到上面提…

【C++ 类和对象】初始化列表

文章目录 1. 构造函数体赋值2. 初始化列表🔍 1. 构造函数体赋值 🍎① 在创建对象时,编译器通过调用构造函数,给对象中各个成员变量一个合适的初始值。 class Date { public:// 构造函数 Date(int year, int month, int day) {_y…

面试题:如何避免索引失效?

(1) 范围条件查询 (2) 不要在索引上使用函数运算, 否则索引也会失效. 比如在索引上使用切割函数, 就会使索引失效. (3) 字符串不加引号, 造成索引失效. (4) 尽量使用索引覆盖, 避免 select *, 这样能提高查询效率. 如果索引列完全包含查询列, 那么查询的时候把要查的列写出来…

一文教你如何实现并发请求的失败自动重试及重试次数限制

需求 在并发接口请求的时候,能够自动对失败的请求进行重发尝试(超过指定重试次数则不再重试),并将最终的结果返回(包含每个请求是否成功、返回结果) 核心思路 代码实现 使用案例 为了演示我们代码的最终实现效果&a…

期权交易单位是什么?期权懂新手必看!

今天带你了解期权交易单位是什么?很多对期权还不太熟悉的朋友,不知道期权的单位是什么,下面小编就来告诉你期权的交易单位到底是什么? 期权交易单位是什么? 50ETF期权的交易单位,用大白话来说,…

从盛世到衰落,历史上八大强国的兴衰与现代地位!

人类文明史悠久,从远古时代至今日,世界舞台上曾经涌现出许多强盛的帝国。它们在自己的黄金时代,曾经无人能敌,不论是在军事、经济还是文化上都独领风骚。然而,无论多么强大的国家也难逃“兴盛必衰”的命运。今天&#…

【文档+源码+调试讲解】精准扶贫管理系统

摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了精准扶贫管理系统的开发全过程。通过分析精准扶贫管理系统管理的不足,创建了一个计算机管理精准扶贫管理系统的方案。文章介绍了精准扶贫管理系统的系…

【Week-R3】天气预测,引入探索式数据分析方法(EDA)

文章目录 1. 导入模块2. 导入数据3.探索式数据分析方法(EDA)3.1 数据相关性探索3.2 是否会下雨3.3 地理位置与下雨的关系3.4 湿度和压力对下雨的影响3.5 气温对下雨的影响 4.数据预处理4.1 处理缺损值4.2 构建数据集 5 预测是否会下雨5.1 构建神经网络5.…

JAVAEE值之网络原理(1)_传输控制协议(UDP)、概念、特点、结构、代码实例

前言 在前两节中我们介绍了UDP数据报套接字编程,但是并没有对UDP进行详细介绍,本节中我们将会详细介绍传输层中的UDP协议。 一、什么是UDP? UDP工作在传输层,用于程序之间传输数据的。数据一般包含:文件类型&#xff0…

您对薪资待遇是否满意?没证据怎么办?这样做很可能会补上来!

您对薪资待遇是否满意?没证据怎么办? 这样做很可能会补上来! 您有时可能对自己的工资或福利待遇感到不满意:感到为何我付出的不比别人少,但是工资待遇总是比别人低,是不是觉得很不服气?那么不服…