[TOC] Quill在設計的時候就考慮到了定制和擴展，這些是通過由細粒度、良好定義的 [API](../api.md)組成的小型編輯器核心來實現的。編輯器核心通過[modules](../模塊modules.md)來增強功能，同時使用了對用戶開放的[APIs](../api.md)。 一般的，常見的定制是通過[配置(configurations)](#configurations)設置，用戶界面通過[主題(Themes)](#themes) 和 CSS實現，功能是通過[模塊(modules)](#modules)實現，編輯器內容是用[Parchment](#content-and-formatting)實現。 ## 配置(Configurations) Quill比起Configuration&trade;更喜歡代碼(Code)，但對于非常常見的需求，特別是用等效代碼可能很長或很復雜的情況下，Quill提供 [配置(configuration)](../格式formats.md) 選項。這是確定是否需要任何自定義功能的首選地方。 最強大的兩個選項是 `modules` and `theme`。你只需簡單的添加或刪除單個[模塊(modules)](../模塊modules.md) 或使用不同的[主題(theme)](../主題themes.md)，就可以徹底改變或擴展Quill的功能和功能。 ## 主題(Themes) Quill官方提供一個標準的工具欄主題 [Snow](../主題themes.md)和一個浮動提示主題[Bubble](../主題themes.md)。由于Quill不像許多遺留編輯器局限在iframe中，你可以使用CSS及現有主題修改視圖。 如果你想徹底改變UI交互，可以省略`theme`配置選項。這樣就會提供一個無樣式的Quill編輯器。你仍需要包含一個最小的樣式表，比如確保所有瀏覽器中空格渲染和有序list呈現適當的編號。 ```html <link rel="stylesheet" href="https://cdn.quilljs.com/1.3.6/quill.core.css"> ``` 從那里你可以實現添加你自己的UI元素，如自定義下拉菜單或工具提示。文章[Cloning Medium with Parchment](cloning-medium-with-parchment.md)的最后一部分提供了一個這樣的例子。 ## 模塊(modules) Quill是由小編輯核心和增強功能的模塊組成的模塊化架構設計。其中一些功能對編輯是必不可少的，比如管理撤銷和重做功能的[History](../modules/歷史記錄history.md) 模塊。因為所有模塊使用向開發人員公開的相同的公共[API](../api.md) ，在必要的時候甚至可以交換核心模塊。 和Quill的核心本身一樣，許多[modules](../模塊modules.md) 暴露了二維的配置選項和API。在決定替換一個模塊前，請查看對應的文檔。所需的定制常常已經能作為配置或通過調用API實現。 如果您想徹底改變現有的模塊已經有的功能，你可以簡單的不包括它或者在內置有這個功能的主題中明確的排除它，并使用默認模塊相同的 [API](../api.md) 來實現您喜歡的Quill擴展功能。 ```js var quill = new Quill('#editor', { modules: { toolbar: false // Snow includes toolbar by default }, theme: 'snow' }); ``` 一些模塊如[Clipboard](../modules/粘貼板clipboard.md)、[Keyboard](../modules/鍵盤keyboard.md)和[History](../modules/歷史記錄history.md)需要作為核心功能包括進來，這取決于他們提供的API。例如，盡管撤銷(undo)、重做(redo)是基本的、應有的編輯器功能，但處理這個的原生瀏覽器行為是不一致和不可預測的。History模塊通過實現自己的undo管理器并將`undo()`和`redo()`作為api暴露來縮小不同瀏覽器之間的差距。 盡管如此，按照Quill模塊化設計，您仍然可以通過實現自己的undo管理器來替換History模塊，從而徹底改變undo和redo或任何其他核心功能的工作方式。只要實現相同的API接口，Quill樂于使用您的替換模塊。最容易的是通過繼承現有模塊和覆蓋要更改的方法來完成。查看模塊文檔可以獲得覆蓋核心 [Clipboard](../modules/粘貼板clipboard.md) 模塊的簡單示例。 最后，您可能需要添加現有模塊未提供的功能。在這種情況下，可以方便地將其組織為一個Quill模塊，而[構建自定義模塊](building-a-custom-module.md) 這篇文章介紹了方法。當然，在您的應用程序代碼中，可以有效的和Quill保持邏輯分離。 ## 內容和格式化 Quill允許通過它解析的文檔模型<a href="https://github.com/quilljs/parchment/">Parchment</a>來修改或擴展內容和格式。內容和格式在Parchment中表示為blot或attributor，他們大致對應DOM中的節點和屬性。 ### 類與內聯 如果可能的話，Quill使用更愿意使用類，而不是內聯樣式屬性，但是您可任意以選著和使用者兩者。 這里有個實時的例子:<a href="https://codepen.io/liuwave/pen/povzWeX">Playground snippet</a>。 ```js var ColorClass = Quill.import('attributors/class/color'); var SizeStyle = Quill.import('attributors/style/size'); Quill.register(ColorClass, true); Quill.register(SizeStyle, true); // 初始化 var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' }); ``` ### 自定義屬性 除了選著特定的屬性，您也可以自定義現有的屬性。這里有個添加其他字體到字體白名單的示例。 ```js var FontAttributor = Quill.import('attributors/class/font'); FontAttributor.whitelist = [ 'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu' ]; Quill.register(FontAttributor, true); ``` 注意，您仍需要將這些類的樣式添加到Css文件中。 ```html <style> /* roboto-regular */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: regular; src: url('//lib.baomitu.com/fonts/roboto/roboto-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto'), local('Roboto-Normal'), url('//lib.baomitu.com/fonts/roboto/roboto-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//lib.baomitu.com/fonts/roboto/roboto-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('//lib.baomitu.com/fonts/roboto/roboto-regular.woff') format('woff'), /* Modern Browsers */ url('//lib.baomitu.com/fonts/roboto/roboto-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('//lib.baomitu.com/fonts/roboto/roboto-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } .ql-font-roboto { font-family: 'Roboto', sans-serif; } </style> ``` ### 自定義 Blots Blot呈現的格式也能自定義。這里是如何改變DOM節點來呈現粗體格式的示例。 ```js var Bold = Quill.import('formats/bold'); Bold.tagName = 'B'; // Quill uses <strong> by default Quill.register(Bold, true); // Initialize as you would normally var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' }); ``` ### 擴展 Blots 您還可以擴展現有格式。下面是禁止格式化除list格式外的內容的一個ES6快速實現。實現這個的代碼塊如下： ```js var ListItem = Quill.import('formats/list/item'); class PlainListItem extends ListItem { formatAt(index, length, name, value) { if (name === 'list') { // 允許改變和移除list格式 super.formatAt(name, value); } // Otherwise ignore } } Quill.register(PlainListItem, true); // Initialize as you would normally var quill = new Quill('#editor', { modules: { toolbar: true }, theme: 'snow' }); ``` 你可以通過 `console.log(Quill.imports);`查看Blot和Attribute列表。不支持直接修改此對象，如要修改，請用U[`Quill.register`](../api/擴展extension.md) 代替. 您可以在Parchment自己的 <a href="https://github.com/quilljs/parchment/">README</a>中找到 Parchment、Blot 和 Attributor的完整參考。要深入學習的話，請查看[Cloning Medium with Parchment](cloning-medium-with-parchment.md)，通過Quill從理解純文本開始，到添加所有<a href="https://medium.com/">Medium</a>支持的格式。大多數情況，您不必從濤開始構建格式，因為大多數格式已經在Quill中實現，但是理解Quill在這個深度上如何工作是很有用的。