vue set设置html根字体,vue-quill-editor安装及使用:自定义工具栏和自定义中文字体,把字体写在html的style中...
一、自定义工具栏把toolbar在vue的data return里配置就可以;
二、用vue-quill-editor写出来的邮件,发出去之后字体样式变了,那是应该vue-quill-editor改变字体的font-family没绑定在style上,而是通过class来改变的,这个class只有vue-quill-editor插件才有,接收邮件端是没有的,故没办法把想要的字体显示出来,只有把font-family绑定到style才有效。
效果图:如下:
以下是方法步骤:
1、vue项目安装vue-quill-editor:
npm install vue-quill-editor --save
2、vue项目的main.js方法中引入vue-quill-editor:
import VueQuillEditor from 'vue-quill-editor' //vue-quill-editor其它文件可在应用页面直接引入Vue.use(VueQuillEditor)
3、应用页面引入并生成富文本域:
{{ msg }}
v-model="content":options="editorOption"@change="onEditorChange($event)"
>
//引入相关文件
import { quillEditor,Quill } from"vue-quill-editor";
import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'
//设置字体大小
let fontSizeStyle=Quill.import('attributors/style/size') //引入这个后会把样式写在style上
fontSizeStyle.whitelist=['45px','60px','90px']
Quill.register(fontSizeStyle,true)//设置字体样式
let Font = Quill.import('attributors/style/font') //引入这个后会把样式写在style上
let fonts = [false, 'SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']
Font.whitelist= fonts //将字体加入到白名单
Quill.register(Font, true)
exportdefault{
name:'HelloWorld',
data () {return{
msg:'vue-quill-editor demo',
content:'',
editorOption: {//配置工具栏
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
['blockquote', 'code-block'], //引用,代码块
[{ 'header': 1 }, { 'header': 2 }], //几级标题
[{ 'list': 'ordered'}, { 'list': 'bullet' }], //有序列表,无序列表
[{ 'script': 'sub'}, { 'script': 'super' }], //下角标,上角标
[{ 'indent': '-1'}, { 'indent': '+1' }], //缩进
[{ 'direction': 'rtl' }], //文字输入方向
[{ 'size': ['45px','60px','90px'] }], //字体大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],//标题
[{ 'color': [] }, { 'background': [] }], //颜色选择
[{ 'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial'] }],//字体
[{ 'align': [] }], //居中
['clean'] //清除样式
]
}//背景颜色 - background
//加粗- bold
//颜色 - color
//字体 - font
//内联代码 - code
//斜体 - italic
//链接 - link
//大小 - size
//删除线 - strike
//上标/下标 - script
//下划线 - underline
//引用- blockquote
//标题 - header
//缩进 - indent
//列表 - list
//文本对齐 - align
//文本方向 - direction
//代码块 - code-block
//公式 - formula
//图片 - image
//视频 - video
//清除字体样式- clean
}
}
},
created() {
},
mounted() {
},
methods: {
onEditorChange() {
}
}
}
min-height: 300px;
}
/*这里一定要写上,是用来把相关改变的配置在工具栏正常显示
如果不写,字体样式的下拉会重复显示Sans Serif,字体大小的下拉会重复显示Normal
*/
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
content:"宋体";
font-family: "SimSun"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content:"黑体";
font-family: "SimHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content:"微软雅黑";
font-family: "Microsoft YaHei";
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content:"楷体";
font-family: "KaiTi"!important;
}
.quill-editor >>> .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.quill-editor >>> .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content:"仿宋";
font-family: "FangSong";
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='45px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
content:'45px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='60px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='60px']::before {
content:'60px';
}
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='90px']::before,
.quill-editor >>> .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='90px']::before {
content:'90px';
}
vue set设置html根字体,vue-quill-editor安装及使用:自定义工具栏和自定义中文字体,把字体写在html的style中...相关推荐
- Vue进阶(幺柒零):前端用户体验提升(四)应用 rem/em 实现字体自适应
文章目录 一.前言 二.em 继承的例子 三.实际应用 3.1 使用 em 单位 3.2 通常不使用 em 单位控制字体大小 四.使用 rem 单位 五.小贴士 5.1 始终使用 rem 单位做媒体查 ...
- vue怎么设置封面_vue设置视频封面教程 vue如何修改标题
现在使用vue的伙伴很多,可以说是视频编辑美化软件排前几的软件,能够使用的功能非常多,有用户就想知道如何才能进行标题的修改,视频的封面又是怎么设置的,想知道的伙伴,可以在iefans看看详细的操作方法 ...
- vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
- vue 响应式ui_如何在Vue.js中设置响应式UI搜索
vue 响应式ui Are you thinking of building something awesome with one of the popular modern frameworks o ...
- [vue] 怎么解决vue动态设置img的src不生效的问题
[vue] 怎么解决vue动态设置img的src不生效的问题 不是应该 require('@/assets/images/xxx.png') 这样吗??你这样多浪费资源啊 @chenqim 个人简介 ...
- vue 代理设置 访问图片_详解Vue源码之数据的代理访问
概念解析: 1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写) 2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作 3 ...
- Vue路由设置嵌套(一级二级三级展示并且显示定向选中)
router.js import Vue from 'vue' import Router from 'vue-router' // 引入页面一级 import Home from './views/ ...
- 【vue开发问题-解决方法】(一)在style中设置background-image时路径问题
[vue开发问题-解决方法](一)在style中设置background-image时路径问题 参考文章: (1)[vue开发问题-解决方法](一)在style中设置background-image时 ...
- Vue动态设置Style属性
Vue动态设置Style属性_fuzhongbin的博客-CSDN博客_vue 动态style :style="{ color:domain.groups == 1? '#ccc': dom ...
最新文章
- » 欄位太小以致於無法接受您試圖加入的資料數量
- 【企业管理】2020年3-4 月 每日花语
- PLSQL_基础系列11_递归和层次查询CONNECT BY(案例)
- keil5安装_keil5,软件安装包及安装教程
- 区块链企业级解决方案 ( Hyperledger )
- Java工作笔记-使用Maven创建多模块项目
- Python“文件操作”Excel篇(上)
- ribbon 配置 动态更新_Netflix开源工具:在SpringBoot实现动态路由
- Java排序之归并排序
- python和selenium的关系_selenium之python源码解读-webdriver继承关系
- Arturia DX7 V for Mac(模拟FM数字合成器)
- 如果北京的房价下跌,到底能跌多少?
- PySpark fold foldByKey用法
- android11 rom,第一个Android 11的第三方ROM来了,适用于红米K20 Pro
- 计算机设计教育,计算机设计艺术教育教学论文
- 天道酬勤系列之Redis 事务的介绍与实例使用
- p40pro升级鸿蒙后续航怎么样,华为p40续航怎么样
- Nmap 基本使用方法
- 6个iPhone电池保养小技巧,错过就亏大啦!
- Informix IDS 11零碎治理(918检讨)认证指南,第 5 部门: 数据库效劳器使用(3)
热门文章
- 《Pthyon数学编程》练习-day004:复数
- java-php-python-ssm在校大学生健康状况信息管理系统计算机毕业设计
- 面向社交媒体的多模态属性级情感分析研究
- 实施SAP系统需要注意的三要素
- Microbiome:微生物群落在深海热液硫化烟囱体由活跃转换为非活跃状态过程中的演替模式...
- Mysql语法系列—show full processlist介绍
- Flink 滚动窗口、滑动窗口详解
- 这是要起飞!打破度盘下载限制,无需登录非会员也能跑到110Mb/s
- springboot动漫手办周边商城销售网站java
- 没想到新垣结衣结婚,对张一鸣打击这么大!