@@ -77,23 +98,23 @@ import { VueEditor, Quill } from "vue2-editor";
```
-## Example - Custom Image Handler
+### Example - Custom Image Handler
If you choose to use the custom image handler, an event is emitted when a a photo is selected.
You can see below that 3 parameters are passed.
@@ -102,60 +123,66 @@ You can see below that 3 parameters are passed.
2. The Editor instance
3. The cursor position at the time of upload so the image can be inserted at the correct position on success
-**NOTE** In addition to this example, I have created a [ example repo](https://github.com/davidroyer/vue2editor-images) demonstrating this new feature with an actual server.
+**NOTE** In addition to this example, I have created a [example repo](https://github.com/davidroyer/vue2editor-images) demonstrating this new feature with an actual server.
-```html
+```vue
-
+
+
```
-## Example - Set Contents After Page Load
+### Example - Set Contents After Page Load
-```html
+```vue
Set Editor Contents
@@ -164,31 +191,31 @@ You can see below that 3 parameters are passed.
```
-## Example - Using Multiple Editors
+### Example - Using Multiple Editors
-```html
+```vue
@@ -197,33 +224,33 @@ You can see below that 3 parameters are passed.
```
-## Example - Custom Toolbar
+### Example - Custom Toolbar
-```html
+```vue
@@ -231,30 +258,30 @@ You can see below that 3 parameters are passed.
```
-## Example - Saving The Content
+### Example - Saving The Content
-```html
+```vue
@@ -263,32 +290,32 @@ You can see below that 3 parameters are passed.
```
-## Example - Use a Live Preview
+### Example - Use a Live Preview
-```html
+```vue
@@ -297,27 +324,27 @@ You can see below that 3 parameters are passed.
```
-## How To Use Custom Quill Modules
+### How To Use Custom Quill Modules
-There are 2 ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.
+There are two ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.
-### Version 1 - **_Import and Register Yourself_**
+#### Version 1 - **_Import and Register Yourself_**
Vue2Editor now exports Quill to assist in this process.
@@ -326,7 +353,7 @@ Vue2Editor now exports Quill to assist in this process.
3. Register the custom modules with Quill
4. Add the necessary configuration to the `editorOptions` object
-```html
+```vue
```
-### Version 2 - **_You Import | Vue2Editor Registers_**
+#### Version 2 - **_You Import | Vue2Editor Registers_**
**_(Recommended way)_**
@@ -370,44 +397,49 @@ Vue2Editor now exports Quill to assist in this process.
2. Use the `customModules` prop to declare an array of module(s).
3. Add the necessary configuration for those modules in the `editorOptions` object under modules as seen below
-```html
+```vue
-
+
+
```
---
-# Development
+## Development
Vue2Editor now uses [Poi](https://github.com/egoist/poi) for development
@@ -419,6 +451,6 @@ Vue2Editor now uses [Poi](https://github.com/egoist/poi) for development
-# License
+## License
MIT
diff --git a/TODO b/TODO
new file mode 100644
index 0000000..42932bf
--- /dev/null
+++ b/TODO
@@ -0,0 +1,7 @@
+
+Todo:
+ ✔ Need to fix build so regular builds are including `CSS` @done(19-06-23 00:01)
+
+ ✔ Figure out Rollup CSS - NEED TO UPDATE CSS BUILD SO IT ONLY OUTPUTS YOUR CUSTOM CSS AND THEN THE USER CAN IMPORT QUILL'S STYLES ON THEIR OWN @done(19-06-23 01:08)
+
+ ✔ Change it `import 'vue2-editor/dist/vue2-editor.core.js'` @done(19-06-28 23:40)
\ No newline at end of file
diff --git a/dist/vue2-editor.common.js b/dist/vue2-editor.common.js
index 779ba31..54d44c0 100644
--- a/dist/vue2-editor.common.js
+++ b/dist/vue2-editor.common.js
@@ -1,6 +1,6 @@
/*!
- * vue2-editor v2.8.1
- * (c) 2019 David Royer
+ * vue2-editor v2.10.3
+ * (c) 2021 David Royer
* Released under the MIT License.
*/
'use strict';
@@ -389,6 +389,7 @@ function () {
}, {
name: "asterisk-ul",
pattern: /^(\*|\+)\s$/g,
+ // eslint-disable-next-line no-unused-vars
action: function action(_text, selection, _pattern) {
setTimeout(function () {
_this.quill.formatLine(selection.index, 1, "list", "unordered");
@@ -433,6 +434,7 @@ function () {
}
}
}]; // Handler that looks for insert deltas that match specific characters
+ // eslint-disable-next-line no-unused-vars
this.quill.on("text-change", function (delta, _oldContents, _source) {
for (var i = 0; i < delta.ops.length; i++) {
@@ -598,7 +600,6 @@ var script = {
quill: null
};
},
- // quill: null,
watch: {
value: function value(val) {
if (val != this.quill.root.innerHTML && !this.quill.hasFocus()) {
@@ -692,9 +693,24 @@ var script = {
handleSelectionChange: function handleSelectionChange(range, oldRange) {
if (!range && oldRange) this.$emit("blur", this.quill);else if (range && !oldRange) this.$emit("focus", this.quill);
},
- handleTextChange: function handleTextChange() {
+ handleTextChange: function handleTextChange(delta, oldContents) {
var editorContent = this.quill.getHTML() === "
" ? "" : this.quill.getHTML();
this.$emit("input", editorContent);
+ if (this.useCustomImageHandler) this.handleImageRemoved(delta, oldContents);
+ },
+ handleImageRemoved: function handleImageRemoved(delta, oldContents) {
+ var _this2 = this;
+
+ var currrentContents = this.quill.getContents();
+ var deletedContents = currrentContents.diff(oldContents);
+ var operations = deletedContents.ops;
+ operations.map(function (operation) {
+ if (operation.insert && operation.insert.hasOwnProperty("image")) {
+ var image = operation.insert.image;
+
+ _this2.$emit("image-removed", image);
+ }
+ });
},
checkForCustomImageHandler: function checkForCustomImageHandler() {
this.useCustomImageHandler === true ? this.setupCustomImageHandler() : "";
@@ -703,7 +719,7 @@ var script = {
var toolbar = this.quill.getModule("toolbar");
toolbar.addHandler("image", this.customImageHandler);
},
- customImageHandler: function customImageHandler(image, callback) {
+ customImageHandler: function customImageHandler() {
this.$refs.fileInput.click();
},
emitImageInfo: function emitImageInfo($event) {
@@ -716,7 +732,7 @@ var script = {
var Editor = this.quill;
var range = Editor.getSelection();
var cursorLocation = range.index;
- this.$emit("imageAdded", file, Editor, cursorLocation, resetUploader);
+ this.$emit("image-added", file, Editor, cursorLocation, resetUploader);
}
}
};
@@ -814,7 +830,7 @@ function createInjector(context) {
};
}
-var HEAD = document.head || document.getElementsByTagName('head')[0];
+var HEAD;
var styles = {};
function addStyle(id, css) {
@@ -840,6 +856,11 @@ function addStyle(id, css) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media) style.element.setAttribute('media', css.media);
+
+ if (HEAD === undefined) {
+ HEAD = document.head || document.getElementsByTagName('head')[0];
+ }
+
HEAD.appendChild(style.element);
}
@@ -868,8 +889,8 @@ var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return
- inject("data-v-4c4b5b57_0", { source: "/*!\n * Quill Editor v1.3.6\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li::before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:0;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li::before{content:'\\2022'}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li::before,.ql-editor ul[data-checked=true]>li::before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li::before{content:'\\2611'}.ql-editor ul[data-checked=false]>li::before{content:'\\2610'}.ql-editor li::before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl)::before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl::before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) '. '}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) '. '}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) '. '}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) '. '}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) '. '}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) '. '}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) '. '}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) '. '}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) '. '}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank::before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow .ql-toolbar:after,.ql-snow.ql-toolbar:after{clear:both;content:'';display:table}.ql-snow .ql-toolbar button,.ql-snow.ql-toolbar button{background:0 0;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow .ql-toolbar button svg,.ql-snow.ql-toolbar button svg{float:left;height:100%}.ql-snow .ql-toolbar button:active:hover,.ql-snow.ql-toolbar button:active:hover{outline:0}.ql-snow .ql-toolbar input.ql-image[type=file],.ql-snow.ql-toolbar input.ql-image[type=file]{display:none}.ql-snow .ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar button.ql-active,.ql-snow .ql-toolbar button:focus,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar button.ql-active,.ql-snow.ql-toolbar button:focus,.ql-snow.ql-toolbar button:hover{color:#06c}.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill{fill:#06c}.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow .ql-toolbar button:hover:not(.ql-active),.ql-snow.ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-stroke.ql-thin,.ql-snow .ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-item::before,.ql-snow .ql-picker.ql-header .ql-picker-label::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-item::before,.ql-snow .ql-picker.ql-font .ql-picker-label::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-item::before,.ql-snow .ql-picker.ql-size .ql-picker-label::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]::before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}", map: undefined, media: undefined })
-,inject("data-v-4c4b5b57_1", { source: ".ql-editor{min-height:200px;font-size:16px}.ql-snow .ql-stroke.ql-thin,.ql-snow .ql-thin{stroke-width:1px!important}.quillWrapper .ql-snow.ql-toolbar{padding-top:8px;padding-bottom:4px}.quillWrapper .ql-snow.ql-toolbar .ql-formats{margin-bottom:10px}.ql-snow .ql-toolbar button svg,.quillWrapper .ql-snow.ql-toolbar button svg{width:22px;height:22px}.quillWrapper .ql-editor ul[data-checked=false]>li::before,.quillWrapper .ql-editor ul[data-checked=true]>li::before{font-size:1.35em;vertical-align:baseline;bottom:-.065em;font-weight:900;color:#222}.quillWrapper .ql-snow .ql-stroke{stroke:rgba(63,63,63,.95);stroke-linecap:square;stroke-linejoin:initial;stroke-width:1.7px}.quillWrapper .ql-picker-label{font-size:15px}.quillWrapper .ql-snow .ql-active .ql-stroke{stroke-width:2.25px}.quillWrapper .ql-toolbar.ql-snow .ql-formats{vertical-align:top}.ql-picker:not(.ql-background){position:relative;top:2px}.ql-picker.ql-color-picker svg{width:22px!important;height:22px!important}.quillWrapper .imageResizeActive img{display:block;cursor:pointer}.quillWrapper .imageResizeActive~div svg{cursor:pointer}", map: undefined, media: undefined });
+ inject("data-v-776e788e_0", { source: "/*!\n * Quill Editor v1.3.6\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li::before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:0;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li::before{content:'\\2022'}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li::before,.ql-editor ul[data-checked=true]>li::before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li::before{content:'\\2611'}.ql-editor ul[data-checked=false]>li::before{content:'\\2610'}.ql-editor li::before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl)::before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl::before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) '. '}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) '. '}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) '. '}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) '. '}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) '. '}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) '. '}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) '. '}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) '. '}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) '. '}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank::before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow .ql-toolbar:after,.ql-snow.ql-toolbar:after{clear:both;content:'';display:table}.ql-snow .ql-toolbar button,.ql-snow.ql-toolbar button{background:0 0;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow .ql-toolbar button svg,.ql-snow.ql-toolbar button svg{float:left;height:100%}.ql-snow .ql-toolbar button:active:hover,.ql-snow.ql-toolbar button:active:hover{outline:0}.ql-snow .ql-toolbar input.ql-image[type=file],.ql-snow.ql-toolbar input.ql-image[type=file]{display:none}.ql-snow .ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar button.ql-active,.ql-snow .ql-toolbar button:focus,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar button.ql-active,.ql-snow.ql-toolbar button:focus,.ql-snow.ql-toolbar button:hover{color:#06c}.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill{fill:#06c}.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow .ql-toolbar button:hover:not(.ql-active),.ql-snow.ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-stroke.ql-thin,.ql-snow .ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-item::before,.ql-snow .ql-picker.ql-header .ql-picker-label::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before,.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-item::before,.ql-snow .ql-picker.ql-font .ql-picker-label::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-item::before,.ql-snow .ql-picker.ql-size .ql-picker-label::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]::before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}", map: undefined, media: undefined })
+,inject("data-v-776e788e_1", { source: ".ql-editor{min-height:200px;font-size:16px}.ql-snow .ql-stroke.ql-thin,.ql-snow .ql-thin{stroke-width:1px!important}.quillWrapper .ql-snow.ql-toolbar{padding-top:8px;padding-bottom:4px}.quillWrapper .ql-snow.ql-toolbar .ql-formats{margin-bottom:10px}.ql-snow .ql-toolbar button svg,.quillWrapper .ql-snow.ql-toolbar button svg{width:22px;height:22px}.quillWrapper .ql-editor ul[data-checked=false]>li::before,.quillWrapper .ql-editor ul[data-checked=true]>li::before{font-size:1.35em;vertical-align:baseline;bottom:-.065em;font-weight:900;color:#222}.quillWrapper .ql-snow .ql-stroke{stroke:rgba(63,63,63,.95);stroke-linecap:square;stroke-linejoin:initial;stroke-width:1.7px}.quillWrapper .ql-picker-label{font-size:15px}.quillWrapper .ql-snow .ql-active .ql-stroke{stroke-width:2.25px}.quillWrapper .ql-toolbar.ql-snow .ql-formats{vertical-align:top}.ql-picker:not(.ql-background){position:relative;top:2px}.ql-picker.ql-color-picker svg{width:22px!important;height:22px!important}.quillWrapper .imageResizeActive img{display:block;cursor:pointer}.quillWrapper .imageResizeActive~div svg{cursor:pointer}", map: undefined, media: undefined });
};
/* scoped */
@@ -893,7 +914,7 @@ var __vue_staticRenderFns__ = [];
undefined
);
-var version = "2.8.1"; // Declare install function executed by Vue.use()
+var version = "2.10.3"; // Declare install function executed by Vue.use()
function install(Vue) {
if (install.installed) return;
diff --git a/dist/vue2-editor.core.js b/dist/vue2-editor.core.js
new file mode 100644
index 0000000..db10b8f
--- /dev/null
+++ b/dist/vue2-editor.core.js
@@ -0,0 +1,890 @@
+/*!
+ * vue2-editor v2.10.3
+ * (c) 2021 David Royer
+ * Released under the MIT License.
+ */
+(function (global, factory) {
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('quill')) :
+ typeof define === 'function' && define.amd ? define(['exports', 'quill'], factory) :
+ (global = global || self, factory(global.Vue2Editor = {}, global.Quill));
+}(this, function (exports, Quill) { 'use strict';
+
+ Quill = Quill && Quill.hasOwnProperty('default') ? Quill['default'] : Quill;
+
+ var defaultToolbar = [[{
+ header: [false, 1, 2, 3, 4, 5, 6]
+ }], ["bold", "italic", "underline", "strike"], // toggled buttons
+ [{
+ align: ""
+ }, {
+ align: "center"
+ }, {
+ align: "right"
+ }, {
+ align: "justify"
+ }], ["blockquote", "code-block"], [{
+ list: "ordered"
+ }, {
+ list: "bullet"
+ }, {
+ list: "check"
+ }], [{
+ indent: "-1"
+ }, {
+ indent: "+1"
+ }], // outdent/indent
+ [{
+ color: []
+ }, {
+ background: []
+ }], // dropdown with defaults from theme
+ ["link", "image", "video"], ["clean"] // remove formatting button
+ ];
+
+ var oldApi = {
+ props: {
+ customModules: Array
+ },
+ methods: {
+ registerCustomModules: function registerCustomModules(Quill) {
+ if (this.customModules !== undefined) {
+ this.customModules.forEach(function (customModule) {
+ Quill.register("modules/" + customModule.alias, customModule.module);
+ });
+ }
+ }
+ }
+ };
+
+ function _typeof(obj) {
+ if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+ _typeof = function (obj) {
+ return typeof obj;
+ };
+ } else {
+ _typeof = function (obj) {
+ return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+ };
+ }
+
+ return _typeof(obj);
+ }
+
+ function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
+ }
+ }
+
+ function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, descriptor.key, descriptor);
+ }
+ }
+
+ function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ return Constructor;
+ }
+
+ function _inherits(subClass, superClass) {
+ if (typeof superClass !== "function" && superClass !== null) {
+ throw new TypeError("Super expression must either be null or a function");
+ }
+
+ subClass.prototype = Object.create(superClass && superClass.prototype, {
+ constructor: {
+ value: subClass,
+ writable: true,
+ configurable: true
+ }
+ });
+ if (superClass) _setPrototypeOf(subClass, superClass);
+ }
+
+ function _getPrototypeOf(o) {
+ _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+ return o.__proto__ || Object.getPrototypeOf(o);
+ };
+ return _getPrototypeOf(o);
+ }
+
+ function _setPrototypeOf(o, p) {
+ _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+ o.__proto__ = p;
+ return o;
+ };
+
+ return _setPrototypeOf(o, p);
+ }
+
+ function _assertThisInitialized(self) {
+ if (self === void 0) {
+ throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+ }
+
+ return self;
+ }
+
+ function _possibleConstructorReturn(self, call) {
+ if (call && (typeof call === "object" || typeof call === "function")) {
+ return call;
+ }
+
+ return _assertThisInitialized(self);
+ }
+
+ function _slicedToArray(arr, i) {
+ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
+ }
+
+ function _arrayWithHoles(arr) {
+ if (Array.isArray(arr)) return arr;
+ }
+
+ function _iterableToArrayLimit(arr, i) {
+ var _arr = [];
+ var _n = true;
+ var _d = false;
+ var _e = undefined;
+
+ try {
+ for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+ _arr.push(_s.value);
+
+ if (i && _arr.length === i) break;
+ }
+ } catch (err) {
+ _d = true;
+ _e = err;
+ } finally {
+ try {
+ if (!_n && _i["return"] != null) _i["return"]();
+ } finally {
+ if (_d) throw _e;
+ }
+ }
+
+ return _arr;
+ }
+
+ function _nonIterableRest() {
+ throw new TypeError("Invalid attempt to destructure non-iterable instance");
+ }
+
+ /**
+ * Performs a deep merge of `source` into `target`.
+ * Mutates `target` only but not its objects and arrays.
+ *
+ */
+ function mergeDeep(target, source) {
+ var isObject = function isObject(obj) {
+ return obj && _typeof(obj) === "object";
+ };
+
+ if (!isObject(target) || !isObject(source)) {
+ return source;
+ }
+
+ Object.keys(source).forEach(function (key) {
+ var targetValue = target[key];
+ var sourceValue = source[key];
+
+ if (Array.isArray(targetValue) && Array.isArray(sourceValue)) {
+ target[key] = targetValue.concat(sourceValue);
+ } else if (isObject(targetValue) && isObject(sourceValue)) {
+ target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue);
+ } else {
+ target[key] = sourceValue;
+ }
+ });
+ return target;
+ }
+
+ var BlockEmbed = Quill.import("blots/block/embed");
+
+ var HorizontalRule =
+ /*#__PURE__*/
+ function (_BlockEmbed) {
+ _inherits(HorizontalRule, _BlockEmbed);
+
+ function HorizontalRule() {
+ _classCallCheck(this, HorizontalRule);
+
+ return _possibleConstructorReturn(this, _getPrototypeOf(HorizontalRule).apply(this, arguments));
+ }
+
+ return HorizontalRule;
+ }(BlockEmbed);
+
+ HorizontalRule.blotName = "hr";
+ HorizontalRule.tagName = "hr";
+ Quill.register("formats/horizontal", HorizontalRule);
+
+ var MarkdownShortcuts =
+ /*#__PURE__*/
+ function () {
+ function MarkdownShortcuts(quill, options) {
+ var _this = this;
+
+ _classCallCheck(this, MarkdownShortcuts);
+
+ this.quill = quill;
+ this.options = options;
+ this.ignoreTags = ["PRE"];
+ this.matches = [{
+ name: "header",
+ pattern: /^(#){1,6}\s/g,
+ action: function action(text, selection, pattern) {
+ var match = pattern.exec(text);
+ if (!match) return;
+ var size = match[0].length; // Need to defer this action https://github.com/quilljs/quill/issues/1134
+
+ setTimeout(function () {
+ _this.quill.formatLine(selection.index, 0, "header", size - 1);
+
+ _this.quill.deleteText(selection.index - size, size);
+ }, 0);
+ }
+ }, {
+ name: "blockquote",
+ pattern: /^(>)\s/g,
+ action: function action(_text, selection) {
+ // Need to defer this action https://github.com/quilljs/quill/issues/1134
+ setTimeout(function () {
+ _this.quill.formatLine(selection.index, 1, "blockquote", true);
+
+ _this.quill.deleteText(selection.index - 2, 2);
+ }, 0);
+ }
+ }, {
+ name: "code-block",
+ pattern: /^`{3}(?:\s|\n)/g,
+ action: function action(_text, selection) {
+ // Need to defer this action https://github.com/quilljs/quill/issues/1134
+ setTimeout(function () {
+ _this.quill.formatLine(selection.index, 1, "code-block", true);
+
+ _this.quill.deleteText(selection.index - 4, 4);
+ }, 0);
+ }
+ }, {
+ name: "bolditalic",
+ pattern: /(?:\*|_){3}(.+?)(?:\*|_){3}/g,
+ action: function action(text, _selection, pattern, lineStart) {
+ var match = pattern.exec(text);
+ var annotatedText = match[0];
+ var matchedText = match[1];
+ var startIndex = lineStart + match.index;
+ if (text.match(/^([*_ \n]+)$/g)) return;
+ setTimeout(function () {
+ _this.quill.deleteText(startIndex, annotatedText.length);
+
+ _this.quill.insertText(startIndex, matchedText, {
+ bold: true,
+ italic: true
+ });
+
+ _this.quill.format("bold", false);
+ }, 0);
+ }
+ }, {
+ name: "bold",
+ pattern: /(?:\*|_){2}(.+?)(?:\*|_){2}/g,
+ action: function action(text, _selection, pattern, lineStart) {
+ var match = pattern.exec(text);
+ var annotatedText = match[0];
+ var matchedText = match[1];
+ var startIndex = lineStart + match.index;
+ if (text.match(/^([*_ \n]+)$/g)) return;
+ setTimeout(function () {
+ _this.quill.deleteText(startIndex, annotatedText.length);
+
+ _this.quill.insertText(startIndex, matchedText, {
+ bold: true
+ });
+
+ _this.quill.format("bold", false);
+ }, 0);
+ }
+ }, {
+ name: "italic",
+ pattern: /(?:\*|_){1}(.+?)(?:\*|_){1}/g,
+ action: function action(text, _selection, pattern, lineStart) {
+ var match = pattern.exec(text);
+ var annotatedText = match[0];
+ var matchedText = match[1];
+ var startIndex = lineStart + match.index;
+ if (text.match(/^([*_ \n]+)$/g)) return;
+ setTimeout(function () {
+ _this.quill.deleteText(startIndex, annotatedText.length);
+
+ _this.quill.insertText(startIndex, matchedText, {
+ italic: true
+ });
+
+ _this.quill.format("italic", false);
+ }, 0);
+ }
+ }, {
+ name: "strikethrough",
+ pattern: /(?:~~)(.+?)(?:~~)/g,
+ action: function action(text, _selection, pattern, lineStart) {
+ var match = pattern.exec(text);
+ var annotatedText = match[0];
+ var matchedText = match[1];
+ var startIndex = lineStart + match.index;
+ if (text.match(/^([*_ \n]+)$/g)) return;
+ setTimeout(function () {
+ _this.quill.deleteText(startIndex, annotatedText.length);
+
+ _this.quill.insertText(startIndex, matchedText, {
+ strike: true
+ });
+
+ _this.quill.format("strike", false);
+ }, 0);
+ }
+ }, {
+ name: "code",
+ pattern: /(?:`)(.+?)(?:`)/g,
+ action: function action(text, _selection, pattern, lineStart) {
+ var match = pattern.exec(text);
+ var annotatedText = match[0];
+ var matchedText = match[1];
+ var startIndex = lineStart + match.index;
+ if (text.match(/^([*_ \n]+)$/g)) return;
+ setTimeout(function () {
+ _this.quill.deleteText(startIndex, annotatedText.length);
+
+ _this.quill.insertText(startIndex, matchedText, {
+ code: true
+ });
+
+ _this.quill.format("code", false);
+
+ _this.quill.insertText(_this.quill.getSelection(), " ");
+ }, 0);
+ }
+ }, {
+ name: "hr",
+ pattern: /^([-*]\s?){3}/g,
+ action: function action(text, selection) {
+ var startIndex = selection.index - text.length;
+ setTimeout(function () {
+ _this.quill.deleteText(startIndex, text.length);
+
+ _this.quill.insertEmbed(startIndex + 1, "hr", true, Quill.sources.USER);
+
+ _this.quill.insertText(startIndex + 2, "\n", Quill.sources.SILENT);
+
+ _this.quill.setSelection(startIndex + 2, Quill.sources.SILENT);
+ }, 0);
+ }
+ }, {
+ name: "asterisk-ul",
+ pattern: /^(\*|\+)\s$/g,
+ // eslint-disable-next-line no-unused-vars
+ action: function action(_text, selection, _pattern) {
+ setTimeout(function () {
+ _this.quill.formatLine(selection.index, 1, "list", "unordered");
+
+ _this.quill.deleteText(selection.index - 2, 2);
+ }, 0);
+ }
+ }, {
+ name: "image",
+ pattern: /(?:!\[(.+?)\])(?:\((.+?)\))/g,
+ action: function action(text, selection, pattern) {
+ var startIndex = text.search(pattern);
+ var matchedText = text.match(pattern)[0]; // const hrefText = text.match(/(?:!\[(.*?)\])/g)[0]
+
+ var hrefLink = text.match(/(?:\((.*?)\))/g)[0];
+ var start = selection.index - matchedText.length - 1;
+
+ if (startIndex !== -1) {
+ setTimeout(function () {
+ _this.quill.deleteText(start, matchedText.length);
+
+ _this.quill.insertEmbed(start, "image", hrefLink.slice(1, hrefLink.length - 1));
+ }, 0);
+ }
+ }
+ }, {
+ name: "link",
+ pattern: /(?:\[(.+?)\])(?:\((.+?)\))/g,
+ action: function action(text, selection, pattern) {
+ var startIndex = text.search(pattern);
+ var matchedText = text.match(pattern)[0];
+ var hrefText = text.match(/(?:\[(.*?)\])/g)[0];
+ var hrefLink = text.match(/(?:\((.*?)\))/g)[0];
+ var start = selection.index - matchedText.length - 1;
+
+ if (startIndex !== -1) {
+ setTimeout(function () {
+ _this.quill.deleteText(start, matchedText.length);
+
+ _this.quill.insertText(start, hrefText.slice(1, hrefText.length - 1), "link", hrefLink.slice(1, hrefLink.length - 1));
+ }, 0);
+ }
+ }
+ }]; // Handler that looks for insert deltas that match specific characters
+ // eslint-disable-next-line no-unused-vars
+
+ this.quill.on("text-change", function (delta, _oldContents, _source) {
+ for (var i = 0; i < delta.ops.length; i++) {
+ if (delta.ops[i].hasOwnProperty("insert")) {
+ if (delta.ops[i].insert === " ") {
+ _this.onSpace();
+ } else if (delta.ops[i].insert === "\n") {
+ _this.onEnter();
+ }
+ }
+ }
+ });
+ }
+
+ _createClass(MarkdownShortcuts, [{
+ key: "isValid",
+ value: function isValid(text, tagName) {
+ return typeof text !== "undefined" && text && this.ignoreTags.indexOf(tagName) === -1;
+ }
+ }, {
+ key: "onSpace",
+ value: function onSpace() {
+ var selection = this.quill.getSelection();
+ if (!selection) return;
+
+ var _this$quill$getLine = this.quill.getLine(selection.index),
+ _this$quill$getLine2 = _slicedToArray(_this$quill$getLine, 2),
+ line = _this$quill$getLine2[0],
+ offset = _this$quill$getLine2[1];
+
+ var text = line.domNode.textContent;
+ var lineStart = selection.index - offset;
+
+ if (this.isValid(text, line.domNode.tagName)) {
+ var _iteratorNormalCompletion = true;
+ var _didIteratorError = false;
+ var _iteratorError = undefined;
+
+ try {
+ for (var _iterator = this.matches[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+ var match = _step.value;
+ var matchedText = text.match(match.pattern);
+
+ if (matchedText) {
+ // We need to replace only matched text not the whole line
+ console.log("matched:", match.name, text);
+ match.action(text, selection, match.pattern, lineStart);
+ return;
+ }
+ }
+ } catch (err) {
+ _didIteratorError = true;
+ _iteratorError = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
+ _iterator.return();
+ }
+ } finally {
+ if (_didIteratorError) {
+ throw _iteratorError;
+ }
+ }
+ }
+ }
+ }
+ }, {
+ key: "onEnter",
+ value: function onEnter() {
+ var selection = this.quill.getSelection();
+ if (!selection) return;
+
+ var _this$quill$getLine3 = this.quill.getLine(selection.index),
+ _this$quill$getLine4 = _slicedToArray(_this$quill$getLine3, 2),
+ line = _this$quill$getLine4[0],
+ offset = _this$quill$getLine4[1];
+
+ var text = line.domNode.textContent + " ";
+ var lineStart = selection.index - offset;
+ selection.length = selection.index++;
+
+ if (this.isValid(text, line.domNode.tagName)) {
+ var _iteratorNormalCompletion2 = true;
+ var _didIteratorError2 = false;
+ var _iteratorError2 = undefined;
+
+ try {
+ for (var _iterator2 = this.matches[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+ var match = _step2.value;
+ var matchedText = text.match(match.pattern);
+
+ if (matchedText) {
+ console.log("matched", match.name, text);
+ match.action(text, selection, match.pattern, lineStart);
+ return;
+ }
+ }
+ } catch (err) {
+ _didIteratorError2 = true;
+ _iteratorError2 = err;
+ } finally {
+ try {
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
+ _iterator2.return();
+ }
+ } finally {
+ if (_didIteratorError2) {
+ throw _iteratorError2;
+ }
+ }
+ }
+ }
+ }
+ }]);
+
+ return MarkdownShortcuts;
+ }(); // module.exports = MarkdownShortcuts;
+
+ //
+ var script = {
+ name: "VueEditor",
+ mixins: [oldApi],
+ props: {
+ id: {
+ type: String,
+ default: "quill-container"
+ },
+ placeholder: {
+ type: String,
+ default: ""
+ },
+ value: {
+ type: String,
+ default: ""
+ },
+ disabled: {
+ type: Boolean
+ },
+ editorToolbar: {
+ type: Array,
+ default: function _default() {
+ return [];
+ }
+ },
+ editorOptions: {
+ type: Object,
+ required: false,
+ default: function _default() {
+ return {};
+ }
+ },
+ useCustomImageHandler: {
+ type: Boolean,
+ default: false
+ },
+ useMarkdownShortcuts: {
+ type: Boolean,
+ default: false
+ }
+ },
+ data: function data() {
+ return {
+ quill: null
+ };
+ },
+ watch: {
+ value: function value(val) {
+ if (val != this.quill.root.innerHTML && !this.quill.hasFocus()) {
+ this.quill.root.innerHTML = val;
+ }
+ },
+ disabled: function disabled(status) {
+ this.quill.enable(!status);
+ }
+ },
+ mounted: function mounted() {
+ this.registerCustomModules(Quill);
+ this.registerPrototypes();
+ this.initializeEditor();
+ },
+ beforeDestroy: function beforeDestroy() {
+ this.quill = null;
+ delete this.quill;
+ },
+ methods: {
+ initializeEditor: function initializeEditor() {
+ this.setupQuillEditor();
+ this.checkForCustomImageHandler();
+ this.handleInitialContent();
+ this.registerEditorEventListeners();
+ this.$emit("ready", this.quill);
+ },
+ setupQuillEditor: function setupQuillEditor() {
+ var editorConfig = {
+ debug: false,
+ modules: this.setModules(),
+ theme: "snow",
+ placeholder: this.placeholder ? this.placeholder : "",
+ readOnly: this.disabled ? this.disabled : false
+ };
+ this.prepareEditorConfig(editorConfig);
+ this.quill = new Quill(this.$refs.quillContainer, editorConfig);
+ },
+ setModules: function setModules() {
+ var modules = {
+ toolbar: this.editorToolbar.length ? this.editorToolbar : defaultToolbar
+ };
+
+ if (this.useMarkdownShortcuts) {
+ Quill.register("modules/markdownShortcuts", MarkdownShortcuts, true);
+ modules["markdownShortcuts"] = {};
+ }
+
+ return modules;
+ },
+ prepareEditorConfig: function prepareEditorConfig(editorConfig) {
+ if (Object.keys(this.editorOptions).length > 0 && this.editorOptions.constructor === Object) {
+ if (this.editorOptions.modules && typeof this.editorOptions.modules.toolbar !== "undefined") {
+ // We don't want to merge default toolbar with provided toolbar.
+ delete editorConfig.modules.toolbar;
+ }
+
+ mergeDeep(editorConfig, this.editorOptions);
+ }
+ },
+ registerPrototypes: function registerPrototypes() {
+ Quill.prototype.getHTML = function () {
+ return this.container.querySelector(".ql-editor").innerHTML;
+ };
+
+ Quill.prototype.getWordCount = function () {
+ return this.container.querySelector(".ql-editor").innerText.length;
+ };
+ },
+ registerEditorEventListeners: function registerEditorEventListeners() {
+ this.quill.on("text-change", this.handleTextChange);
+ this.quill.on("selection-change", this.handleSelectionChange);
+ this.listenForEditorEvent("text-change");
+ this.listenForEditorEvent("selection-change");
+ this.listenForEditorEvent("editor-change");
+ },
+ listenForEditorEvent: function listenForEditorEvent(type) {
+ var _this = this;
+
+ this.quill.on(type, function () {
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+ args[_key] = arguments[_key];
+ }
+
+ _this.$emit.apply(_this, [type].concat(args));
+ });
+ },
+ handleInitialContent: function handleInitialContent() {
+ if (this.value) this.quill.root.innerHTML = this.value; // Set initial editor content
+ },
+ handleSelectionChange: function handleSelectionChange(range, oldRange) {
+ if (!range && oldRange) this.$emit("blur", this.quill);else if (range && !oldRange) this.$emit("focus", this.quill);
+ },
+ handleTextChange: function handleTextChange(delta, oldContents) {
+ var editorContent = this.quill.getHTML() === "
" ? "" : this.quill.getHTML();
+ this.$emit("input", editorContent);
+ if (this.useCustomImageHandler) this.handleImageRemoved(delta, oldContents);
+ },
+ handleImageRemoved: function handleImageRemoved(delta, oldContents) {
+ var _this2 = this;
+
+ var currrentContents = this.quill.getContents();
+ var deletedContents = currrentContents.diff(oldContents);
+ var operations = deletedContents.ops;
+ operations.map(function (operation) {
+ if (operation.insert && operation.insert.hasOwnProperty("image")) {
+ var image = operation.insert.image;
+
+ _this2.$emit("image-removed", image);
+ }
+ });
+ },
+ checkForCustomImageHandler: function checkForCustomImageHandler() {
+ this.useCustomImageHandler === true ? this.setupCustomImageHandler() : "";
+ },
+ setupCustomImageHandler: function setupCustomImageHandler() {
+ var toolbar = this.quill.getModule("toolbar");
+ toolbar.addHandler("image", this.customImageHandler);
+ },
+ customImageHandler: function customImageHandler() {
+ this.$refs.fileInput.click();
+ },
+ emitImageInfo: function emitImageInfo($event) {
+ var resetUploader = function resetUploader() {
+ var uploader = document.getElementById("file-upload");
+ uploader.value = "";
+ };
+
+ var file = $event.target.files[0];
+ var Editor = this.quill;
+ var range = Editor.getSelection();
+ var cursorLocation = range.index;
+ this.$emit("image-added", file, Editor, cursorLocation, resetUploader);
+ }
+ }
+ };
+
+ function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+ /* server only */
+ , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+ if (typeof shadowMode !== 'boolean') {
+ createInjectorSSR = createInjector;
+ createInjector = shadowMode;
+ shadowMode = false;
+ } // Vue.extend constructor export interop.
+
+
+ var options = typeof script === 'function' ? script.options : script; // render functions
+
+ if (template && template.render) {
+ options.render = template.render;
+ options.staticRenderFns = template.staticRenderFns;
+ options._compiled = true; // functional template
+
+ if (isFunctionalTemplate) {
+ options.functional = true;
+ }
+ } // scopedId
+
+
+ if (scopeId) {
+ options._scopeId = scopeId;
+ }
+
+ var hook;
+
+ if (moduleIdentifier) {
+ // server build
+ hook = function hook(context) {
+ // 2.3 injection
+ context = context || // cached call
+ this.$vnode && this.$vnode.ssrContext || // stateful
+ this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+ // 2.2 with runInNewContext: true
+
+ if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+ context = __VUE_SSR_CONTEXT__;
+ } // inject component styles
+
+
+ if (style) {
+ style.call(this, createInjectorSSR(context));
+ } // register component module identifier for async chunk inference
+
+
+ if (context && context._registeredComponents) {
+ context._registeredComponents.add(moduleIdentifier);
+ }
+ }; // used by ssr in case component is cached and beforeCreate
+ // never gets called
+
+
+ options._ssrRegister = hook;
+ } else if (style) {
+ hook = shadowMode ? function () {
+ style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+ } : function (context) {
+ style.call(this, createInjector(context));
+ };
+ }
+
+ if (hook) {
+ if (options.functional) {
+ // register for functional component in vue file
+ var originalRender = options.render;
+
+ options.render = function renderWithStyleInjection(h, context) {
+ hook.call(context);
+ return originalRender(h, context);
+ };
+ } else {
+ // inject component registration as beforeCreate hook
+ var existing = options.beforeCreate;
+ options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+ }
+ }
+
+ return script;
+ }
+
+ var normalizeComponent_1 = normalizeComponent;
+
+ /* script */
+ const __vue_script__ = script;
+ /* template */
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"quillWrapper"},[_vm._t("toolbar"),_vm._v(" "),_c('div',{ref:"quillContainer",attrs:{"id":_vm.id}}),_vm._v(" "),(_vm.useCustomImageHandler)?_c('input',{ref:"fileInput",staticStyle:{"display":"none"},attrs:{"id":"file-upload","type":"file","accept":"image/*"},on:{"change":function($event){return _vm.emitImageInfo($event)}}}):_vm._e()],2)};
+ var __vue_staticRenderFns__ = [];
+
+ /* style */
+ const __vue_inject_styles__ = undefined;
+ /* scoped */
+ const __vue_scope_id__ = undefined;
+ /* module identifier */
+ const __vue_module_identifier__ = undefined;
+ /* functional template */
+ const __vue_is_functional_template__ = false;
+ /* style inject */
+
+ /* style inject SSR */
+
+
+
+ var VueEditor = normalizeComponent_1(
+ { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+ __vue_inject_styles__,
+ __vue_script__,
+ __vue_scope_id__,
+ __vue_is_functional_template__,
+ __vue_module_identifier__,
+ undefined,
+ undefined
+ );
+
+ var version = "2.10.3"; // Declare install function executed by Vue.use()
+
+ function install(Vue) {
+ if (install.installed) return;
+ install.installed = true;
+ Vue.component("VueEditor", VueEditor);
+ }
+ var VPlugin = {
+ install: install,
+ version: version,
+ Quill: Quill,
+ VueEditor: VueEditor
+ }; // Auto-install when vue is found (eg. in browser via
+
+
diff --git a/docs/README.md b/docs/README.md
index a5e935e..4f05ca2 100755
--- a/docs/README.md
+++ b/docs/README.md
@@ -2,7 +2,7 @@
home: true
heroImage: /hero-home.png
actionText: Get Started →
-actionLink: /guide/
+actionLink: /guide.md
features:
- title: Easy To Use
details: Simple setup so you can get started quickly
@@ -11,4 +11,4 @@ features:
- title: Customizable
details: Offers the options you need for more complex scenarios
footer: MIT Licensed | Copyright © 2016-present David Royer
----
\ No newline at end of file
+---
diff --git a/docs/guide/README.md b/docs/api.md
old mode 100755
new mode 100644
similarity index 86%
rename from docs/guide/README.md
rename to docs/api.md
index 3e0b0f5..b7cc102
--- a/docs/guide/README.md
+++ b/docs/api.md
@@ -1,40 +1,4 @@
----
-# sidebar: auto
----
-
-# Getting Started
-
-HTML Editor using Vue.js and Quilljs
-
-[Vue.js](https://vuejs.org)
-
-[Quill](http://quilljs.com/)
-
-
-
-## Install
-
-_You can use Yarn or NPM_
-
-``` bash
-npm install vue2-editor
-```
-
-**OR**
-
-```bash
-yarn add vue2-editor
-```
-
-## Usage
-
-```javascript
-// Basic Use - Covers most scenarios
-import { VueEditor } from "vue2-editor";
-
-// Advanced Use - Hook into Quill's API for Custom Functionality
-import { VueEditor, Quill } from "vue2-editor";
-```
+# API
## Props
@@ -67,6 +31,7 @@ import { VueEditor, Quill } from "vue2-editor";
| blur | quill | Emitted on `blur` event |
| selection-change | range, oldRange, source | Emitted on Quill's `selection-change` event |
| text-change | delta, oldDelta, source | Emitted on Quill's `text-change` event |
-| imageAdded | file, Editor, cursorLocation | Emitted when `useCustomImageHandler` is true and photo is being added to the editor |
+| image-added | file, Editor, cursorLocation | Emitted when `useCustomImageHandler` is true and photo is being added to the editor |
+| image-removed | image | Emitted when `useCustomImageHandler` is true and photo has been deleted |
diff --git a/docs/examples/README.md b/docs/examples/README.md
index 4ad453a..4d2dd84 100755
--- a/docs/examples/README.md
+++ b/docs/examples/README.md
@@ -7,6 +7,7 @@
## Basic Setup
<<< @/docs/.vuepress/code-examples/source/basic.vue
+
## Custom Image Handler
@@ -18,12 +19,18 @@ You can see below that 3 parameters are passed.
2. The Editor instance
3. The cursor position at the time of upload so the image can be inserted at the correct position on success
-**NOTE** In addition to this example, I have created a [ example repo](https://github.com/davidroyer/vue2editor-images) demonstrating this new feature with an actual server.
+**NOTE** In addition to this example, I have created a [example repo](https://github.com/davidroyer/vue2editor-images) demonstrating this new feature with an actual server.
-``` vue
+```vue
-
+
+
@@ -56,7 +63,7 @@ export default {
data: formData
})
.then(result => {
- let url = result.data.url; // Get url from response
+ const url = result.data.url; // Get url from response
Editor.insertEmbed(cursorLocation, "image", url);
resetUploader();
})
@@ -74,6 +81,7 @@ export default {
## Set Contents After Page Load
<<< @/docs/.vuepress/code-examples/source/set-contents.vue
+
## Using Multiple Editors
@@ -116,21 +124,24 @@ export default {
## Custom Toolbar
<<< @/docs/.vuepress/code-examples/source/custom-toolbar.vue
+
## Saving The Content
<<< @/docs/.vuepress/code-examples/source/custom-toolbar.vue
+
## Use a Live Preview
<<< @/docs/.vuepress/code-examples/source/live-preview.vue
+
## How To Use Custom Quill Modules
-There are 2 ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.
+There are two ways of using custom modules with Vue2Editor. This is partly because there have been cases in which errors are thrown when importing and attempting to declare custom modules, and partly because I believe it actually separates the concerns nicely.
::: tip TIP
_If you have errors when using custom modules,
@@ -138,10 +149,11 @@ try adding this to your webpack config_
```js
new webpack.ProvidePlugin({
- 'window.Quill': 'quill/dist/quill.js',
- 'Quill': 'quill/dist/quill.js',
-}),
+ "window.Quill": "quill/dist/quill.js",
+ Quill: "quill/dist/quill.js"
+});
```
+
:::
### Version 1 - **_Import and Register Yourself_**
@@ -191,17 +203,21 @@ export default {
-
### Version 2 - **_You Import | Vue2Editor Registers_**
-1. Import your custom modules
-2. Use the `customModules` prop to declare an array of module(s).
-3. Add the necessary configuration for those modules in the `editorOptions` object under modules as seen below
+1. Import your custom modules
+2. Use the `customModules` prop to declare an array of module(s).
+3. Add the necessary configuration for those modules in the `editorOptions` object under modules as seen below
```vue
-
+
+
@@ -240,6 +256,7 @@ export default {
Give the editor instance a `ref` property
<<< @/docs/.vuepress/code-examples/source/set-focus.vue
+
## Listening For Events
diff --git a/docs/faq/README.md b/docs/faq/README.md
deleted file mode 100755
index 4008836..0000000
--- a/docs/faq/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-sidebar: auto
----
-
-## Extra Examples
-
-- Setting editor height
-- Array for custom toolbar
-- element `id` for custom toolbar
-
-# FAQ
-
-## Usage Via CDN
-
-https://cdn.jsdelivr.net/npm/vue2-editor@2.5.0/dist/vue2-editor.min.js
diff --git a/docs/guide.md b/docs/guide.md
new file mode 100644
index 0000000..333200a
--- /dev/null
+++ b/docs/guide.md
@@ -0,0 +1,90 @@
+# Guide
+
+## Installation
+
+### Using CDN
+
+The plugin will automatically install itself as a Vue plugin.
+
+
+
+
+
+```html
+
+
+```
+
+### NPM
+
+```sh
+npm install vue2-editor
+```
+
+### Yarn
+
+```sh
+yarn add vue2-editor
+```
+
+
+
+## Usage
+
+There are two ways setup and use Vue2Editor. You can either set it up globally as a Vue plugin or import the `VueEditor` component to locally register and use it. Examples of both way are below.
+
+### Globally
+
+```js
+import Vue from "vue";
+import Vue2Editor from "vue2-editor";
+
+Vue.use(Vue2Editor);
+```
+
+### Local Import
+
+
+
+```js
+// Basic Use - Covers most scenarios
+import { VueEditor } from "vue2-editor";
+
+// Advanced Use - Hook into Quill's API for Custom Functionality
+import { VueEditor, Quill } from "vue2-editor";
+```
+
+
+
+## Modular Version
+
+As of version 2.9, you can use the modular version which includes only the JavaScript.
+This allows for more control and customization. Also, this allows for other Quill themes to be used such as Bubble.
+
+<<< @/docs/.vuepress/snippets/modular.vue
+
+## Nuxt.js
+
+Add `vue2-editor/nuxt` to modules section of `nuxt.config.js`
+
+```javascript
+{
+ modules: ["vue2-editor/nuxt"];
+}
+```
+
+To avoid seeing warnings from Vue about a mismatch in content, you'll need to
+wrap the `VueEditor` component with the `client-only` component Nuxt provides as
+shown here:
+
+```html
+
+
+
+```
+
+
diff --git a/docs/notes.md b/docs/notes.md
new file mode 100644
index 0000000..d234159
--- /dev/null
+++ b/docs/notes.md
@@ -0,0 +1,30 @@
+# Notes
+
+## Accessing Quill's Functionality
+
+All of Quill's functionality referenced in their docs is available by providing the `VueEditor` component a `ref` attribute and then accessing `quill` from that reference.
+
+**For example:**
+
+```vue
+
+
+ Get Text
+
+
+
+
+
+```
diff --git a/docs/playground.md b/docs/playground.md
index b43423f..bb5f8b3 100644
--- a/docs/playground.md
+++ b/docs/playground.md
@@ -1,10 +1,9 @@
# Playground For Testing
-
**Input**
-``` md
-<<< @/../@vuepress/markdown/__tests__/fragments/snippet.js{2}
+```md
+<<< @/../@vuepress/markdown/**tests**/fragments/snippet.js{2}
```
**Output**
diff --git a/nuxt/index.js b/nuxt/index.js
new file mode 100644
index 0000000..c7165cc
--- /dev/null
+++ b/nuxt/index.js
@@ -0,0 +1,11 @@
+const { resolve } = require("path");
+
+export default function nuxtVue2Editor() {
+ this.addPlugin({
+ mode: "client",
+ src: resolve(__dirname, "plugin.js"),
+ fileName: "vue2-editor.js"
+ });
+}
+
+module.exports.meta = require("../package.json");
diff --git a/nuxt/plugin.js b/nuxt/plugin.js
new file mode 100644
index 0000000..2617d8a
--- /dev/null
+++ b/nuxt/plugin.js
@@ -0,0 +1,4 @@
+import Vue from "vue";
+import Vue2Editor from "vue2-editor";
+
+Vue.use(Vue2Editor);
diff --git a/package.json b/package.json
index 59c761c..d834263 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vue2-editor",
- "version": "2.8.1",
+ "version": "2.10.3",
"description": "HTML editor using Vue.js 2, and Quill.js, an open source editor",
"author": {
"name": "David Royer",
@@ -9,19 +9,21 @@
"license": "MIT",
"scripts": {
"lint": "vue-cli-service lint",
- "build": "vue-cli-service build",
+ "build": "BUILD_TYPE=modular vue-cli-service build",
+ "build:modular": "BUILD_TYPE=modular vue-cli-service build",
"demo": "vue-cli-service demo",
"dev": "vue-cli-service serve",
"docs": "vue-cli-service docs --mode serve",
"docs:build": "vue-cli-service docs --mode build",
"docs:preview": "http-server docs/.vuepress/dist",
- "release": "standard-version",
- "release:alpha": "standard-version --prerelease alpha"
+ "release": "standard-version && git push --follow-tags && npm publish",
+ "release:next": "standard-version --prerelease next && git push --follow-tags origin dev && npm publish --tag next",
+ "release:ssr": "standard-version --prerelease ssr && git push --follow-tags origin ssr && npm publish --tag ssr",
+ "update:vp": "yarn upgrade vue-cli-plugin-vplugin"
},
"standard-version": {
"scripts": {
- "postbump": "yarn build && git add dist && git commit -m 'chore: new build'",
- "posttag": "git push --follow-tags && npm publish"
+ "postbump": "npm run build && git add dist && git commit -m 'chore: new build'"
},
"types": [
{
@@ -38,8 +40,7 @@
},
{
"type": "docs",
- "hidden": false,
- "section": "Documentation"
+ "hidden": true
},
{
"type": "imp",
@@ -68,10 +69,7 @@
"unpkg": "dist/vue2-editor.umd.min.js",
"files": [
"dist",
- "dist/vue2-editor.common.js",
- "dist/vue2-editor.umd.min.js",
- "dist/vue2-editor.umd.js",
- "dist/vue2-editor.esm.js"
+ "nuxt"
],
"dependencies": {
"quill": "^1.3.6"
@@ -84,6 +82,7 @@
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-prettier": "^4.0.1",
"@vuepress/plugin-google-analytics": "^1.0.0-rc.1",
+ "axios": "^0.21.1",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-prettier": "^3.1.0",
@@ -98,11 +97,10 @@
"sass-loader": "^7.1.0",
"standard-version": "^6.0.1",
"vue": "^2.6.10",
- "vue-cli-plugin-vplugin": "davidroyer/vue-cli-plugin-vplugin",
+ "vue-cli-plugin-vplugin": "latest",
"vue-router": "^3.0.6",
"vue-template-compiler": "^2.5.21",
"vuepress-plugin-demo-block": "^0.7.2",
- "vuepress-plugin-demo-code": "^0.3.5",
"vuepress-plugin-live": "^1.1.0"
},
"peerDependencies": {},
diff --git a/src/App.vue b/src/App.vue
index 5c430a0..036ea92 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,103 +1,108 @@
-
-
Welcome to Your Plugin in Vue.jss
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ @focus="onEditorFocus"
+ @blur="onEditorBlur"
+ @imageAdded="handleImageAdded"
+ @image-removed="handleImageRemoved"
+ />