公司項(xiàng)目需要支持簡(jiǎn)單表格艾恼、圖片上傳著蟹、樣式不丑的富文本編輯器蛾扇。
當(dāng)時(shí)選擇Quill這個(gè)富文本編輯器了也是看了一些附帶的插件的Demo（quill-better-table刀疙、quill-image-resize-module）违寿，還有自定義的toolbar湃交。
中間碰到很多坑查了很多資料，也做了很多妥協(xié)藤巢。
個(gè)人而言覺(jué)得這個(gè)還不夠完善搞莺，生態(tài)也不夠大，版本也有點(diǎn)亂
Quill 的使用
開(kāi)局一張圖
image
快速開(kāi)始
我是直接在Vue項(xiàng)目中使用的 Quill
index.html 引入（可以直接引入cdn） 也可以使用vue-quill-editor不過(guò)中間碰到問(wèn)題最終妥協(xié)了
展示效果：
效果
<!-- 引入主題css文件 -->
<link rel="stylesheet">
<!-- 引入js文件 -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- 自定義編輯器工具欄 -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- 創(chuàng)建編輯容器 -->
<div id="editor">
<p>Hello World!</p>
</div>
<!-- 初始化編輯器掂咒，snow主題 -->
<script>
const editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
</script>
自定義toolbar
部分模塊名
背景顏色 - background
加粗- bold
顏色 - color
字體 - font
內(nèi)聯(lián)代碼 - code
斜體 - italic
鏈接 - link
大小 - size
刪除線(xiàn) - strike
上標(biāo)/下標(biāo) - script
下劃線(xiàn) - underline
引用- blockquote
標(biāo)題 - header
縮進(jìn) - indent
列表 - list
文本對(duì)齊 - align
文本方向 - direction
代碼塊 - code-block
公式 - formula
圖片 - image
視頻 - video
清除字體樣式- clean
配置方式
有兩種方式：
- 通過(guò)寫(xiě)入html結(jié)構(gòu)從而定制工具欄（我現(xiàn)在用的這個(gè)）
一般已ql-開(kāi)頭才沧，如果是點(diǎn)擊觸發(fā)的一般是button，字體這種一般是select
image
<!-- 自定義編輯器工具欄 -->
<div id="toolbar">
<!--粗體-->
<button class="ql-bold"></button>
<!--斜體-->
<button class="ql-italic"></button>
<!--字體-->
<select class="ql-font">
<option value="monospace"></option>
<option value="consolas"></option>
<option value="serif"></option>
</select>
</div>
<!-- 創(chuàng)建編輯容器 -->
<div id="editor">
<p>Hello World!</p>
</div>
const editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
- 通過(guò)配置toolbar的數(shù)組選項(xiàng)從而定制工具欄
image
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'font': [] }],
[{ 'align': [] }],
['clean'] // remove formatting button
];
const quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
增加自定義字體绍刮、自定義圖標(biāo)温圆、英文轉(zhuǎn)改中文
自定義字體
步驟：
- js部分
// Add fonts to whitelist
const Font = Quill.import('formats/font');
// We do not add Aref Ruqaa since it is the default
Font.whitelist = [
'SimSun',
'SimHei',
'Microsoft-YaHei',
'KaiTi',
'FangSong',
'Arial',
'Times-New-Roman',
'sans-serif',
'monospace',
'serif',
'consolas'
];
- css 部分
格式就在下面，應(yīng)該一看就能明白吧
保持到font.css 引入就能使用了孩革，該怎么自定義就看自己的了
/* 默認(rèn)字體 具體可能需要修改 */
#editor {
font-family: 'Microsoft-YaHei';
}
.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: "宋體";
font-family: "SimSun";
}
.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: "黑體";
font-family: "SimHei";
}
.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: "微軟雅黑";
font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=consolas]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=consolas]::before {
content: "consolas";
font-family: "consolas";
}
.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: "楷體";
font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}
.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";
font-family: "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: "New Roman";
font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
content: "sans-serif";
font-family: "sans-serif";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-FangSong {
font-family: "FangSong";
}
.ql-font-Arial {
font-family: "Arial";
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
.ql-font-sans-serif {
font-family: "sans-serif";
}
.ql-font-consolas {
font-family: "consolas";
}
自定義圖標(biāo)
icons[actionName]andicons[actionName].childrenName
// 引入icons
const icons = Quill.import('ui/icons');
// 修改
icons['color'] = `<i class="ql-stroke ql-color-label font_family icon-icon_pc_a"></i>`;
icons['background'] = `<i class="ql-color-label font_family icon-icon_pc_background_color"></i>`;
icons['image'] = `<i class="font_family icon-icon_pc_import_image"></i>`;
icons['list'].bullet = `xxxxx`;
icons['list'].ordered = `xxxxx`;
將英文提示轉(zhuǎn)換成中文
修改
content即可岁歉，參照下方的，其他基本類(lèi)似
- 超鏈接英文
.ql-snow .ql-tooltip::before {
content: '訪問(wèn)鏈接：';
}
.ql-snow .ql-tooltip[data-mode='link']::before {
content: '輸入鏈接：';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
content: '保存';
}
.ql-snow .ql-tooltip a.ql-action::after {
content: '編輯';
}
.ql-snow .ql-tooltip a.ql-remove::before {
content: '移除';
}
圖片縮放
東西是好東西膝蜈，只是后來(lái)因?yàn)槠渌δ芡讌f(xié)了锅移，使用很簡(jiǎn)單。具體下面參照鏈接饱搏。
https://github.com/kensnyder/quill-image-resize-module
表格支持
直接看官方例子更直接
要求：quilljs v2.0.0-dev.3
https://github.com/soccerloway/quill-better-table
問(wèn)題
圖片縮放組件 是基于 quill@1.x非剃，但是現(xiàn)在需要編輯器能支持插入表格，這個(gè)需求 quill@1.x 做不到 但是 quill@2.0.0-dev.3 支持在編輯器中插入表格推沸，不過(guò)這不是正式版备绽，而是開(kāi)發(fā)版，而且 quill 的版本一直停留在 1.x
相關(guān)鏈接
https://github.com/kensnyder/quill-image-resize-module
