Quill富文本編輯器入坑指北

公司項(xiàng)目需要支持簡(jiǎn)單表格、圖片上傳、樣式不丑的富文本編輯器。

當(dāng)時(shí)選擇Quill這個(gè)富文本編輯器了也是看了一些附帶的插件的Demo（quill-better-table、quill-image-resize-module），還有自定義的toolbar。

中間碰到很多坑查了很多資料，也做了很多妥協(xié)。

個(gè)人而言覺得這個(gè)還不夠完善，生態(tài)也不夠大，版本也有點(diǎn)亂

Quill 的使用

開局一張圖

image

快速開始

我是直接在Vue項(xiàng)目中使用的 Quill
index.html 引入（可以直接引入cdn） 也可以使用vue-quill-editor不過中間碰到問題最終妥協(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
刪除線 - strike
上標(biāo)/下標(biāo) - script
下劃線 - underline
引用- blockquote
標(biāo)題 - header
縮進(jìn) - indent
列表 - list
文本對(duì)齊 - align
文本方向 - direction
代碼塊 - code-block
公式 - formula
圖片 - image
視頻 - video
清除字體樣式- clean

配置方式

有兩種方式：

  1. 通過寫入html結(jié)構(gòu)從而定制工具欄（我現(xiàn)在用的這個(gè)）
    一般已ql-開頭，如果是點(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'
});
  1. 通過配置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)改中文

自定義字體

步驟：

  1. 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'
];
  1. 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] and icons[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 即可，參照下方的，其他基本類似

  1. 超鏈接英文
.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: '移除';
}

圖片縮放

東西是好東西，只是后來因?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

問題

圖片縮放組件 是基于 quill@1.x，但是現(xiàn)在需要編輯器能支持插入表格，這個(gè)需求 quill@1.x 做不到 但是 quill@2.0.0-dev.3 支持在編輯器中插入表格，不過這不是正式版，而是開發(fā)版，而且 quill 的版本一直停留在 1.x

相關(guān)鏈接

https://quilljs.com/

https://github.com/kensnyder/quill-image-resize-module

https://blog.csdn.net/asing1elife/article/details/103659403

http://www.itdecent.cn/p/b237372f15cc

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容