富⽂本quill.js使⽤
富⽂本Quill.js
背景
项⽬中使⽤vue-quill-editor 不能兼容table所以重新使⽤了quill.js
使⽤
1. 引⼊
Editor:()=>import("@/components/editor/Editor")
2. template
优秀的富文本编辑器
<editor
:id="dialogFrom[item.prop] + '--only'"
v-model="dialogFrom[item.prop]"
:
prop="item.prop"
:dialogTitle="dialogTitle"
@getQuill="getQuillChange($event, item.prop)"
></editor>
3. methods
// 获取富⽂本最新内容
getQuillChange(e, name){
console.log(e, name)
// this.dialogFrom[name] = e;
},
封装组件完整代码
/
/ QuillEditor.vue
<template>
<div class="editor-wapper" >
<div ref="editor":id="id"></div>
</div>
</template>
<script>
import Quill from"quill";
import"quill/dist/quill.snow.css";
const titleConfig ={
"ql-bold":"加粗",
"ql-color":"颜⾊",
"ql-font":"字体",
"ql-code":"插⼊代码",
"ql-italic":"斜体",
"ql-link":"添加链接",
"ql-background":"颜⾊",
"ql-size":"字体⼤⼩",
"ql-strike":"删除线",
"ql-script":"上标/下标",
"ql-underline":"下划线",
"ql-blockquote":"引⽤",
"ql-header":"标题",
"ql-indent":"缩进",
"ql-list":"列表",
"ql-align":"⽂本对齐",
"ql-align":"⽂本对齐",
"ql-direction":"⽂本⽅向",
"ql-code-block":"代码块",
"ql-formula":"公式",
"ql-image":"图⽚",
"ql-video":"视频",
"ql-clean":"清除字体样式",
"ql-upload":"⽂件",
"ql-table":"插⼊表格",
"ql-table-insert-row":"插⼊⾏",
"ql-table-insert-column":"插⼊列",
"ql-table-delete-row":"删除⾏",
"ql-table-delete-column":"删除列"
};
export default{
name:"Editor",
props:{
value: String,
id: String,
prop: String,
dialogTitle:String
},
data(){
return{
quill:null,
currentValue:null,
options:{
theme:"snow",
modules:{
toolbar:{
container:[
["bold","italic","underline","strike"],
[{ header:1},{ header:2}],
[{ list:"ordered"},{ list:"bullet"}],
[{ indent:"-1"},{ indent:"+1"}],
[{ color:[]},{ background:[]}],
[{ font:[]}],
[{ align:[]}],
["clean"],
["link","image","video"],
["formula"],// ⽀持数学公式
// ⽀持table
[
{ table:"TD"},
{"table-insert-row":"TIR"},
{"table-insert-column":"TIC"},
{"table-delete-row":"TDR"},
{"table-delete-column":"TDC"}
]
],
handlers:{
table:function(val){
// 默认3列 2排
Module("table").insertTable(2,3);
},
"table-insert-row":function(){
Module("table").insertRowBelow();
},
"table-insert-column":function(){
Module("table").insertColumnRight();
},
"table-delete-row":function(){
Module("table").deleteRow();
},
},
"table-delete-column":function(){
Module("table").deleteColumn();
}
}
},
table:true// 开启table
},
placeholder:"",
readonly:false// 选填
}
};
},
watch:{
value(newVal, oldVal){
if(newVal &&!oldVal){
innerHTML = newVal;
}
},
// 监听是否禁⽤富⽂本因为我是应⽤在弹窗中的查看的时候需要禁⽤富⽂本编辑功能
dialogTitle(val){
val && val =="查看"?able(true):able(false);
}
},
beforeDestroy(){
this.quill =null;
delete this.quill;
},
mounted(){
this.init();
this.setTable();
this.addQuillTitle();
},
methods:{
// 设置操作table的svg
setTable(){
document.querySelector(
".ql-table-insert-row"
).innerHTML =`<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="/2000/svg" p-id="6306" width= "18" height="200"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></s vg>`;
document.querySelector(
".ql-table-insert-column"
).innerHTML =`<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="/2000/svg" p-id="6509" width= "18" height="200"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.22 6666-45.269333z" p-id="6510"></path></svg>`;
document.querySelector(
".ql-table-delete-row"
).innerHTML =`<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="/2000/svg" p-id="6632" width= "18" height="200"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>`;
document.querySelector(
".ql-table-delete-column"
)
.innerHTML =`<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="/2000/svg" p-id="6755" width= "18" height="200"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.36533 3-233.237333z" p-id="6756"></path></svg>`;
},
addQuillTitle(){
const oToolBar = document.querySelector(".ql-toolbar");
const aButton = oToolBar.querySelectorAll("button");
const aSelect = oToolBar.querySelectorAll("select");
aButton.forEach(function(item){
if(item.className ==="ql-script"){
item.value ==="sub"?(item.title ="下标"):(item.title ="上标");
}else if(item.className ==="ql-indent"){
item.value ==="+1"
?(item.title ="向右缩进")
?(item.title ="向右缩进")
:(item.title ="向左缩进");
}else{
item.title = titleConfig[item.classList[0]];
}
});
aSelect.forEach(function(item){
item.parentNode.title = titleConfig[item.classList[0]];
});
},
init(){
const editor =this.$refs.editor;
// 初始化编辑器
this.quill =new Quill(editor,this.options);
//  默认值
innerHTML =this.value;
// 富⽂本内容发⽣变化传给⽗组件
("text-change",()=>{
this.$emit("getQuill",innerHTML);
});
}
}
};
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。