vue-quill-editor字體數(shù)量特別少唐础，所以根本不能滿足囤捻。
image.png
在對應(yīng)的組件中使用
···
import "../../assets/styles/fontstyle/size-set.css";
import { quillEditor, Quill } from "vue-quill-editor";
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px','18px','20px', '22px','24px', '26px', '28px','30px','32px', '36px','38px', '40px','45px', '50px', false];
Quill.register(fontSizeStyle, true);
···
在editor的配置中配置size字體大小
····
editorOption: {
placeholder: "請編輯文本內(nèi)容",
modules: {
toolbar: {
container: [
["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: fontSizeStyle.whitelist}], // 字體大小 ["small", false, "large", "huge"]
//[{ size:['10px', false, '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '33px', '36px', '40px']}],
[{ header: [1, 2, 3, 4, 5, 6, false] }], //幾級標題
[{ color: [] }, { background: [] }], // 字體顏色氨鹏，字體背景顏色
[{ font: fonts }], //字體
[{ align: [] }], //對齊方式
["image"],["clean"] //上傳圖片、上傳視頻 //清除字體樣式
],
handlers: {
image: function(value) {
if (value) {
document.querySelector("#quill-upload input").click();
console.log(
"圖片顯示",
document.querySelector("#quill-upload input")
);
} else {
this.quill.format("image", false);
}
}
}
}
},
theme: "snow"
}
···
新建size-set.css文件
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='22px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='22px']::before {
content: '22px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='26px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='26px']::before {
content: '26px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {
content: '28px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {
content: '30px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {
content: '32px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
content: '36px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='38px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='38px']::before {
content: '38px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='40px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='40px']::before {
content: '40px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='45px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='45px']::before {
content: '45px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='50px']::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='50px']::before {
content: '50px';
}
/**設(shè)置默認字體顯示
**/
.ql-container {
font-size:16px;
}
<template>
<div class="Editor">
<!--百度編輯器顯示 https://juejin.im/post/5c931fe8f265da60f771c2cd
https://juejin.im/post/5a782c946fb9a063475f5e16
https://www.cnblogs.com/zr123/p/11101429.html
http://www.reibang.com/p/2c2c54acf1b9配置上傳地址
-->
<!-- bidirectional data binding（雙向數(shù)據(jù)綁定）v-if="!isEdit" -->
<div class="editType">
<el-upload
id="quill-upload"
class="avatar-uploader"
:action="actionUrl"
name="img"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload"
></el-upload>
<quill-editor
style="height:300px"
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)"
@ready="onEditorReady($event)"
></quill-editor>
</div>
<!-- <div class="editType" v-if="isEdit">
<vue-ueditor-wrap
v-model="content"
:config="myUeditConfig"
@blur="editorTxt()"
:destroy="true"
></vue-ueditor-wrap>
</div>-->
<!-- <div class="editType">
<el-input
type="textarea"
:autosize="{ minRows: 20, maxRows: 20}"
placeholder="請輸入內(nèi)容"
v-model="content"
> </el-input>
</div>
-->
</div>
</template>
<script>
import { base_url, img_url } from "../../util/url";
import "../../assets/styles/fontstyle/font.css";
import "../../assets/styles/fontstyle/size-set.css";
import { quillEditor, Quill } from "vue-quill-editor";
let fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px','18px','20px', '22px','24px', '26px', '28px','30px','32px', '36px','38px', '40px','45px', '50px', false];
Quill.register(fontSizeStyle, true);
//自定義字體類型
var fonts = [
"SimSun",
"SimHei",
"Microsoft-YaHei",
"KaiTi",
"FangSong",
"Arial",
"Times-New-Roman",
"sans-serif"
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts; //將字體加入到白名單
Quill.register(Font, true);
export default {
name: "Editor",
props: {
isEdit: {
type: Boolean,
default: false
},
txtcontent: {
type: String,
default: ""
}
},
data() {
return {
quillUpdateImg: false,
headerToken: { "X-Auth-Token": localStorage.getItem("accessToken") },
actionUrl: img_url,
content: "",
myUeditConfig: {
// 編輯器不自動被內(nèi)容撐高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: "100%",
// 初始容器寬度
initialFrameWidth: "86%",
// serverUrl: "http://192.168.9.190:8001/b/upload/uploadImages",
serverUrl: img_url,
// UEditor 資源文件的存放路徑压状，如果你使用的是 vue-cli 生成的項目仆抵，通常不需要設(shè)置該選項，vue-ueditor-wrap 會自動處理常見的情況种冬，如果需要特殊配置镣丑，參考下方的常見問題2
UEDITOR_HOME_URL: "/static/UEditor/"
},
editorOption: {
placeholder: "請編輯文本內(nèi)容",
modules: {
toolbar: {
container: [
["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: fontSizeStyle.whitelist}], // 字體大小 ["small", false, "large", "huge"]
//[{ size:['10px', false, '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '33px', '36px', '40px']}],
[{ header: [1, 2, 3, 4, 5, 6, false] }], //幾級標題
[{ color: [] }, { background: [] }], // 字體顏色旱物，字體背景顏色
[{ font: fonts }], //字體
[{ align: [] }], //對齊方式
["image"],["clean"] //上傳圖片遥缕、上傳視頻 //清除字體樣式
],
handlers: {
image: function(value) {
if (value) {
document.querySelector("#quill-upload input").click();
console.log(
"圖片顯示",
document.querySelector("#quill-upload input")
);
} else {
this.quill.format("image", false);
}
}
}
}
},
theme: "snow"
}
};
},
methods: {
//vue-quill-editor
onEditorBlur(quill) {
// console.log("editor blur!", quill, this.content);
this.$emit("editorBlur", this.content);
},
onEditorFocus(quill) {
this.$emit("editorBlur", this.content);
// console.log("editor focus!", quill, this.content);
},
onEditorReady(quill) {
// console.log("editor ready!", quill);
},
onEditorChange({ quill, html, text }) {
// console.log("editor change!", quill, html, text);
this.content = html;
},
onEditorChange(quill) {
// console.log("編輯內(nèi)容改變!", quill, this.content);
this.$emit("editorBlur", this.content);
},
/**
* 圖片上傳
*/
// 上傳圖片前
beforeUpload(res, file) {
this.quillUpdateImg = true;
},
// 上傳圖片成功
uploadSuccess(res, file) {
// res為圖片服務(wù)器返回的數(shù)據(jù)
// 獲取富文本組件實例
let quill = this.$refs.myQuillEditor.quill;
// 如果上傳成功
if (res.ret == "OK") {
// 獲取光標所在位置
let length = quill.getSelection().index;
// 插入圖片 res.info為服務(wù)器返回的圖片地址
const img = "<img width='80%' style='2px solid red;' src='" + res.content.img_url + "'/>";
quill.insertEmbed(length, "image", res.content.img_url);
// 調(diào)整光標到最后
quill.setSelection(length + 1);
} else {
console.log("插入失敗");
}
// loading動畫消失
this.quillUpdateImg = false;
},
// 上傳圖片失敗
uploadError(res, file) {
// loading動畫消失
this.quillUpdateImg = false;
console.log("插入失敗", res, file);
}
//vue
// editorTxt() {
// // console.log("百度插件不行嗎", this.content);
// }
},
watch: {
txtcontent(value, oldValue) {
this.content = value;
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
}
},
mounted() {
// console.log("this is current quill instance object", this.editor);
},
activated() {},
//keep-alive停用時掉用
deactivated() {}
};
</script>
<style lang="scss" scoped>
@import "../../assets/styles/fontstyle/font_cn.css";
.Editor {
min-height: 305px;
height: 100%;
}
.quill-editor {
height: 300px;
}
</style>
