[TOC] <!-- The Toolbar module allow users to easily format Quill's contents. --> 工具欄模塊允許用戶容易的設置Quill的內容格式。  <!-- It can be configured with a custom container and handlers. --> 可以用自定義的容器和處理程序定義。 ```javascript var quill = new Quill('#editor', { modules: { toolbar: { container: '#toolbar', // Selector for toolbar container handlers: { 'formula': customFormulaHandler } } } }); ``` <!-- Because the `container` option is so common, a top level shorthand is also allowed. --> 因為`container`選項是非常通用的，允許在上一級簡寫。 ```javascript var quill = new Quill('#editor', { modules: { // Equivalent to { toolbar: { container: '#toolbar' }} toolbar: '#toolbar' } }); ``` ## 容器 <!-- Toolbar controls can either be specified by a simple array of format names or a custom HTML container. --> 工具欄控件即可以用一個格式名稱數組定義，也可以用一般的HTML容器定義。 To begin with the simpler array option: ```javascript var toolbarOptions = ['bold', 'italic', 'underline', 'strike']; var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions } }); ``` <!-- Controls can also be grouped by one level of nesting an array. This will wrap controls in a `<span>` with class name `ql-formats`, providing structure for themes to utilize. For example [Snow](/docs/themes/#snow/) adds extra spacing between control groups. --> 控件也可以按嵌套數組的同一級別分組。將會用帶有類名`ql-formats`的`<span>`包裹控件，提供給主題使用。例如，主題[Snow](../主題themes.md)在控件組之間添加了額外的間距。 ```javascript var toolbarOptions = [['bold', 'italic'], ['link', 'image']]; ``` <!-- Buttons with custom values can be specified with an Object with the name of the format as its only key. --> 自定義的按鈕可以用帶有作為它唯一鍵值的格式名稱組成的對象來定義。 ```javascript var toolbarOptions = [{ 'header': '3' }]; ``` <!-- Dropdowns are similarly specified by an Object, but with an array of possible values. CSS is used to control the visual labels for dropdown options. --> 類似的，下拉菜單也是用對象定義，但是一用可能值組成的數組來定義。CSS被用作控制下拉菜單的可視標簽。 ```javascript // Note false, not 'normal', is the correct value // quill.format('size', false) removes the format, // allowing default styling to work var toolbarOptions = [ { size: [ 'small', false, 'large', 'huge' ]} ]; ``` <!-- Note [Themes](/docs/themes/) may also specify default values for dropdowns. For example, [Snow](/docs/themes/#snow/) provides a default list of 35 colors for the `color` and `background` formats, if set to an empty array. --> 注意，[主題](../主題themes.md)也可以定義下拉菜單的默認值。例如，如果下拉菜單被設置成空數組，[Snow](../主題themes.md) 主題默認提供 `color` 和 `background` 格式的35種顏色列表供選擇。 ```javascript var 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 ]; var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, theme: 'snow' }); ``` <!-- For use cases requiring even more customization, you can manually create a toolbar in HTML, and pass the DOM element or selector into Quill. The `ql-toolbar` class will be added to the toolbar container and Quill attach appropriate handlers to `<button>` and `<select>` elements with a class name in the form `ql-${format}`. Buttons element may optionally have a custom `value` attribute. --> 如果用戶案例需要更多的定制，你可以用HTML手動創建一個工具欄，然后傳入DOM元素或選擇器到Quill。工具欄容器將添加`ql-toolbar`類，Quill附加合適的處理程序給帶有`ql-${format}`格式類名的 `<button>` 和`<select>` 元素。 按鈕元素可選設置一個自定義 `value`屬性。 ```html <!-- Create toolbar container --> <div id="toolbar"> <!-- Add font size dropdown --> <select class="ql-size"> <option value="small"></option> <!-- Note a missing, thus falsy value, is used to reset to default --> <option selected></option> <option value="large"></option> <option value="huge"></option> </select> <!-- Add a bold button --> <button class="ql-bold"></button> <!-- Add subscript and superscript buttons --> <button class="ql-script" value="sub"></button> <button class="ql-script" value="super"></button> </div> <div id="editor"></div> <!-- Initialize editor with toolbar --> <script> var quill = new Quill('#editor', { modules: { toolbar: '#toolbar' } }); </script> ``` <!-- Note by supplying your own HTML element, Quill searches for particular input elements, but your own inputs that have nothing to do with Quill can still be added and styled and coexist. --> 注意，如果你提供自己的HTML元素，Quill會搜索特定輸入的元素，與Quill無關的，你自己輸入的元素仍然可以添加、設置樣式、共存。 ```html <div id="toolbar"> <!-- Add buttons as you would before --> <button class="ql-bold"></button> <button class="ql-italic"></button> <!-- But you can also add your own --> <button id="custom-button"></button> </div> <div id="editor"></div> <script> var quill = new Quill('#editor', { modules: { toolbar: '#toolbar' } }); var customButton = document.querySelector('#custom-button'); customButton.addEventListener('click', function() { console.log('Clicked!'); }); </script> ``` ## Handlers <!-- The toolbar controls by default applies and removes formatting, but you can also overwrite this with custom handlers, for example in order to show external UI. Handler functions will be bound to the toolbar (so using `this` will refer to the toolbar instance) and passed the `value` attribute of the input if the corresponding format is inactive, and `false` otherwise. Adding a custom handler will overwrite the default toolbar and theme behavior. --> 工具欄空間默認定義應用和刪除格式，但是你也可以用自定義處理程序重寫，例如為了顯示外部UI。 處理程序函數將始終綁定到工具欄(所以使用`this`指的是工具欄實例)，并在對應格式沒有激活下傳入`value`值，否則傳入`false`。添加自定義處理程序將覆蓋默認的工具欄和主題行為。 ```javascript var toolbarOptions = { handlers: { // handlers object will be merged with default handlers object 'link': function(value) { if (value) { var href = prompt('Enter the URL'); this.quill.format('link', href); } else { this.quill.format('link', false); } } } } var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions } }); // Handlers can also be added post initialization var toolbar = quill.getModule('toolbar'); toolbar.addHandler('image', showImageUI); ``` <!-- script --> <script src="{{site.cdn}}1.3.6/{{site.quill}}"></script> <script> var quill = new Quill('#toolbar-editor', { modules: { toolbar: { container: '#toolbar-toolbar' } }, theme: 'snow' }); </script> <!-- script -->