├── screenshot.png ├── docs ├── fonts │ ├── OpenSans-Bold-webfont.eot │ ├── OpenSans-Bold-webfont.woff │ ├── OpenSans-Light-webfont.eot │ ├── OpenSans-Italic-webfont.eot │ ├── OpenSans-Italic-webfont.woff │ ├── OpenSans-Light-webfont.woff │ ├── OpenSans-Regular-webfont.eot │ ├── OpenSans-Regular-webfont.woff │ ├── OpenSans-Semibold-webfont.eot │ ├── OpenSans-Semibold-webfont.ttf │ ├── OpenSans-BoldItalic-webfont.eot │ ├── OpenSans-Semibold-webfont.woff │ ├── OpenSans-BoldItalic-webfont.woff │ ├── OpenSans-LightItalic-webfont.eot │ ├── OpenSans-LightItalic-webfont.woff │ ├── OpenSans-SemiboldItalic-webfont.eot │ ├── OpenSans-SemiboldItalic-webfont.ttf │ └── OpenSans-SemiboldItalic-webfont.woff ├── scripts │ ├── linenumber.js │ └── prettify │ │ ├── lang-css.js │ │ ├── Apache-License-2.0.txt │ │ └── prettify.js ├── styles │ ├── prettify-jsdoc.css │ ├── prettify-tomorrow.css │ └── jsdoc-default.css ├── index.html ├── CustomQuillTools.js.html ├── QuillToolbarItem.html ├── QuillToolbarButton.html └── QuillToolbarDropDown.html ├── LICENSE ├── README.md ├── example.html └── DynamicQuillTools.js /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/screenshot.png -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Bold-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Bold-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Light-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Light-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Italic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Italic-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Italic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Italic-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Light-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Regular-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Regular-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Semibold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Semibold-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Semibold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Semibold-webfont.ttf -------------------------------------------------------------------------------- /docs/fonts/OpenSans-BoldItalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-BoldItalic-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-Semibold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-Semibold-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/OpenSans-BoldItalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-BoldItalic-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/OpenSans-LightItalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-LightItalic-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-LightItalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-LightItalic-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/OpenSans-SemiboldItalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-SemiboldItalic-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/OpenSans-SemiboldItalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-SemiboldItalic-webfont.ttf -------------------------------------------------------------------------------- /docs/fonts/OpenSans-SemiboldItalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/T-vK/DynamicQuillTools/HEAD/docs/fonts/OpenSans-SemiboldItalic-webfont.woff -------------------------------------------------------------------------------- /docs/scripts/linenumber.js: -------------------------------------------------------------------------------- 1 | /*global document */ 2 | (function() { 3 | var source = document.getElementsByClassName('prettyprint source linenums'); 4 | var i = 0; 5 | var lineNumber = 0; 6 | var lineId; 7 | var lines; 8 | var totalLines; 9 | var anchorHash; 10 | 11 | if (source && source[0]) { 12 | anchorHash = document.location.hash.substring(1); 13 | lines = source[0].getElementsByTagName('li'); 14 | totalLines = lines.length; 15 | 16 | for (; i < totalLines; i++) { 17 | lineNumber++; 18 | lineId = 'line' + lineNumber; 19 | lines[i].id = lineId; 20 | if (lineId === anchorHash) { 21 | lines[i].className += ' selected'; 22 | } 23 | } 24 | } 25 | })(); 26 | -------------------------------------------------------------------------------- /docs/scripts/prettify/lang-css.js: -------------------------------------------------------------------------------- 1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com", 2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]); 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2019, T-vK 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions 6 | are met: 7 | 8 | 1. Redistributions of source code must retain the above copyright 9 | notice, this list of conditions and the following disclaimer. 10 | 11 | 2. Redistributions in binary form must reproduce the above copyright 12 | notice, this list of conditions and the following disclaimer in the 13 | documentation and/or other materials provided with the distribution. 14 | 15 | 3. Neither the name of the copyright holder nor the names of its 16 | contributors may be used to endorse or promote products derived from 17 | this software without specific prior written permission. 18 | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS 20 | IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED 21 | TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A 22 | PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 23 | HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 24 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 25 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 26 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 27 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 28 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 30 | -------------------------------------------------------------------------------- /docs/styles/prettify-jsdoc.css: -------------------------------------------------------------------------------- 1 | /* JSDoc prettify.js theme */ 2 | 3 | /* plain text */ 4 | .pln { 5 | color: #000000; 6 | font-weight: normal; 7 | font-style: normal; 8 | } 9 | 10 | /* string content */ 11 | .str { 12 | color: hsl(104, 100%, 24%); 13 | font-weight: normal; 14 | font-style: normal; 15 | } 16 | 17 | /* a keyword */ 18 | .kwd { 19 | color: #000000; 20 | font-weight: bold; 21 | font-style: normal; 22 | } 23 | 24 | /* a comment */ 25 | .com { 26 | font-weight: normal; 27 | font-style: italic; 28 | } 29 | 30 | /* a type name */ 31 | .typ { 32 | color: #000000; 33 | font-weight: normal; 34 | font-style: normal; 35 | } 36 | 37 | /* a literal value */ 38 | .lit { 39 | color: #006400; 40 | font-weight: normal; 41 | font-style: normal; 42 | } 43 | 44 | /* punctuation */ 45 | .pun { 46 | color: #000000; 47 | font-weight: bold; 48 | font-style: normal; 49 | } 50 | 51 | /* lisp open bracket */ 52 | .opn { 53 | color: #000000; 54 | font-weight: bold; 55 | font-style: normal; 56 | } 57 | 58 | /* lisp close bracket */ 59 | .clo { 60 | color: #000000; 61 | font-weight: bold; 62 | font-style: normal; 63 | } 64 | 65 | /* a markup tag name */ 66 | .tag { 67 | color: #006400; 68 | font-weight: normal; 69 | font-style: normal; 70 | } 71 | 72 | /* a markup attribute name */ 73 | .atn { 74 | color: #006400; 75 | font-weight: normal; 76 | font-style: normal; 77 | } 78 | 79 | /* a markup attribute value */ 80 | .atv { 81 | color: #006400; 82 | font-weight: normal; 83 | font-style: normal; 84 | } 85 | 86 | /* a declaration */ 87 | .dec { 88 | color: #000000; 89 | font-weight: bold; 90 | font-style: normal; 91 | } 92 | 93 | /* a variable name */ 94 | .var { 95 | color: #000000; 96 | font-weight: normal; 97 | font-style: normal; 98 | } 99 | 100 | /* a function name */ 101 | .fun { 102 | color: #000000; 103 | font-weight: bold; 104 | font-style: normal; 105 | } 106 | 107 | /* Specify class=linenums on a pre to get line numbering */ 108 | ol.linenums { 109 | margin-top: 0; 110 | margin-bottom: 0; 111 | } 112 | -------------------------------------------------------------------------------- /docs/styles/prettify-tomorrow.css: -------------------------------------------------------------------------------- 1 | /* Tomorrow Theme */ 2 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */ 3 | /* Pretty printing styles. Used with prettify.js. */ 4 | /* SPAN elements with the classes below are added by prettyprint. */ 5 | /* plain text */ 6 | .pln { 7 | color: #4d4d4c; } 8 | 9 | @media screen { 10 | /* string content */ 11 | .str { 12 | color: hsl(104, 100%, 24%); } 13 | 14 | /* a keyword */ 15 | .kwd { 16 | color: hsl(240, 100%, 50%); } 17 | 18 | /* a comment */ 19 | .com { 20 | color: hsl(0, 0%, 60%); } 21 | 22 | /* a type name */ 23 | .typ { 24 | color: hsl(240, 100%, 32%); } 25 | 26 | /* a literal value */ 27 | .lit { 28 | color: hsl(240, 100%, 40%); } 29 | 30 | /* punctuation */ 31 | .pun { 32 | color: #000000; } 33 | 34 | /* lisp open bracket */ 35 | .opn { 36 | color: #000000; } 37 | 38 | /* lisp close bracket */ 39 | .clo { 40 | color: #000000; } 41 | 42 | /* a markup tag name */ 43 | .tag { 44 | color: #c82829; } 45 | 46 | /* a markup attribute name */ 47 | .atn { 48 | color: #f5871f; } 49 | 50 | /* a markup attribute value */ 51 | .atv { 52 | color: #3e999f; } 53 | 54 | /* a declaration */ 55 | .dec { 56 | color: #f5871f; } 57 | 58 | /* a variable name */ 59 | .var { 60 | color: #c82829; } 61 | 62 | /* a function name */ 63 | .fun { 64 | color: #4271ae; } } 65 | /* Use higher contrast and text-weight for printable form. */ 66 | @media print, projection { 67 | .str { 68 | color: #060; } 69 | 70 | .kwd { 71 | color: #006; 72 | font-weight: bold; } 73 | 74 | .com { 75 | color: #600; 76 | font-style: italic; } 77 | 78 | .typ { 79 | color: #404; 80 | font-weight: bold; } 81 | 82 | .lit { 83 | color: #044; } 84 | 85 | .pun, .opn, .clo { 86 | color: #440; } 87 | 88 | .tag { 89 | color: #006; 90 | font-weight: bold; } 91 | 92 | .atn { 93 | color: #404; } 94 | 95 | .atv { 96 | color: #060; } } 97 | /* Style */ 98 | /* 99 | pre.prettyprint { 100 | background: white; 101 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 102 | font-size: 12px; 103 | line-height: 1.5; 104 | border: 1px solid #ccc; 105 | padding: 10px; } 106 | */ 107 | 108 | /* Specify class=linenums on a pre to get line numbering */ 109 | ol.linenums { 110 | margin-top: 0; 111 | margin-bottom: 0; } 112 | 113 | /* IE indents via margin-left */ 114 | li.L0, 115 | li.L1, 116 | li.L2, 117 | li.L3, 118 | li.L4, 119 | li.L5, 120 | li.L6, 121 | li.L7, 122 | li.L8, 123 | li.L9 { 124 | /* */ } 125 | 126 | /* Alternate shading for lines */ 127 | li.L1, 128 | li.L3, 129 | li.L5, 130 | li.L7, 131 | li.L9 { 132 | /* */ } 133 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DynamicQuillTools 2 | 3 | DynamicQuillTools is a library that allows you to dynamically add or remove new custom elements to/from a Quill Editor's toolbar. For instance a button or a drop down menu. 4 | 5 | ## Screenshot 6 | 7 | In this screenshot you can see a custom drop down menu and a custom button. 8 | 9 | ![screenshot](./screenshot.png) 10 | 11 | ## Live Demo 12 | https://t-vk.github.io/DynamicQuillTools/example.html 13 | 14 | ## CDN 15 | If you prefer CDNs you can include the library on your website like this: 16 | ``` HTML 17 | 18 | ``` 19 | 20 | ## Examples 21 | For a full example take a look at [example.html](./example.html). 22 | 23 | ### Very Basic Example 24 | 25 | ``` JavaScript 26 | const myButton = new QuillToolbarButton({ 27 | icon: ` ` 28 | }) 29 | myButton.onClick = function(quill) { 30 | alert('You just clicked the button!') 31 | } 32 | myButton.attach(quill) // Add the custom button to the quill editor 33 | ``` 34 | 35 | ### Adding a Custom Button 36 | 37 | ``` JavaScript 38 | const myButton = new QuillToolbarButton({ 39 | icon: ` ` 40 | }) 41 | myButton.onClick = function(quill) { 42 | // Do whatever you want here. You could use this.getValue() or this.setValue() if you wanted. 43 | 44 | // For example, get the selected text and convert it to uppercase: 45 | const { index, length } = quill.selection.savedRange 46 | const selectedText = quill.getText(index, length) 47 | const newText = selectedText.toUpperCase() 48 | quill.deleteText(index, length) 49 | quill.insertText(index, newText) 50 | quill.setSelection(index, newText.length) 51 | } 52 | myButton.attach(quill) 53 | ``` 54 | 55 | ### Adding a Custom Drop Down Menu 56 | 57 | ``` JavaScript 58 | const dropDownItems = { 59 | 'Mike Smith': 'mike.smith@gmail.com', 60 | 'Jonathan Dyke': 'jonathan.dyke@yahoo.com', 61 | 'Max Anderson': 'max.anderson@gmail.com' 62 | } 63 | 64 | const myDropDown = new QuillToolbarDropDown({ 65 | label: "Email Addresses", 66 | rememberSelection: false 67 | }) 68 | 69 | myDropDown.setItems(dropDownItems) 70 | 71 | myDropDown.onSelect = function(label, value, quill) { 72 | // Do whatever you want with the new dropdown selection here 73 | 74 | // For example, insert the value of the dropdown selection: 75 | const { index, length } = quill.selection.savedRange 76 | quill.deleteText(index, length) 77 | quill.insertText(index, value) 78 | quill.setSelection(index + value.length) 79 | } 80 | 81 | myDropDown.attach(quill) 82 | ``` 83 | 84 | 85 | ## API Documentation 86 | https://t-vk.github.io/DynamicQuillTools/docs 87 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home - Documentation 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
56 | 57 |
58 | 59 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /DynamicQuillTools.js: -------------------------------------------------------------------------------- 1 | /** @class Abstract class representing a tool for a Quill Editor toolbar. */ 2 | class QuillToolbarItem { 3 | constructor(options) { 4 | const me = this 5 | me.options = options 6 | 7 | me.qlFormatsEl = document.createElement("span") 8 | me.qlFormatsEl.className = "ql-formats" 9 | } 10 | /** 11 | * Attaches this tool to the given Quill Editor instance. 12 | * 13 | * @param {Quill} quill - The Quill Editor instance that this tool should get added to. 14 | */ 15 | attach(quill) { 16 | const me = this 17 | me.quill = quill 18 | me.toolbar = quill.getModule('toolbar') 19 | me.toolbarEl = me.toolbar.container 20 | me.toolbarEl.appendChild(me.qlFormatsEl) 21 | } 22 | /** 23 | * Detaches this tool from the given Quill Editor instance. 24 | * 25 | * @param {Quill} quill - The Quill Editor instance that this tool should get added to. 26 | */ 27 | detach(quill) { 28 | const me = this 29 | me.toolbarEl.removeChild(me.qlFormatsEl) 30 | } 31 | /** 32 | * Calculate the width of text. 33 | * 34 | * @param {string} text - The text of which the length should be calculated. 35 | * @param {string} [font="500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"] - The font css that shuold be applied to the text before calculating the width. 36 | */ 37 | _getTextWidth(text, font="500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") { 38 | const canvas = this._getTextWidth.canvas || (this._getTextWidth.canvas = document.createElement("canvas")) 39 | const context = canvas.getContext("2d") 40 | context.font = font 41 | const metrics = context.measureText(text) 42 | return metrics.width 43 | } 44 | /** 45 | * Add a global css rule to the document. 46 | * 47 | * @param {string} cssRule - CSS rules 48 | */ 49 | _addCssRule(cssRule) { 50 | const style = document.createElement("style"); 51 | document.head.appendChild(style); 52 | style.sheet.insertRule(cssRule, 0) 53 | } 54 | /** 55 | * Generate a random ID. 56 | * 57 | * @returns {string} random 10 digit ID 58 | */ 59 | _generateId() { 60 | return Math.random().toString().substr(2, 10) 61 | } 62 | } 63 | 64 | 65 | /** @class Class representing a dropdown tool for a Quill Editor toolbar. */ 66 | class QuillToolbarDropDown extends QuillToolbarItem { 67 | /** 68 | * Creates an instance of QuillToolbarDropDown. 69 | * 70 | * @constructor 71 | * @param {object} [options] - The options/settings for this QuillToolbarDropDown. 72 | * @param {string} [options.id=`dropdown-${random10digitNumber}`] - The id of the quill tool. 73 | * @param {string} [options.label=""] - The default label that is being displayed before making a selection. 74 | * @param {boolean} [options.rememberSelection=true] - Automatically change the label to the current selection. 75 | * @param {object} [options.items={}] - The default items this dropdown will have. Needs to be a key-value-object (key=visible label; value=actual value). 76 | */ 77 | constructor(options) { 78 | super(options) 79 | const me = this 80 | 81 | me.id = me.options.id || `dropdown-${me._generateId()}` 82 | 83 | const qlPicker = document.createElement("span") 84 | qlPicker.className = `ql-${me.id} ql-picker` 85 | me.qlFormatsEl.appendChild(qlPicker) 86 | 87 | const qlPickerLabel = document.createElement("span") 88 | qlPickerLabel.className = "ql-picker-label" 89 | qlPicker.appendChild(qlPickerLabel) 90 | qlPickerLabel.addEventListener('click', function(e) { 91 | qlPicker.classList.toggle('ql-expanded') 92 | 93 | }) 94 | window.addEventListener('click', function(e){ 95 | if (!qlPicker.contains(e.target)){ 96 | qlPicker.classList.remove('ql-expanded') 97 | } 98 | }) 99 | 100 | const qlPickerOptions = document.createElement("span") 101 | qlPickerOptions.className = "ql-picker-options" 102 | qlPicker.appendChild(qlPickerOptions) 103 | 104 | me.dropDownEl = qlPicker 105 | me.dropDownPickerEl = me.dropDownEl.querySelector('.ql-picker-options') 106 | me.dropDownPickerLabelEl = me.dropDownEl.querySelector('.ql-picker-label') 107 | me.dropDownPickerLabelEl.innerHTML = ` ` 108 | 109 | me.setLabel(me.options.label || "") 110 | me.setItems(me.options.items || {}) 111 | 112 | me._addCssRule(` 113 | .ql-snow .ql-picker.ql-${me.id} .ql-picker-label::before, .ql-${me.id} .ql-picker.ql-size .ql-picker-item::before { 114 | content: attr(data-label); 115 | } 116 | `) 117 | } 118 | /** 119 | * Set the items for this dropdown tool. 120 | * 121 | * @param {object} items - Needs to be a key-value-object (key=visible label; value=actual value). 122 | */ 123 | setItems(items) { 124 | const me = this 125 | for (const [label,value] of Object.entries(items)) { 126 | const newItemEl = document.createElement("span") 127 | newItemEl.className = "ql-picker-item" 128 | newItemEl.innerHTML = label 129 | newItemEl.setAttribute('data-value', value) 130 | newItemEl.onclick = function(e) { 131 | me.dropDownEl.classList.remove('ql-expanded') 132 | if (me.options.rememberSelection) 133 | me.setLabel(label) 134 | if (me.onSelect) 135 | me.onSelect(label, value, me.quill) 136 | } 137 | me.dropDownPickerEl.appendChild(newItemEl) 138 | } 139 | } 140 | /** 141 | * Set the label for this dropdown tool and automatically adjust the width to fit the label. 142 | * 143 | * @param {String} newLabel - The new label that should be set. 144 | */ 145 | setLabel(newLabel) { 146 | const me = this 147 | const requiredWidth = `${me._getTextWidth(newLabel)+30}px` 148 | me.dropDownPickerLabelEl.style.width = requiredWidth 149 | me.dropDownPickerLabelEl.setAttribute('data-label', newLabel) 150 | } 151 | /** 152 | * A callback that gets called automatically when the dropdown selection changes. This callback is expected to be overwritten. 153 | * 154 | * @param {string} label - The label of the newly selected item. 155 | * @param {string} value - The value of the newly selected item. 156 | * @param {Quill} quill - The quill instance the dropdown tool is attached to. 157 | */ 158 | onSelect(label, value, quill) { 159 | 160 | } 161 | } 162 | 163 | 164 | /** @class Class representing a button tool for a Quill Editor toolbar. */ 165 | class QuillToolbarButton extends QuillToolbarItem { 166 | /** 167 | * Creates an instance of QuillToolbarButton. 168 | * 169 | * @constructor 170 | * @param {object} [options] - The options/settings for this QuillToolbarButton. 171 | * @param {string} [options.id=`button-${random10digitNumber}`] - The id of the quill tool. 172 | * @param {string} [options.value] - The default hidden value of the button. 173 | * @param {string} options.icon - The default icon this button tool will have. 174 | */ 175 | constructor(options) { 176 | super(options) 177 | const me = this 178 | 179 | me.id = me.options.id || `button-${me._generateId()}` 180 | 181 | me.qlButton = document.createElement("button") 182 | me.qlButton.className = `ql-${me.id}` 183 | me.setValue(me.options.value) 184 | me.setIcon(me.options.icon) 185 | me.qlButton.onclick = function() { 186 | me.onClick(me.quill) 187 | } 188 | me.qlFormatsEl.appendChild(me.qlButton) 189 | } 190 | /** 191 | * Set the icon for this button tool. 192 | * 193 | * @param {string} newLabel - The or html tag to use as an icon. (Make sure it's 18x18 in size.) 194 | */ 195 | setIcon(imageHtml) { 196 | const me = this 197 | me.qlButton.innerHTML = imageHtml 198 | } 199 | /** 200 | * Set the hidden value of this button tool. 201 | * 202 | * @param {string} newLabel - The or html tag to use as an icon. (Make sure it's 18x18 in size.) 203 | */ 204 | setValue(value) { 205 | const me = this 206 | me.qlButton.value = value 207 | } 208 | /** 209 | * Set the hidden value of this button tool. 210 | * 211 | * @param {string} newLabel - The or html tag to use as an icon. (Make sure it's 18x18 in size.) 212 | */ 213 | getValue() { 214 | const me = this 215 | return me.qlButton.value 216 | } 217 | /** 218 | * A callback that gets called automatically when the button is clicked, tapped or triggered witht he keyboard etc. This callback is expected to be overwritten. 219 | * 220 | * @param {Quill} quill - The quill instance the dropdown tool is attached to. 221 | */ 222 | onClick(button, quill) { 223 | 224 | } 225 | } -------------------------------------------------------------------------------- /docs/scripts/prettify/Apache-License-2.0.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | END OF TERMS AND CONDITIONS 178 | 179 | APPENDIX: How to apply the Apache License to your work. 180 | 181 | To apply the Apache License to your work, attach the following 182 | boilerplate notice, with the fields enclosed by brackets "[]" 183 | replaced with your own identifying information. (Don't include 184 | the brackets!) The text should be enclosed in the appropriate 185 | comment syntax for the file format. We also recommend that a 186 | file or class name and description of purpose be included on the 187 | same "printed page" as the copyright notice for easier 188 | identification within third-party archives. 189 | 190 | Copyright [yyyy] [name of copyright owner] 191 | 192 | Licensed under the Apache License, Version 2.0 (the "License"); 193 | you may not use this file except in compliance with the License. 194 | You may obtain a copy of the License at 195 | 196 | http://www.apache.org/licenses/LICENSE-2.0 197 | 198 | Unless required by applicable law or agreed to in writing, software 199 | distributed under the License is distributed on an "AS IS" BASIS, 200 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 201 | See the License for the specific language governing permissions and 202 | limitations under the License. 203 | -------------------------------------------------------------------------------- /docs/scripts/prettify/prettify.js: -------------------------------------------------------------------------------- 1 | var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; 2 | (function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= 3 | [],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), 9 | l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, 10 | q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, 11 | q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, 12 | "");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), 13 | a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} 14 | for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], 18 | "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], 19 | H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], 20 | J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ 21 | I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), 22 | ["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", 23 | /^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), 24 | ["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", 25 | hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= 26 | !k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p 2 | 3 | 4 | 5 | 6 | CustomQuillTools.js - Documentation 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 29 | 30 |
31 | 32 |

CustomQuillTools.js

33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 |
42 | 
/** @class Abstract class representing a tool for a Quill Editor toolbar. */
 43 | class QuillToolbarItem {
 44 |     constructor(options) {
 45 |         const me = this
 46 |         me.options = options
 47 | 
 48 |         me.qlFormatsEl = document.createElement("span")
 49 |         me.qlFormatsEl.className = "ql-formats"
 50 |     }
 51 |     /**
 52 |      * Attaches this tool to the given Quill Editor instance.
 53 |      *
 54 |      * @param {Quill} quill - The Quill Editor instance that this tool should get added to.
 55 |      */
 56 |     attach(quill) {
 57 |         const me = this
 58 |         me.quill = quill
 59 |         me.toolbar = quill.getModule('toolbar')
 60 |         me.toolbarEl = me.toolbar.container
 61 |         me.toolbarEl.appendChild(me.qlFormatsEl)
 62 |     }
 63 |     /**
 64 |      * Detaches this tool from the given Quill Editor instance.
 65 |      *
 66 |      * @param {Quill} quill - The Quill Editor instance that this tool should get added to.
 67 |      */
 68 |     detach(quill) {
 69 |         const me = this
 70 |         me.toolbarEl.removeChild(me.qlFormatsEl)
 71 |     }
 72 |     /**
 73 |      * Calculate the width of text.
 74 |      *
 75 |      * @param {string} text - The text of which the length should be calculated.
 76 |      * @param {string} [font="500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"] - The font css that shuold be applied to the text before calculating the width.
 77 |      */
 78 |     _getTextWidth(text, font="500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif") {
 79 |         const canvas = this._getTextWidth.canvas || (this._getTextWidth.canvas = document.createElement("canvas"))
 80 |         const context = canvas.getContext("2d")
 81 |         context.font = font
 82 |         const metrics = context.measureText(text)
 83 |         return metrics.width
 84 |     }
 85 |     /**
 86 |      * Add a global css rule to the document.
 87 |      *
 88 |      * @param {string} cssRule - CSS rules
 89 |      */
 90 |     _addCssRule(cssRule) {
 91 |         const style = document.createElement("style");
 92 |         document.head.appendChild(style);
 93 |         style.sheet.insertRule(cssRule, 0)
 94 |     }
 95 |     /**
 96 |      * Generate a random ID.
 97 |      *
 98 |      * @returns {string} random 10 digit ID
 99 |      */
100 |     _generateId() {
101 |         return Math.random().toString().substr(2, 10)
102 |     }
103 | }
104 | 
105 | 
106 | /** @class Class representing a dropdown tool for a Quill Editor toolbar. */
107 | class QuillToolbarDropDown extends QuillToolbarItem {
108 |     /**
109 |      * Creates an instance of QuillToolbarDropDown.
110 |      *
111 |      * @constructor
112 |      * @param {object} [options] - The options/settings for this QuillToolbarDropDown.
113 |      * @param {string} [options.id=`dropdown-${random10digitNumber}`] - The id of the quill tool.
114 |      * @param {string} [options.label=""] - The default label that is being displayed before making a selection.
115 |      * @param {boolean} [options.rememberSelection=true] - Automatically change the label to the current selection.
116 |      * @param {object} [options.items={}] - The default items this dropdown will have. Needs to be a key-value-object (key=visible label; value=actual value).
117 |      */
118 |     constructor(options) {
119 |         super(options)
120 |         const me = this
121 | 
122 |         me.id = me.options.id || `dropdown-${me._generateId()}`
123 | 
124 |         const qlPicker = document.createElement("span")
125 |         qlPicker.className = `ql-${me.id} ql-picker`
126 |         me.qlFormatsEl.appendChild(qlPicker)
127 | 
128 |         const qlPickerLabel = document.createElement("span")
129 |         qlPickerLabel.className = "ql-picker-label"
130 |         qlPicker.appendChild(qlPickerLabel)
131 |         qlPickerLabel.addEventListener('click', function(e) {
132 |             qlPicker.classList.toggle('ql-expanded')
133 | 
134 |         })
135 |         window.addEventListener('click', function(e){
136 |             if (!qlPicker.contains(e.target)){
137 |                 qlPicker.classList.remove('ql-expanded')
138 |             }
139 |         })
140 | 
141 |         const qlPickerOptions = document.createElement("span")
142 |         qlPickerOptions.className = "ql-picker-options"
143 |         qlPicker.appendChild(qlPickerOptions)
144 | 
145 |         me.dropDownEl = qlPicker
146 |         me.dropDownPickerEl = me.dropDownEl.querySelector('.ql-picker-options')
147 |         me.dropDownPickerLabelEl = me.dropDownEl.querySelector('.ql-picker-label')
148 |         me.dropDownPickerLabelEl.innerHTML = `<svg viewBox="0 0 18 18"> <polygon class="ql-stroke" points="7 11 9 13 11 11 7 11"></polygon> <polygon class="ql-stroke" points="7 7 9 5 11 7 7 7"></polygon> </svg>`
149 | 
150 |         me.setLabel(me.options.label || "")
151 |         me.setItems(me.options.items || {})
152 | 
153 |         me._addCssRule(`
154 |             .ql-snow .ql-picker.ql-${me.id} .ql-picker-label::before, .ql-${me.id} .ql-picker.ql-size .ql-picker-item::before {
155 |                 content: attr(data-label);
156 |             }
157 |         `)
158 |     }
159 |     /**
160 |      * Set the items for this dropdown tool.
161 |      *
162 |      * @param {object} items - Needs to be a key-value-object (key=visible label; value=actual value).
163 |      */
164 |     setItems(items) {
165 |         const me = this
166 |         for (const [label,value] of Object.entries(items)) {
167 |             const newItemEl = document.createElement("span")
168 |             newItemEl.className = "ql-picker-item"
169 |             newItemEl.innerHTML = label
170 |             newItemEl.setAttribute('data-value', value)
171 |             newItemEl.onclick = function(e) {
172 |                 me.dropDownEl.classList.remove('ql-expanded')
173 |                 if (me.options.rememberSelection)
174 |                     me.setLabel(label)
175 |                 if (me.onSelect)
176 |                     me.onSelect(label, value, me.quill)
177 |             }
178 |             me.dropDownPickerEl.appendChild(newItemEl)
179 |         }
180 |     }
181 |     /**
182 |      * Set the label for this dropdown tool and automatically adjust the width to fit the label.
183 |      *
184 |      * @param {String} newLabel - The new label that should be set.
185 |      */
186 |     setLabel(newLabel) {
187 |         const me = this
188 |         const requiredWidth = `${me._getTextWidth(newLabel)+30}px`
189 |         me.dropDownPickerLabelEl.style.width = requiredWidth
190 |         me.dropDownPickerLabelEl.setAttribute('data-label', newLabel)
191 |     }
192 |     /**
193 |      * A callback that gets called automatically when the dropdown selection changes. This callback is expected to be overwritten.
194 |      *
195 |      * @param {string} label - The label of the newly selected item.
196 |      * @param {string} value - The value of the newly selected item.
197 |      * @param {Quill} quill - The quill instance the dropdown tool is attached to.
198 |      */
199 |     onSelect(label, value, quill) {
200 | 
201 |     }
202 | }
203 | 
204 | 
205 | /** @class Class representing a button tool for a Quill Editor toolbar. */
206 | class QuillToolbarButton extends QuillToolbarItem {
207 |     /**
208 |      * Creates an instance of QuillToolbarButton.
209 |      *
210 |      * @constructor
211 |      * @param {object} [options] - The options/settings for this QuillToolbarButton.
212 |      * @param {string} [options.id=`button-${random10digitNumber}`] - The id of the quill tool.
213 |      * @param {string} [options.value] - The default hidden value of the button.
214 |      * @param {string} options.icon - The default icon this button tool will have.
215 |      */
216 |     constructor(options) {
217 |         super(options)
218 |         const me = this
219 | 
220 |         me.id = me.options.id || `button-${me._generateId()}`
221 | 
222 |         me.qlButton = document.createElement("button")
223 |         me.qlButton.className = `ql-${me.id}`
224 |         me.setValue(me.options.value)
225 |         me.setIcon(me.options.icon)
226 |         me.qlButton.onclick = function() {
227 |             me.onClick(me.quill)
228 |         }
229 |         me.qlFormatsEl.appendChild(me.qlButton)
230 |     }
231 |     /**
232 |      * Set the icon for this button tool.
233 |      *
234 |      * @param {string} newLabel - The <svg> or <img> html tag to use as an icon. (Make sure it's 18x18 in size.)
235 |      */
236 |     setIcon(imageHtml) {
237 |         const me = this
238 |         me.qlButton.innerHTML = imageHtml
239 |     }
240 |     /**
241 |      * Set the hidden value of this button tool.
242 |      *
243 |      * @param {string} newLabel - The <svg> or <img> html tag to use as an icon. (Make sure it's 18x18 in size.)
244 |      */
245 |     setValue(value) {
246 |         const me = this
247 |         me.qlButton.value = value
248 |     }
249 |     /**
250 |      * Set the hidden value of this button tool.
251 |      *
252 |      * @param {string} newLabel - The <svg> or <img> html tag to use as an icon. (Make sure it's 18x18 in size.)
253 |      */
254 |     getValue() {
255 |         const me = this
256 |         return me.qlButton.value
257 |     }
258 |     /**
259 |      * A callback that gets called automatically when the button is clicked, tapped or triggered witht he keyboard etc. This callback is expected to be overwritten.
260 |      *
261 |      * @param {Quill} quill - The quill instance the dropdown tool is attached to.
262 |      */
263 |     onClick(button, quill) {
264 | 
265 |     }
266 | }
267 |
268 |
269 | 270 | 271 | 272 | 273 |
274 | 275 |
276 | 277 |
278 | Generated by JSDoc 3.6.3 on Tue Nov 19 2019 16:39:24 GMT+0100 (Central European Standard Time) using the Minami theme. 279 |
280 | 281 | 282 | 283 | 284 | 285 | -------------------------------------------------------------------------------- /docs/styles/jsdoc-default.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,500i,500,600,600i|Roboto); 2 | 3 | * { 4 | box-sizing: border-box 5 | } 6 | 7 | html, body { 8 | height: 100%; 9 | width: 100%; 10 | } 11 | 12 | body { 13 | color: #4d4e53; 14 | background-color: white; 15 | margin: 0 auto; 16 | padding: 0; 17 | font-family: 'Source Sans Pro', Helvetica, sans-serif; 18 | font-size: 16px; 19 | line-height: 160%; 20 | } 21 | 22 | a, 23 | a:active { 24 | color: #0095dd; 25 | text-decoration: none; 26 | } 27 | 28 | a:hover { 29 | text-decoration: underline 30 | } 31 | 32 | p, ul, ol, blockquote { 33 | margin-bottom: 1em; 34 | } 35 | 36 | h1, h2, h3, h4, h5, h6 { 37 | font-family: 'Roboto', sans-serif; 38 | } 39 | 40 | h1, h2, h3, h4, h5, h6 { 41 | color: #000; 42 | font-weight: 400; 43 | margin: 0; 44 | } 45 | 46 | h1 { 47 | font-weight: 300; 48 | font-size: 48px; 49 | margin: 1em 0 .5em; 50 | } 51 | 52 | h1.page-title {margin-bottom: 10px;font-size: 34px;font-weight: 300;border-bottom: solid 2px #ddd;padding: .5em 0 .5em;margin-top: 0;} 53 | 54 | h2 { 55 | font-size: 32px; 56 | margin: 1.2em 0 .8em; 57 | font-weight: bold; 58 | } 59 | 60 | h3 { 61 | /* margin-top: 1em; */ 62 | /* margin-bottom: 16px; */ 63 | /* font-weight: bold; */ 64 | padding: 0; 65 | margin: 1em 0 .6em; 66 | font-size: 28px; 67 | /* border-bottom: 1px solid #eee; */ 68 | /* padding-bottom: 15px; */ 69 | } 70 | 71 | h4 { 72 | font-size: 18px; 73 | margin: 1em 0 .2em; 74 | color: #4d4e53; 75 | /* border-bottom: 1px solid #eee; */ 76 | padding-bottom: 8px; 77 | } 78 | 79 | h5, .container-overview .subsection-title { 80 | font-size: 120%; 81 | /* letter-spacing: -0.01em; */ 82 | margin: 20px 0 5px; 83 | } 84 | 85 | h6 { 86 | font-size: 100%; 87 | letter-spacing: -0.01em; 88 | margin: 6px 0 3px 0; 89 | font-style: italic; 90 | } 91 | 92 | tt, code, kbd, samp { 93 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 94 | background: #f4f4f4; 95 | padding: 1px 5px; 96 | border-radius: 5px; 97 | font-size: 14px; 98 | } 99 | 100 | blockquote { 101 | display: block; 102 | border-left: 4px solid #eee; 103 | margin: 0; 104 | padding-left: 1em; 105 | color: #888; 106 | } 107 | 108 | .class-description { 109 | font-size: 130%; 110 | line-height: 140%; 111 | margin-bottom: 1em; 112 | margin-top: 1em; 113 | } 114 | 115 | .class-description:empty { 116 | margin: 0 117 | } 118 | 119 | /** Container **/ 120 | #main { 121 | float: right; 122 | min-width: 360px; 123 | width: calc(100% - 250px); 124 | padding: 0 30px 20px 30px; 125 | } 126 | 127 | header { 128 | display: block 129 | } 130 | 131 | section { 132 | display: block; 133 | background-color: #fff; 134 | padding: 0; 135 | } 136 | 137 | .variation { 138 | display: none 139 | } 140 | 141 | .signature-attributes { 142 | font-size: 60%; 143 | color: #aaa; 144 | font-style: italic; 145 | font-weight: lighter; 146 | } 147 | 148 | /** Readme **/ 149 | 150 | .readme { 151 | font-size: 16px; 152 | } 153 | 154 | .readme h1, 155 | .readme h2, 156 | .readme h3, 157 | .readme h4, 158 | .readme h5 { 159 | margin-top: 1em; 160 | margin-bottom: 16px; 161 | font-weight: bold; 162 | padding: 0; 163 | } 164 | 165 | .readme h1 { 166 | font-size: 2em; 167 | padding-bottom: 0.3em; 168 | } 169 | 170 | .readme h2 { 171 | font-size: 1.75em; 172 | padding-bottom: 0.3em; 173 | } 174 | 175 | .readme h3 { 176 | font-size: 1.5em; 177 | background-color: transparent; 178 | } 179 | 180 | .readme h4 { 181 | font-size: 1.25em; 182 | } 183 | 184 | .readme h5 { 185 | font-size: 1em; 186 | } 187 | 188 | .readme img { 189 | max-width: 100%; 190 | } 191 | 192 | .readme ul, .readme ol { 193 | padding-left: 2em; 194 | } 195 | 196 | .readme pre > code { 197 | font-size: 0.85em; 198 | } 199 | 200 | .readme table { 201 | margin-bottom: 1em; 202 | border-collapse: collapse; 203 | border-spacing: 0; 204 | } 205 | 206 | .readme table tr { 207 | background-color: #fff; 208 | border-top: 1px solid #ccc; 209 | } 210 | 211 | .readme table th, 212 | .readme table td { 213 | padding: 6px 13px; 214 | border: 1px solid #ddd; 215 | } 216 | 217 | .readme table tr:nth-child(2n) { 218 | background-color: #f8f8f8; 219 | } 220 | 221 | /** Nav **/ 222 | nav { 223 | float: left; 224 | display: block; 225 | width: 250px; 226 | background: #fff; 227 | overflow: auto; 228 | position: fixed; 229 | height: 100%; 230 | padding: 10px; 231 | border-right: 1px solid #eee; 232 | /* box-shadow: 0 0 3px rgba(0,0,0,0.1); */ 233 | } 234 | 235 | nav li { 236 | list-style: none; 237 | padding: 0; 238 | margin: 0; 239 | } 240 | 241 | .nav-heading { 242 | margin-top: 10px; 243 | font-weight: bold; 244 | } 245 | 246 | .nav-heading a { 247 | color: #888; 248 | font-size: 14px; 249 | display: inline-block; 250 | } 251 | 252 | .nav-item-type { 253 | /* margin-left: 5px; */ 254 | width: 18px; 255 | height: 18px; 256 | display: inline-block; 257 | text-align: center; 258 | border-radius: 0.2em; 259 | margin-right: 5px; 260 | font-weight: bold; 261 | line-height: 20px; 262 | font-size: 13px; 263 | } 264 | 265 | .type-function { 266 | background: #B3E5FC; 267 | color: #0288D1; 268 | } 269 | 270 | .type-class { 271 | background: #D1C4E9; 272 | color: #4527A0; 273 | } 274 | 275 | .type-member { 276 | background: #C8E6C9; 277 | color: #388E3C; 278 | } 279 | 280 | .type-module { 281 | background: #E1BEE7; 282 | color: #7B1FA2; 283 | } 284 | 285 | 286 | /** Footer **/ 287 | footer { 288 | color: hsl(0, 0%, 28%); 289 | margin-left: 250px; 290 | display: block; 291 | padding: 30px; 292 | font-style: italic; 293 | font-size: 90%; 294 | border-top: 1px solid #eee; 295 | } 296 | 297 | .ancestors { 298 | color: #999 299 | } 300 | 301 | .ancestors a { 302 | color: #999 !important; 303 | text-decoration: none; 304 | } 305 | 306 | .clear { 307 | clear: both 308 | } 309 | 310 | .important { 311 | font-weight: bold; 312 | color: #950B02; 313 | } 314 | 315 | .yes-def { 316 | text-indent: -1000px 317 | } 318 | 319 | .type-signature { 320 | color: #aaa 321 | } 322 | 323 | .name, .signature { 324 | font-family: Consolas, Monaco, 'Andale Mono', monospace 325 | } 326 | 327 | .details { 328 | margin-top: 14px; 329 | border-left: 2px solid #DDD; 330 | line-height: 30px; 331 | } 332 | 333 | .details dt { 334 | width: 120px; 335 | float: left; 336 | padding-left: 10px; 337 | } 338 | 339 | .details dd { 340 | margin-left: 70px 341 | } 342 | 343 | .details ul { 344 | margin: 0 345 | } 346 | 347 | .details ul { 348 | list-style-type: none 349 | } 350 | 351 | .details li { 352 | margin-left: 30px 353 | } 354 | 355 | .details pre.prettyprint { 356 | margin: 0 357 | } 358 | 359 | .details .object-value { 360 | padding-top: 0 361 | } 362 | 363 | .description { 364 | margin-bottom: 1em; 365 | margin-top: 1em; 366 | } 367 | 368 | .code-caption { 369 | font-style: italic; 370 | font-size: 107%; 371 | margin: 0; 372 | } 373 | 374 | .prettyprint { 375 | font-size: 13px; 376 | border: 1px solid #ddd; 377 | border-radius: 3px; 378 | box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.05); 379 | overflow: auto; 380 | } 381 | 382 | .prettyprint.source { 383 | width: inherit 384 | } 385 | 386 | .prettyprint code { 387 | font-size: 12px; 388 | line-height: 18px; 389 | display: block; 390 | background-color: #fff; 391 | color: #4D4E53; 392 | } 393 | 394 | .prettyprint code:empty:before { 395 | content: ''; 396 | } 397 | 398 | .prettyprint > code { 399 | padding: 15px 400 | } 401 | 402 | .prettyprint .linenums code { 403 | padding: 0 15px 404 | } 405 | 406 | .prettyprint .linenums li:first-of-type code { 407 | padding-top: 15px 408 | } 409 | 410 | .prettyprint code span.line { 411 | display: inline-block 412 | } 413 | 414 | .prettyprint.linenums { 415 | padding-left: 70px; 416 | -webkit-user-select: none; 417 | -moz-user-select: none; 418 | -ms-user-select: none; 419 | user-select: none; 420 | } 421 | 422 | .prettyprint.linenums ol { 423 | padding-left: 0 424 | } 425 | 426 | .prettyprint.linenums li { 427 | border-left: 3px #ddd solid 428 | } 429 | 430 | .prettyprint.linenums li.selected, .prettyprint.linenums li.selected * { 431 | background-color: lightyellow 432 | } 433 | 434 | .prettyprint.linenums li * { 435 | -webkit-user-select: text; 436 | -moz-user-select: text; 437 | -ms-user-select: text; 438 | user-select: text; 439 | } 440 | 441 | .params, .props { 442 | border-spacing: 0; 443 | border: 1px solid #ddd; 444 | border-collapse: collapse; 445 | border-radius: 3px; 446 | box-shadow: 0 1px 3px rgba(0,0,0,0.1); 447 | width: 100%; 448 | font-size: 14px; 449 | /* margin-left: 15px; */ 450 | } 451 | 452 | .params .name, .props .name, .name code { 453 | color: #4D4E53; 454 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 455 | font-size: 100%; 456 | } 457 | 458 | .params td, .params th, .props td, .props th { 459 | margin: 0px; 460 | text-align: left; 461 | vertical-align: top; 462 | padding: 10px; 463 | display: table-cell; 464 | } 465 | 466 | .params td { 467 | border-top: 1px solid #eee 468 | } 469 | 470 | .params thead tr, .props thead tr { 471 | background-color: #fff; 472 | font-weight: bold; 473 | } 474 | 475 | .params .params thead tr, .props .props thead tr { 476 | background-color: #fff; 477 | font-weight: bold; 478 | } 479 | 480 | .params td.description > p:first-child, .props td.description > p:first-child { 481 | margin-top: 0; 482 | padding-top: 0; 483 | } 484 | 485 | .params td.description > p:last-child, .props td.description > p:last-child { 486 | margin-bottom: 0; 487 | padding-bottom: 0; 488 | } 489 | 490 | dl.param-type { 491 | /* border-bottom: 1px solid hsl(0, 0%, 87%); */ 492 | margin: 0; 493 | padding: 0; 494 | font-size: 16px; 495 | } 496 | 497 | .param-type dt, .param-type dd { 498 | display: inline-block 499 | } 500 | 501 | .param-type dd { 502 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 503 | display: inline-block; 504 | padding: 0; 505 | margin: 0; 506 | font-size: 14px; 507 | } 508 | 509 | .disabled { 510 | color: #454545 511 | } 512 | 513 | /* navicon button */ 514 | .navicon-button { 515 | display: none; 516 | position: relative; 517 | padding: 2.0625rem 1.5rem; 518 | transition: 0.25s; 519 | cursor: pointer; 520 | user-select: none; 521 | opacity: .8; 522 | } 523 | .navicon-button .navicon:before, .navicon-button .navicon:after { 524 | transition: 0.25s; 525 | } 526 | .navicon-button:hover { 527 | transition: 0.5s; 528 | opacity: 1; 529 | } 530 | .navicon-button:hover .navicon:before, .navicon-button:hover .navicon:after { 531 | transition: 0.25s; 532 | } 533 | .navicon-button:hover .navicon:before { 534 | top: .825rem; 535 | } 536 | .navicon-button:hover .navicon:after { 537 | top: -.825rem; 538 | } 539 | 540 | /* navicon */ 541 | .navicon { 542 | position: relative; 543 | width: 2.5em; 544 | height: .3125rem; 545 | background: #000; 546 | transition: 0.3s; 547 | border-radius: 2.5rem; 548 | } 549 | .navicon:before, .navicon:after { 550 | display: block; 551 | content: ""; 552 | height: .3125rem; 553 | width: 2.5rem; 554 | background: #000; 555 | position: absolute; 556 | z-index: -1; 557 | transition: 0.3s 0.25s; 558 | border-radius: 1rem; 559 | } 560 | .navicon:before { 561 | top: .625rem; 562 | } 563 | .navicon:after { 564 | top: -.625rem; 565 | } 566 | 567 | /* open */ 568 | .nav-trigger:checked + label:not(.steps) .navicon:before, 569 | .nav-trigger:checked + label:not(.steps) .navicon:after { 570 | top: 0 !important; 571 | } 572 | 573 | .nav-trigger:checked + label .navicon:before, 574 | .nav-trigger:checked + label .navicon:after { 575 | transition: 0.5s; 576 | } 577 | 578 | /* Minus */ 579 | .nav-trigger:checked + label { 580 | transform: scale(0.75); 581 | } 582 | 583 | /* × and + */ 584 | .nav-trigger:checked + label.plus .navicon, 585 | .nav-trigger:checked + label.x .navicon { 586 | background: transparent; 587 | } 588 | 589 | .nav-trigger:checked + label.plus .navicon:before, 590 | .nav-trigger:checked + label.x .navicon:before { 591 | transform: rotate(-45deg); 592 | background: #FFF; 593 | } 594 | 595 | .nav-trigger:checked + label.plus .navicon:after, 596 | .nav-trigger:checked + label.x .navicon:after { 597 | transform: rotate(45deg); 598 | background: #FFF; 599 | } 600 | 601 | .nav-trigger:checked + label.plus { 602 | transform: scale(0.75) rotate(45deg); 603 | } 604 | 605 | .nav-trigger:checked ~ nav { 606 | left: 0 !important; 607 | } 608 | 609 | .nav-trigger:checked ~ .overlay { 610 | display: block; 611 | } 612 | 613 | .nav-trigger { 614 | position: fixed; 615 | top: 0; 616 | clip: rect(0, 0, 0, 0); 617 | } 618 | 619 | .overlay { 620 | display: none; 621 | position: fixed; 622 | top: 0; 623 | bottom: 0; 624 | left: 0; 625 | right: 0; 626 | width: 100%; 627 | height: 100%; 628 | background: hsla(0, 0%, 0%, 0.5); 629 | z-index: 1; 630 | } 631 | 632 | .section-method { 633 | margin-bottom: 30px; 634 | padding-bottom: 30px; 635 | border-bottom: 1px solid #eee; 636 | } 637 | 638 | @media only screen and (min-width: 320px) and (max-width: 680px) { 639 | body { 640 | overflow-x: hidden; 641 | } 642 | 643 | nav { 644 | background: #FFF; 645 | width: 250px; 646 | height: 100%; 647 | position: fixed; 648 | top: 0; 649 | right: 0; 650 | bottom: 0; 651 | left: -250px; 652 | z-index: 3; 653 | padding: 0 10px; 654 | transition: left 0.2s; 655 | } 656 | 657 | .navicon-button { 658 | display: inline-block; 659 | position: fixed; 660 | top: 1.5em; 661 | right: 0; 662 | z-index: 2; 663 | } 664 | 665 | #main { 666 | width: 100%; 667 | min-width: 360px; 668 | } 669 | 670 | #main h1.page-title { 671 | margin: 1em 0; 672 | } 673 | 674 | #main section { 675 | padding: 0; 676 | } 677 | 678 | footer { 679 | margin-left: 0; 680 | } 681 | } 682 | 683 | @media only print { 684 | nav { 685 | display: none; 686 | } 687 | 688 | #main { 689 | float: none; 690 | width: 100%; 691 | } 692 | } 693 | -------------------------------------------------------------------------------- /docs/QuillToolbarItem.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QuillToolbarItem - Documentation 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 29 | 30 |
31 | 32 |

QuillToolbarItem

33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 |
43 | 44 |

45 | QuillToolbarItem 46 |

47 | 48 |
Abstract class representing a tool for a Quill Editor toolbar.
49 | 50 | 51 |
52 | 53 |
54 |
55 | 56 | 57 |
58 | 59 | 60 |

Constructor

61 | 62 | 63 |

new QuillToolbarItem()

64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
Source:
101 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 |
136 | 137 |
138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 |

Methods

153 | 154 | 155 | 156 |
157 | 158 | 159 | 160 |

_addCssRule(cssRule)

161 | 162 | 163 | 164 | 165 | 166 |
167 | Add a global css rule to the document. 168 |
169 | 170 | 171 | 172 | 173 | 174 |
175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 |
Source:
202 |
205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 |
213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 |
Parameters:
223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 258 | 259 | 260 | 261 | 262 | 263 | 267 | 268 | 269 | 270 | 271 |
NameTypeDescription
cssRule 251 | 252 | 253 | string 254 | 255 | 256 | 257 | 264 | CSS rules 265 | 266 |
272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 |
289 | 290 | 291 |
292 | 293 | 294 | 295 |

_generateId() → {string}

296 | 297 | 298 | 299 | 300 | 301 |
302 | Generate a random ID. 303 |
304 | 305 | 306 | 307 | 308 | 309 |
310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 |
Source:
337 |
340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 |
348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 |
370 |
Returns:
371 | 372 | 373 | 374 |
375 |
376 | Type: 377 |
378 |
379 | 380 | string 381 | 382 | 383 |
384 |
385 | 386 | 387 |
388 | random 10 digit ID 389 |
390 | 391 | 392 |
393 | 394 | 395 | 396 |
397 | 398 | 399 |
400 | 401 | 402 | 403 |

_getTextWidth(text, fontopt)

404 | 405 | 406 | 407 | 408 | 409 |
410 | Calculate the width of text. 411 |
412 | 413 | 414 | 415 | 416 | 417 |
418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 |
Source:
445 |
448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 |
456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 |
Parameters:
466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 505 | 506 | 507 | 514 | 515 | 516 | 517 | 520 | 521 | 522 | 526 | 527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 543 | 544 | 545 | 554 | 555 | 556 | 557 | 562 | 563 | 564 | 568 | 569 | 570 | 571 | 572 |
NameTypeAttributesDefaultDescription
text 498 | 499 | 500 | string 501 | 502 | 503 | 504 | 508 | 509 | 510 | 511 | 512 | 513 | 518 | 519 | 523 | The text of which the length should be calculated. 524 | 525 |
font 536 | 537 | 538 | string 539 | 540 | 541 | 542 | 546 | 547 | <optional>
548 | 549 | 550 | 551 | 552 | 553 | 		558 | 559 | "500 14px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 560 | 561 | 565 | The font css that shuold be applied to the text before calculating the width. 566 | 567 |
573 | 574 | 575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 |
590 | 591 | 592 |
593 | 594 | 595 | 596 |

attach(quill)

597 | 598 | 599 | 600 | 601 | 602 |
603 | Attaches this tool to the given Quill Editor instance. 604 |
605 | 606 | 607 | 608 | 609 | 610 |
611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 |
Source:
638 |
641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 |
649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 |
Parameters:
659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 694 | 695 | 696 | 697 | 698 | 699 | 703 | 704 | 705 | 706 | 707 |
NameTypeDescription
quill 687 | 688 | 689 | Quill 690 | 691 | 692 | 693 | 700 | The Quill Editor instance that this tool should get added to. 701 | 702 |
708 | 709 | 710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 |
725 | 726 | 727 |
728 | 729 | 730 | 731 |

detach(quill)

732 | 733 | 734 | 735 | 736 | 737 |
738 | Detaches this tool from the given Quill Editor instance. 739 |
740 | 741 | 742 | 743 | 744 | 745 |
746 | 747 | 748 | 749 | 750 | 751 | 752 | 753 | 754 | 755 | 756 | 757 | 758 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 |
Source:
773 |
776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 |
784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 |
Parameters:
794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 829 | 830 | 831 | 832 | 833 | 834 | 838 | 839 | 840 | 841 | 842 |
NameTypeDescription
quill 822 | 823 | 824 | Quill 825 | 826 | 827 | 828 | 835 | The Quill Editor instance that this tool should get added to. 836 | 837 |
843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 |
860 | 861 | 862 | 863 | 864 | 865 | 866 |
867 | 868 |
869 | 870 | 871 | 872 | 873 |
874 | 875 |
876 | 877 |
878 | Generated by JSDoc 3.6.3 on Tue Nov 19 2019 16:39:24 GMT+0100 (Central European Standard Time) using the Minami theme. 879 |
880 | 881 | 882 | 883 | 884 | -------------------------------------------------------------------------------- /docs/QuillToolbarButton.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QuillToolbarButton - Documentation 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 29 | 30 |
31 | 32 |

QuillToolbarButton

33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 |
43 | 44 |

45 | QuillToolbarButton 46 |

47 | 48 |
Class representing a button tool for a Quill Editor toolbar.
49 | 50 | 51 |
52 | 53 |
54 |
55 | 56 | 57 |
58 | 59 | 60 |

Constructor

61 | 62 | 63 |

new QuillToolbarButton(optionsopt)

64 | 65 | 66 | 67 | 68 | 69 |
70 | Creates an instance of QuillToolbarButton. 71 |
72 | 73 | 74 | 75 | 76 | 77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
Source:
105 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |
Parameters:
126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 163 | 164 | 165 | 174 | 175 | 176 | 177 | 178 | 331 | 332 | 333 | 334 | 335 |
NameTypeAttributesDescription
options 156 | 157 | 158 | object 159 | 160 | 161 | 162 | 166 | 167 | <optional>
168 | 169 | 170 | 171 | 172 | 173 | 		179 | The options/settings for this QuillToolbarButton. 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 220 | 221 | 222 | 231 | 232 | 233 | 234 | 239 | 240 | 241 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 262 | 263 | 264 | 273 | 274 | 275 | 276 | 279 | 280 | 281 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 302 | 303 | 304 | 311 | 312 | 313 | 314 | 317 | 318 | 319 | 323 | 324 | 325 | 326 | 327 |
NameTypeAttributesDefaultDescription
id 213 | 214 | 215 | string 216 | 217 | 218 | 219 | 223 | 224 | <optional>
225 | 226 | 227 | 228 | 229 | 230 | 		235 | 236 | `button-${random10digitNumber}` 237 | 238 | 242 | The id of the quill tool. 243 | 244 |
value 255 | 256 | 257 | string 258 | 259 | 260 | 261 | 265 | 266 | <optional>
267 | 268 | 269 | 270 | 271 | 272 | 		277 | 278 | 282 | The default hidden value of the button. 283 | 284 |
icon 295 | 296 | 297 | string 298 | 299 | 300 | 301 | 305 | 306 | 307 | 308 | 309 | 310 | 315 | 316 | 320 | The default icon this button tool will have. 321 | 322 |
328 | 329 | 330 |
336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 |
353 | 354 |
355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 |

Methods

370 | 371 | 372 | 373 |
374 | 375 | 376 | 377 |

getValue(newLabel)

378 | 379 | 380 | 381 | 382 | 383 |
384 | Set the hidden value of this button tool. 385 |
386 | 387 | 388 | 389 | 390 | 391 |
392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 |
Source:
419 |
422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 |
430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 |
Parameters:
440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 475 | 476 | 477 | 478 | 479 | 480 | 484 | 485 | 486 | 487 | 488 |
NameTypeDescription
newLabel 468 | 469 | 470 | string 471 | 472 | 473 | 474 | 481 | The or html tag to use as an icon. (Make sure it's 18x18 in size.) 482 | 483 |
489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 |
506 | 507 | 508 |
509 | 510 | 511 | 512 |

onClick(quill)

513 | 514 | 515 | 516 | 517 | 518 |
519 | A callback that gets called automatically when the button is clicked, tapped or triggered witht he keyboard etc. This callback is expected to be overwritten. 520 |
521 | 522 | 523 | 524 | 525 | 526 |
527 | 528 | 529 | 530 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 |
Source:
554 |
557 | 558 | 559 | 560 | 561 | 562 | 563 | 564 |
565 | 566 | 567 | 568 | 569 | 570 | 571 | 572 | 573 | 574 |
Parameters:
575 | 576 | 577 | 578 | 579 | 580 | 581 | 582 | 583 | 584 | 585 | 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 610 | 611 | 612 | 613 | 614 | 615 | 619 | 620 | 621 | 622 | 623 |
NameTypeDescription
quill 603 | 604 | 605 | Quill 606 | 607 | 608 | 609 | 616 | The quill instance the dropdown tool is attached to. 617 | 618 |
624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 |
641 | 642 | 643 |
644 | 645 | 646 | 647 |

setIcon(newLabel)

648 | 649 | 650 | 651 | 652 | 653 |
654 | Set the icon for this button tool. 655 |
656 | 657 | 658 | 659 | 660 | 661 |
662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 |
Source:
689 |
692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 |
700 | 701 | 702 | 703 | 704 | 705 | 706 | 707 | 708 | 709 |
Parameters:
710 | 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 745 | 746 | 747 | 748 | 749 | 750 | 754 | 755 | 756 | 757 | 758 |
NameTypeDescription
newLabel 738 | 739 | 740 | string 741 | 742 | 743 | 744 | 751 | The or html tag to use as an icon. (Make sure it's 18x18 in size.) 752 | 753 |
759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 |
776 | 777 | 778 |
779 | 780 | 781 | 782 |

setValue(newLabel)

783 | 784 | 785 | 786 | 787 | 788 |
789 | Set the hidden value of this button tool. 790 |
791 | 792 | 793 | 794 | 795 | 796 |
797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 | 810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 |
Source:
824 |
827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 |
835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 |
Parameters:
845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 880 | 881 | 882 | 883 | 884 | 885 | 889 | 890 | 891 | 892 | 893 |
NameTypeDescription
newLabel 873 | 874 | 875 | string 876 | 877 | 878 | 879 | 886 | The or html tag to use as an icon. (Make sure it's 18x18 in size.) 887 | 888 |
894 | 895 | 896 | 897 | 898 | 899 | 900 | 901 | 902 | 903 | 904 | 905 | 906 | 907 | 908 | 909 | 910 |
911 | 912 | 913 | 914 | 915 | 916 | 917 |
918 | 919 |
920 | 921 | 922 | 923 | 924 |
925 | 926 |
927 | 928 |
929 | Generated by JSDoc 3.6.3 on Tue Nov 19 2019 16:39:24 GMT+0100 (Central European Standard Time) using the Minami theme. 930 |
931 | 932 | 933 | 934 | 935 | -------------------------------------------------------------------------------- /docs/QuillToolbarDropDown.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QuillToolbarDropDown - Documentation 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 29 | 30 |
31 | 32 |

QuillToolbarDropDown

33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
41 | 42 |
43 | 44 |

45 | QuillToolbarDropDown 46 |

47 | 48 |
Class representing a dropdown tool for a Quill Editor toolbar.
49 | 50 | 51 |
52 | 53 |
54 |
55 | 56 | 57 |
58 | 59 | 60 |

Constructor

61 | 62 | 63 |

new QuillToolbarDropDown(optionsopt)

64 | 65 | 66 | 67 | 68 | 69 |
70 | Creates an instance of QuillToolbarDropDown. 71 |
72 | 73 | 74 | 75 | 76 | 77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
Source:
105 |
108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |
Parameters:
126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 163 | 164 | 165 | 174 | 175 | 176 | 177 | 178 | 379 | 380 | 381 | 382 | 383 |
NameTypeAttributesDescription
options 156 | 157 | 158 | object 159 | 160 | 161 | 162 | 166 | 167 | <optional>
168 | 169 | 170 | 171 | 172 | 173 | 		179 | The options/settings for this QuillToolbarDropDown. 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 220 | 221 | 222 | 231 | 232 | 233 | 234 | 239 | 240 | 241 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 262 | 263 | 264 | 273 | 274 | 275 | 276 | 281 | 282 | 283 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 304 | 305 | 306 | 315 | 316 | 317 | 318 | 323 | 324 | 325 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 346 | 347 | 348 | 357 | 358 | 359 | 360 | 365 | 366 | 367 | 371 | 372 | 373 | 374 | 375 |
NameTypeAttributesDefaultDescription
id 213 | 214 | 215 | string 216 | 217 | 218 | 219 | 223 | 224 | <optional>
225 | 226 | 227 | 228 | 229 | 230 | 		235 | 236 | `dropdown-${random10digitNumber}` 237 | 238 | 242 | The id of the quill tool. 243 | 244 |
label 255 | 256 | 257 | string 258 | 259 | 260 | 261 | 265 | 266 | <optional>
267 | 268 | 269 | 270 | 271 | 272 | 		277 | 278 | "" 279 | 280 | 284 | The default label that is being displayed before making a selection. 285 | 286 |
rememberSelection 297 | 298 | 299 | boolean 300 | 301 | 302 | 303 | 307 | 308 | <optional>
309 | 310 | 311 | 312 | 313 | 314 | 		319 | 320 | true 321 | 322 | 326 | Automatically change the label to the current selection. 327 | 328 |
items 339 | 340 | 341 | object 342 | 343 | 344 | 345 | 349 | 350 | <optional>
351 | 352 | 353 | 354 | 355 | 356 | 		361 | 362 | {} 363 | 364 | 368 | The default items this dropdown will have. Needs to be a key-value-object (key=visible label; value=actual value). 369 | 370 |
376 | 377 | 378 |
384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 |
401 | 402 |
403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 |

Methods

418 | 419 | 420 | 421 |
422 | 423 | 424 | 425 |

onSelect(label, value, quill)

426 | 427 | 428 | 429 | 430 | 431 |
432 | A callback that gets called automatically when the dropdown selection changes. This callback is expected to be overwritten. 433 |
434 | 435 | 436 | 437 | 438 | 439 |
440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 |
Source:
467 |
470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 |
478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 |
Parameters:
488 | 489 | 490 | 491 | 492 | 493 | 494 | 495 | 496 | 497 | 498 | 499 | 500 | 501 | 502 | 503 | 504 | 505 | 506 | 507 | 508 | 509 | 510 | 511 | 512 | 513 | 514 | 515 | 523 | 524 | 525 | 526 | 527 | 528 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 549 | 550 | 551 | 552 | 553 | 554 | 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | 567 | 575 | 576 | 577 | 578 | 579 | 580 | 584 | 585 | 586 | 587 | 588 |
NameTypeDescription
label 516 | 517 | 518 | string 519 | 520 | 521 | 522 | 529 | The label of the newly selected item. 530 | 531 |
value 542 | 543 | 544 | string 545 | 546 | 547 | 548 | 555 | The value of the newly selected item. 556 | 557 |
quill 568 | 569 | 570 | Quill 571 | 572 | 573 | 574 | 581 | The quill instance the dropdown tool is attached to. 582 | 583 |
589 | 590 | 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | 599 | 600 | 601 | 602 | 603 | 604 | 605 |
606 | 607 | 608 |
609 | 610 | 611 | 612 |

setItems(items)

613 | 614 | 615 | 616 | 617 | 618 |
619 | Set the items for this dropdown tool. 620 |
621 | 622 | 623 | 624 | 625 | 626 |
627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 |
Source:
654 |
657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 |
665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 |
Parameters:
675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 | 689 | 690 | 691 | 692 | 693 | 694 | 695 | 696 | 697 | 698 | 699 | 700 | 701 | 702 | 710 | 711 | 712 | 713 | 714 | 715 | 719 | 720 | 721 | 722 | 723 |
NameTypeDescription
items 703 | 704 | 705 | object 706 | 707 | 708 | 709 | 716 | Needs to be a key-value-object (key=visible label; value=actual value). 717 | 718 |
724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | 735 | 736 | 737 | 738 | 739 | 740 |
741 | 742 | 743 |
744 | 745 | 746 | 747 |

setLabel(newLabel)

748 | 749 | 750 | 751 | 752 | 753 |
754 | Set the label for this dropdown tool and automatically adjust the width to fit the label. 755 |
756 | 757 | 758 | 759 | 760 | 761 |
762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 |
Source:
789 |
792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 |
800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 | 809 |
Parameters:
810 | 811 | 812 | 813 | 814 | 815 | 816 | 817 | 818 | 819 | 820 | 821 | 822 | 823 | 824 | 825 | 826 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 845 | 846 | 847 | 848 | 849 | 850 | 854 | 855 | 856 | 857 | 858 |
NameTypeDescription
newLabel 838 | 839 | 840 | String 841 | 842 | 843 | 844 | 851 | The new label that should be set. 852 | 853 |
859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 | 868 | 869 | 870 | 871 | 872 | 873 | 874 | 875 |
876 | 877 | 878 | 879 | 880 | 881 | 882 |
883 | 884 |
885 | 886 | 887 | 888 | 889 |
890 | 891 |
892 | 893 |
894 | Generated by JSDoc 3.6.3 on Tue Nov 19 2019 16:39:24 GMT+0100 (Central European Standard Time) using the Minami theme. 895 |
896 | 897 | 898 | 899 | 900 | --------------------------------------------------------------------------------