{"version":3,"sources":["webpack:///./src/views/components/extra-components/quill-editor/QuillEditor.vue","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorThemeSnow.vue","webpack:///src/views/components/extra-components/quill-editor/QuillEditorThemeSnow.vue","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorThemeSnow.vue?68a0","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorThemeSnow.vue?70ce","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorThemeBubble.vue","webpack:///src/views/components/extra-components/quill-editor/QuillEditorThemeBubble.vue","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorThemeBubble.vue?700d","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorThemeBubble.vue?58c3","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorCustomToolbar.vue","webpack:///src/views/components/extra-components/quill-editor/QuillEditorCustomToolbar.vue","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorCustomToolbar.vue?5c64","webpack:///./src/views/components/extra-components/quill-editor/QuillEditorCustomToolbar.vue?1f02","webpack:///src/views/components/extra-components/quill-editor/QuillEditor.vue","webpack:///./src/views/components/extra-components/quill-editor/QuillEditor.vue?8033","webpack:///./src/views/components/extra-components/quill-editor/QuillEditor.vue?e1e3"],"names":["render","_vm","this","_c","_self","attrs","_m","staticRenderFns","staticClass","_v","_s","content","slot","data","components","Prism","component","editorOption","theme","modules","toolbar","methods","customButtonClick","alert","QuillEditorThemeSnow","QuillEditorThemeBubble","QuillEditorCustomToolbar"],"mappings":"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","file":"js/chunk-2d0c08d4.55216698.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"extra-component-quill-editor-demo\"}},[_vm._m(0),_c('quill-editor-theme-snow'),_c('quill-editor-theme-bubble'),_c('quill-editor-custom-toolbar')],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('p',{staticClass:\"mb-4\"},[_c('a',{attrs:{\"href\":\"https://surmon-china.github.io/vue-quill-editor/\",\"target\":\"_blank\",\"rel\":\"nofollow\"}},[_vm._v(\"Vue-Quill-Editor\")]),_vm._v(\" editor component for Vue, support SPA and SSR. Read full documnetation \"),_c('a',{attrs:{\"href\":\"https://quilljs.com/docs/quickstart/\",\"target\":\"_blank\",\"rel\":\"nofollow\"}},[_vm._v(\"here\")])])\n}]\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Theme Snow\",\"code-toggler\":\"\"}},[_c('p',{staticClass:\"mb-5\"},[_vm._v(\"Snow is a clean, flat toolbar theme\")]),_c('prism',{staticClass:\"rounded-lg\"},[_vm._v(\" \"+_vm._s(_vm.content)+\" \")]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <quill-editor v-model=\\\"content\\\"></quill-editor> </template> <script> // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' export default { data() { return { content: `...`, } }, components: { quillEditor, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: QuillEditorThemeSnow.vue\r\n    Description: Quill editor with snow theme\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Theme Snow\" code-toggler>\r\n        <p class=\"mb-5\">Snow is a clean, flat toolbar theme</p>\r\n        <!-- <quill-editor v-model=\"content\"></quill-editor> -->\r\n\r\n        <prism class=\"rounded-lg\"> {{ content }} </prism>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;quill-editor v-model=&quot;content&quot;&gt;&lt;/quill-editor&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\n// require styles\r\nimport 'quill/dist/quill.core.css'\r\nimport 'quill/dist/quill.snow.css'\r\nimport 'quill/dist/quill.bubble.css'\r\n\r\nimport { quillEditor } from 'vue-quill-editor'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      content: `...`,\r\n    }\r\n  },\r\n  components: {\r\n    quillEditor,\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\n// require styles\r\n// import 'quill/dist/quill.core.css'\r\n// import 'quill/dist/quill.snow.css'\r\n// import 'quill/dist/quill.bubble.css'\r\n\r\n// import { quillEditor } from 'vue-quill-editor'\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            content: `\r\n<h2><span class=\"ql-font-serif\">Quill Rich Text Editor</span></h2><br />\r\n<p>Quill is a free, <a href=\"https://github.com/quilljs/quill/\">open source</a> WYSIWYG editor built for the modern web. With its <a href=\"http://quilljs.com/docs/modules/\">modular architecture</a> and expressive <a href=\"http://quilljs.com/docs/api/\">API</a>, it is completely customizable to fit any need.</p><br />\r\n<iframe class=\"ql-video ql-align-center\" src=\"https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0\" width=\"560\" height=\"238\"></iframe>\r\n            `,\r\n        }\r\n    },\r\n    components: {\r\n        // quillEditor,\r\n        Prism\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditorThemeSnow.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditorThemeSnow.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./QuillEditorThemeSnow.vue?vue&type=template&id=e0fb4fca&\"\nimport script from \"./QuillEditorThemeSnow.vue?vue&type=script&lang=js&\"\nexport * from \"./QuillEditorThemeSnow.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Theme Bubble\",\"code-toggler\":\"\"}},[_c('p',{staticClass:\"mb-5\"},[_vm._v(\"Bubble is a simple tooltip based theme\")]),_c('prism',{staticClass:\"rounded-lg\"},[_vm._v(\" \"+_vm._s(_vm.content)+\" \")]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <quill-editor v-model=\\\"content\\\" :options=\\\"editorOption\\\"></quill-editor> </template> <script> // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' export default { data() { return { editorOption: { theme: 'bubble', }, content: `...`, } }, components: { quillEditor, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: QuillEditorThemeBubble.vue\r\n    Description: Quill editor with snow theme\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Theme Bubble\" code-toggler>\r\n        <p class=\"mb-5\">Bubble is a simple tooltip based theme</p>\r\n        <!-- <quill-editor v-model=\"content\" :options=\"editorOption\"></quill-editor> -->\r\n\r\n        <prism class=\"rounded-lg\"> {{ content }} </prism>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;quill-editor v-model=&quot;content&quot; :options=&quot;editorOption&quot;&gt;&lt;/quill-editor&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\n// require styles\r\nimport 'quill/dist/quill.core.css'\r\nimport 'quill/dist/quill.snow.css'\r\nimport 'quill/dist/quill.bubble.css'\r\n\r\nimport { quillEditor } from 'vue-quill-editor'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      editorOption: {\r\n        theme: 'bubble',\r\n      },\r\n      content: `...`,\r\n    }\r\n  },\r\n  components: {\r\n    quillEditor,\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\n// require styles\r\n// import 'quill/dist/quill.core.css'\r\n// import 'quill/dist/quill.snow.css'\r\n// import 'quill/dist/quill.bubble.css'\r\n\r\n// import { quillEditor } from 'vue-quill-editor'\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            editorOption: {\r\n                theme: 'bubble',\r\n            },\r\n            content: `\r\n<h2><span class=\"ql-font-serif\">Quill Rich Text Editor</span></h2><br />\r\n<p>Quill is a free, <a href=\"https://github.com/quilljs/quill/\">open source</a> WYSIWYG editor built for the modern web. With its <a href=\"http://quilljs.com/docs/modules/\">modular architecture</a> and expressive <a href=\"http://quilljs.com/docs/api/\">API</a>, it is completely customizable to fit any need.</p><br />\r\n<iframe class=\"ql-video ql-align-center\" src=\"https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0\" width=\"560\" height=\"238\"></iframe>\r\n            `,\r\n        }\r\n    },\r\n    components: {\r\n        // quillEditor,\r\n        Prism\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditorThemeBubble.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditorThemeBubble.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./QuillEditorThemeBubble.vue?vue&type=template&id=4ae88a92&\"\nimport script from \"./QuillEditorThemeBubble.vue?vue&type=script&lang=js&\"\nexport * from \"./QuillEditorThemeBubble.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Custom Toolbar\",\"code-toggler\":\"\"}},[_c('p',{staticClass:\"mb-5\"},[_vm._v(\"You have freedom to create your own custom toolbar\")]),_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full md:w-1/2\"}),_c('div',{staticClass:\"vx-col w-full md:w-1/2 flex\"},[_c('prism',{staticClass:\"rounded-lg\"},[_vm._v(\" \"+_vm._s(_vm.content)+\" \")])],1)]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <quill-editor v-model=\\\"content\\\" :options=\\\"editorOption\\\"> <div id=\\\"toolbar\\\" slot=\\\"toolbar\\\"> <!-- Add a bold button --> <button class=\\\"ql-bold\\\">Bold</button> <button class=\\\"ql-italic\\\">Italic</button> <!-- Add font size dropdown --> <select class=\\\"ql-size\\\"> <option value=\\\"small\\\"></option> <!-- Note a missing, thus falsy value, is used to reset to default --> <option selected></option> <option value=\\\"large\\\"></option> <option value=\\\"huge\\\"></option> </select> <select class=\\\"ql-font\\\"> <option selected=\\\"selected\\\"></option> <option value=\\\"serif\\\"></option> <option value=\\\"monospace\\\"></option> </select> <!-- Add subscript and superscript buttons --> <button class=\\\"ql-script\\\" value=\\\"sub\\\"></button> <button class=\\\"ql-script\\\" value=\\\"super\\\"></button> <!-- You can also add your own --> <button style=\\\"width:auto\\\" @click=\\\"customButtonClick\\\">Click here</button> </div> </quill-editor> </template> <script> // require styles import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' import { quillEditor } from 'vue-quill-editor' export default { data() { return { editorOption: { modules: { toolbar: '#toolbar' } }, content: `...`, } }, components: { quillEditor, }, methods: { customButtonClick() { alert(\\\"Button clicked!\\\"); } } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: QuillEditorCustomToolbar.vue\r\n    Description: Quill editor with custom toolbar\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Custom Toolbar\" code-toggler>\r\n        <p class=\"mb-5\">You have freedom to create your own custom toolbar</p>\r\n        <div class=\"vx-row\">\r\n            <div class=\"vx-col w-full md:w-1/2\">\r\n                <!-- <quill-editor v-model=\"content\" :options=\"editorOption\"> \r\n                    <div id=\"toolbar\" slot=\"toolbar\">\r\n\r\n                        Add a bold button \r\n                        <button class=\"ql-bold\">Bold</button>\r\n                        <button class=\"ql-italic\">Italic</button>\r\n\r\n                        Add font size dropdown \r\n                        <select class=\"ql-size\">\r\n                            <option value=\"small\"></option>\r\n\r\n                            Note a missing, thus falsy value, is used to reset to default \r\n                            <option selected></option>\r\n                            <option value=\"large\"></option>\r\n                            <option value=\"huge\"></option>\r\n                        </select>\r\n\r\n                        <select class=\"ql-font\">\r\n                            <option selected=\"selected\"></option>\r\n                            <option value=\"serif\"></option>\r\n                            <option value=\"monospace\"></option>\r\n                        </select>\r\n\r\n                        Add subscript and superscript buttons\r\n                        <button class=\"ql-script\" value=\"sub\"></button>\r\n                        <button class=\"ql-script\" value=\"super\"></button>\r\n\r\n                        You can also add your own\r\n                        <button style=\"width:auto\" @click=\"customButtonClick\">Click here</button>\r\n                    </div>\r\n                </quill-editor> -->\r\n            </div>\r\n\r\n            <div class=\"vx-col w-full md:w-1/2 flex\">\r\n                <prism class=\"rounded-lg\"> {{ content }} </prism>\r\n            </div>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;quill-editor v-model=&quot;content&quot; :options=&quot;editorOption&quot;&gt;\r\n\r\n    &lt;div id=&quot;toolbar&quot; slot=&quot;toolbar&quot;&gt;\r\n\r\n      &lt;!-- Add a bold button --&gt;\r\n      &lt;button class=&quot;ql-bold&quot;&gt;Bold&lt;/button&gt;\r\n      &lt;button class=&quot;ql-italic&quot;&gt;Italic&lt;/button&gt;\r\n\r\n      &lt;!-- Add font size dropdown --&gt;\r\n      &lt;select class=&quot;ql-size&quot;&gt;\r\n        &lt;option value=&quot;small&quot;&gt;&lt;/option&gt;\r\n        &lt;!-- Note a missing, thus falsy value, is used to reset to default --&gt;\r\n        &lt;option selected&gt;&lt;/option&gt;\r\n        &lt;option value=&quot;large&quot;&gt;&lt;/option&gt;\r\n        &lt;option value=&quot;huge&quot;&gt;&lt;/option&gt;\r\n      &lt;/select&gt;\r\n\r\n      &lt;select class=&quot;ql-font&quot;&gt;\r\n        &lt;option selected=&quot;selected&quot;&gt;&lt;/option&gt;\r\n        &lt;option value=&quot;serif&quot;&gt;&lt;/option&gt;\r\n        &lt;option value=&quot;monospace&quot;&gt;&lt;/option&gt;\r\n      &lt;/select&gt;\r\n\r\n      &lt;!-- Add subscript and superscript buttons --&gt;\r\n      &lt;button class=&quot;ql-script&quot; value=&quot;sub&quot;&gt;&lt;/button&gt;\r\n      &lt;button class=&quot;ql-script&quot; value=&quot;super&quot;&gt;&lt;/button&gt;\r\n\r\n      &lt;!-- You can also add your own --&gt;\r\n      &lt;button style=&quot;width:auto&quot; @click=&quot;customButtonClick&quot;&gt;Click here&lt;/button&gt;\r\n    &lt;/div&gt;\r\n  &lt;/quill-editor&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\n// require styles\r\nimport 'quill/dist/quill.core.css'\r\nimport 'quill/dist/quill.snow.css'\r\nimport 'quill/dist/quill.bubble.css'\r\n\r\nimport { quillEditor } from 'vue-quill-editor'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      editorOption: {\r\n        modules: {\r\n          toolbar: '#toolbar'\r\n        }\r\n      },\r\n      content: `...`,\r\n    }\r\n  },\r\n  components: {\r\n    quillEditor,\r\n  },\r\n  methods: {\r\n    customButtonClick() {\r\n      alert(&quot;Button clicked!&quot;);\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\n// require styles\r\n// import 'quill/dist/quill.core.css'\r\n// import 'quill/dist/quill.snow.css'\r\n// import 'quill/dist/quill.bubble.css'\r\n\r\n// import { quillEditor } from 'vue-quill-editor'\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            editorOption: {\r\n                modules: {\r\n                    toolbar: '#toolbar'\r\n                }\r\n            },\r\n            content: `\r\n<h2><span class=\"ql-font-serif\">Quill Rich Text Editor</span></h2><br />\r\n<p>Quill is a free, <a href=\"https://github.com/quilljs/quill/\">open source</a> WYSIWYG editor built for the modern web. With its <a href=\"http://quilljs.com/docs/modules/\">modular architecture</a> and expressive <a href=\"http://quilljs.com/docs/api/\">API</a>, it is completely customizable to fit any need.</p><br />\r\n<iframe class=\"ql-video ql-align-center\" src=\"https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0\" width=\"560\" height=\"238\"></iframe>\r\n            `,\r\n        }\r\n    },\r\n    components: {\r\n        // quillEditor,\r\n        Prism\r\n    },\r\n    methods: {\r\n        customButtonClick() {\r\n            alert(\"Button clicked!\");\r\n        }\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditorCustomToolbar.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditorCustomToolbar.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./QuillEditorCustomToolbar.vue?vue&type=template&id=2579a632&\"\nimport script from \"./QuillEditorCustomToolbar.vue?vue&type=script&lang=js&\"\nexport * from \"./QuillEditorCustomToolbar.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","    <!-- =========================================================================================\r\n    File Name: EditorQuillEditor.vue\r\n    Description: Quill editor\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n<template>\r\n    <div id=\"extra-component-quill-editor-demo\">\r\n\r\n        <p class=\"mb-4\"><a href=\"https://surmon-china.github.io/vue-quill-editor/\" target=\"_blank\" rel=\"nofollow\">Vue-Quill-Editor</a> editor component for Vue, support SPA and SSR. Read full documnetation <a href=\"https://quilljs.com/docs/quickstart/\" target=\"_blank\" rel=\"nofollow\">here</a></p>\r\n\r\n        <quill-editor-theme-snow></quill-editor-theme-snow>\r\n        <quill-editor-theme-bubble></quill-editor-theme-bubble>\r\n        <quill-editor-custom-toolbar></quill-editor-custom-toolbar>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport QuillEditorThemeSnow from \"./QuillEditorThemeSnow.vue\"\r\nimport QuillEditorThemeBubble from \"./QuillEditorThemeBubble.vue\"\r\nimport QuillEditorCustomToolbar from \"./QuillEditorCustomToolbar.vue\"\r\n\r\nexport default {\r\n    components: {\r\n        QuillEditorThemeSnow,\r\n        QuillEditorThemeBubble,\r\n        QuillEditorCustomToolbar,\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditor.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./QuillEditor.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./QuillEditor.vue?vue&type=template&id=71f8380c&\"\nimport script from \"./QuillEditor.vue?vue&type=script&lang=js&\"\nexport * from \"./QuillEditor.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}