公司項目需要支持簡單表格、圖片上傳、樣式不丑的富文本編輯器。
當時選擇Quill這個富文本編輯器了也是看了一些附帶的插件的Demo（quill-better-table、quill-image-resize-module），還有自定義的toolbar。
中間碰到很多坑查了很多資料，也做了很多妥協。
個人而言覺得這個還不夠完善，生態也不夠大，版本也有點亂
Quill 的使用
開局一張圖
image
快速開始
我是直接在Vue項目中使用的 Quill
index.html 引入（可以直接引入cdn） 也可以使用vue-quill-editor不過中間碰到問題最終妥協了
展示效果：
效果
<!-- 引入主題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>
<!-- 創建編輯容器 -->
<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
內聯代碼 - code
斜體 - italic
鏈接 - link
大小 - size
刪除線 - strike
上標/下標 - script
下劃線 - underline
引用- blockquote
標題 - header
縮進 - indent
列表 - list
文本對齊 - align
文本方向 - direction
代碼塊 - code-block
公式 - formula
圖片 - image
視頻 - video
清除字體樣式- clean
配置方式
有兩種方式：
- 通過寫入html結構從而定制工具欄（我現在用的這個）
一般已ql-開頭，如果是點擊觸發的一般是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>
<!-- 創建編輯容器 -->
<div id="editor">
<p>Hello World!</p>
</div>
const editor = new Quill('#editor', {
modules: { toolbar: '#toolbar' },
theme: 'snow'
});
- 通過配置toolbar的數組選項從而定制工具欄
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'
});
增加自定義字體、自定義圖標、英文轉改中文
自定義字體
步驟：
- 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 部分
格式就在下面，應該一看就能明白吧
保持到font.css 引入就能使用了，該怎么自定義就看自己的了
/* 默認字體 具體可能需要修改 */
#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";
}
自定義圖標
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`;
將英文提示轉換成中文
修改
content即可，參照下方的，其他基本類似
- 超鏈接英文
.ql-snow .ql-tooltip::before {
content: '訪問鏈接：';
}
.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: '移除';
}
圖片縮放
東西是好東西，只是后來因為其他功能妥協了，使用很簡單。具體下面參照鏈接。
https://github.com/kensnyder/quill-image-resize-module
表格支持
直接看官方例子更直接
要求：quilljs v2.0.0-dev.3
https://github.com/soccerloway/quill-better-table
問題
圖片縮放組件 是基于 quill@1.x，但是現在需要編輯器能支持插入表格，這個需求 quill@1.x 做不到 但是 quill@2.0.0-dev.3 支持在編輯器中插入表格，不過這不是正式版，而是開發版，而且 quill 的版本一直停留在 1.x
相關鏈接
https://github.com/kensnyder/quill-image-resize-module
