追加追加。。
本来一切都按计划进行，不曾想过了一个周末，在打开项目，突然变了样子。自定义的字号突然失效了。。
再多写几句
后来我又用了wangeditor这个插件，3.0版本他的字号不能自定义。但是我看到说2.0版本可以自定义，我试了试是可以自定义了
但是标签用的是<font></font>，html5中已经废弃。想了想还是放弃吧。
如图所示：
1.png
安装
npm install quill
npm install vue-quill-editor
main.js引入
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)
demo例子
注意
基础之上做了按钮悬浮提示、设置字体大小、设置字体类型。
我只是按照自己的场景做了增加和减少。大家可自行设置按钮多少。
<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
></quill-editor>
<br>
<br>
<br>
<br>
<div @click="saveHtml">保存</div>
<div v-html='content'></div>
</div>
</template>
<script>
// 配置字体大小
import * as Quill from "quill";
let fontSizeStyle = Quill.import("attributors/style/size");
fontSizeStyle.whitelist = ["10px","12px","14px","16px","20px","24px","36px",]; //false表示默认值
Quill.register(fontSizeStyle, true);
// 配置字体类型
var fonts = ['Microsoft-YaHei','SimSun', 'SimHei','KaiTi','Arial'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
export default {
name: "App",
data() {
return {
content: `<p>助力构建人类命运共同体，打造全球空中信息走廊，将中国梦与世界梦相融相通，实现人类共同发展的美好愿景。</p>`,
editorOption: {
theme: "snow",
modules: {
toolbar: [
[{ font: fonts }], //字体
// [{ font: [] }], //字体
[{ size: fontSizeStyle.whitelist }], // 字体大小
[{ color: [] }], // 字体颜色，字体背景颜色
["clean"], //清除字体样式
["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
["blockquote"], //引用，code-block代码块
[{ list: "bullet" }, { list: "ordered" }], //列表
[{ align: [] }], //对齐方式
["image"], //上传图片、video上传视频
['link']
// [{ 'header': 1 }, { 'header': 2 }], // 标题，键值对的形式；1、2表示字体大小
// [{ 'script': 'sub'}, { 'script': 'super' }], // 上下标
// [{ 'indent': '-1'}, { 'indent': '+1' }], // 缩进
// [{ direction: "rtl" }], // 文本方向
// [{header: fontSizeStyle.whitelist}],//标题大小，控制一行
],
},
},
};
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},
methods: {
onEditorReady(editor) {
// 准备编辑器
},
onEditorBlur() {}, // 失去焦点事件
onEditorFocus() {}, // 获得焦点事件
onEditorChange() {}, // 内容改变事件
saveHtml: function (event) {
console.log(this.content);
},
},
mounted() {
// 悬浮提示
this.toolbarTips = [
{ Choice: ".ql-bold", title: "加粗" },
{ Choice: ".ql-italic", title: "倾斜" },
{ Choice: ".ql-underline", title: "下划线" },
{ Choice: ".ql-header", title: "段落格式" },
{ Choice: ".ql-strike", title: "删除线" },
{ Choice: ".ql-blockquote", title: "块引用" },
{ Choice: ".ql-size", title: "字体大小" },
{ Choice: '.ql-list[value="bullet"]', title: "有序列表" },
{ Choice: '.ql-list[value="ordered"]', title: "无序列表" },
{ Choice: ".ql-align", title: "对齐方式" },
{ Choice: ".ql-color", title: "字体颜色" },
{ Choice: ".ql-image", title: "图像" },
{ Choice: ".ql-link", title: "超链接" },
{ Choice: ".ql-clean", title: "清除格式"},
{ Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
{ Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
{Choice: '.ql-align .ql-picker-item[data-value="center"]',title: "居中对齐"},
{Choice: '.ql-align .ql-picker-item[data-value="right"]',title: "居右对齐"},
{Choice: '.ql-align .ql-picker-item[data-value="justify"]',title: "两端对齐"},
// { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
// { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
// { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
// { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: "标题一" },
// { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: "标题二" },
// { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: "标题三" },
// { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: "标题四" },
// { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: "标题五" },
// { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: "标题六" },
// { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
// { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: "小号" },
// { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: "大号" },
// {Choice: '.ql-size .ql-picker-item[data-value="huge"]',title: "超大号",},
// { Choice: '.ql-header[value="1"]', title: "h1" },
// { Choice: '.ql-header[value="2"]', title: "h2" },
// { Choice: ".ql-background", title: "背景颜色" },
// { Choice: ".ql-code-block", title: "插入代码段" },
// {Choice:'.ql-video',title:'视频'},
// { Choice: ".ql-formula", title: "插入公式" },
];
for (let item of this.toolbarTips) {
let tip = document.querySelector(".quill-editor " + item.Choice);
if (!tip) continue;
tip.setAttribute("title", item.title);
}
},
};
</script>
<style>
.quill-editor {
min-height: 200px;
height: 200px;
/* font-size: 18px !important; */
}
.quill-editor img,img{
width: 200px;
}
/* 字体大小设置 */
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
content: "20px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
content: "24px";
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
content: "36px";
}
/* 设置字体之后，标签会添加字体class类名，所以需要吧下面的class类名放到v-html的页面。 */
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-Arial {
font-family: "Arial";
}
.Times-New-Roman {
font-family: "Times New Roman";
}
</style>
网友评论