🙂Update to v3.0.0

README.md

@@ -134,7 +134,7 @@ Quill.register('modules/yourQuillModule', yourQuillModule)
       onEditorChange(event) {
         console.log('onEditorChange')
       }
-    }
+    },
     // Omit the same parts as in the following component sample code
     // ...
   }

config/build.conf.js

@@ -7,11 +7,10 @@ const resolve = dir => path.join(__dirname, '..', dir)
 
 module.exports = merge(baseConfig, {
   entry: {
-    'ssr': './src/ssr.js',
     'vue-quill-editor': './src/index.js'
   },
   externals: {
-    quill: 'quill',
+    quill: 'quill'
   },
   output: {
     path: path.resolve(__dirname, '../dist'),

dist/ssr.js

-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("quill")):"function"==typeof define&&define.amd?define(["quill"],e):"object"==typeof exports?exports.VueQuillEditor=e(require("quill")):t.VueQuillEditor=e(t.quill)}(this,function(t){return function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=5)}([function(e,n){e.exports=t},function(t,e,n){"use strict";var r=arguments;t.exports=Object.assign||function(t,e){for(var n=function(t,e,n){return"undefined"!=typeof Reflect&&Reflect&&Reflect.apply?Reflect.apply(t,e,n):t.call(e,n)},o=void 0,a=void 0,i=function(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),l=1;l<r.length;l++){o=Object(r[l]);for(var u in o)n(Object.prototype.hasOwnProperty,o,u)&&(i[u]=o[u]);if(Object.getOwnPropertySymbols){a=Object.getOwnPropertySymbols(o);for(var c=0;c<a.length;c++)n(Object.prototype.propIsEnumerable,o,a[c])&&(i[a[c]]=o[a[c]])}}return i}},function(t,e,n){"use strict";t.exports={theme:"snow",boundary:document.body,modules:{toolbar:[["bold","italic","underline","strike"],["blockquote","code-block"],[{header:1},{header:2}],[{list:"ordered"},{list:"bullet"}],[{script:"sub"},{script:"super"}],[{indent:"-1"},{indent:"+1"}],[{direction:"rtl"}],[{size:["small",!1,"large","huge"]}],[{header:[1,2,3,4,5,6,!1]}],[{color:[]},{background:[]}],[{font:[]}],[{align:[]}],["clean"],["link","image","video"]]},placeholder:"Insert text here ...",readOnly:!1}},,,function(t,e,n){"use strict";var r=n(2),o=n(1),a=window.Quill||n(0),i={Quill:a,install:function(t,e){var n=function(t,e,n){var r=null;return e.arg?r=e.arg:n.data.attrs&&n.data.attrs.instanceName?r=n.data.attrs.instanceName:t.id&&(r=t.id),r||"quill"};t.directive("quill",{inserted:function(t,i,l){var u=l.context,c=i.value||{},d=n(t,i,l),s=u[d],f=function(t,e,n){var r=t.data&&t.data.on||t.componentOptions&&t.componentOptions.listeners;r&&r[e]&&r[e].fns(n)};if(!s){var p=o({},r,e||{},c);s=u[d]=new a(t,p);var b=l.data.model,v=l.data.attrs?l.data.attrs.content:null,g=l.data.attrs?l.data.attrs.disabled:null;(b||v)&&s.pasteHTML(b?b.value:v),g&&s.enable(!1),s.on("selection-change",function(t){t?f(l,"focus",s):f(l,"blur",s)}),s.on("text-change",function(e,n,r){var o=t.children[0].innerHTML,a=s.getText();"<p><br></p>"===o&&(o="",s.root.innerHTML=o),b&&b.callback(o),f(l,"change",{text:a,html:o,quill:s})}),f(l,"ready",s)}},componentUpdated:function(t,e,r){var o=r.context,a=n(t,e,r),i=(e.value,o[a]);if(i){var l=r.data.model,u=r.data.attrs?r.data.attrs.content:null,c=r.data.attrs?r.data.attrs.disabled:null,d=l?l.value:u,s=t.children[0].innerHTML;if(i.enable(!c),d){if(d!=s){var f=i.getSelection();i.root.innerHTML=d,setTimeout(function(){i.setSelection(f)})}}else i.setText("")}},unbind:function(t,e,n){n.context[e.arg]&&(n.context[e.arg]=null,delete n.context[e.arg])}})}};t.exports=i}])});
\ No newline at end of file
+'use strict';
+
+var Quill = require('quill');
+var defaultOptions = require('../utils/options');
+
+var quillEditor = function quillEditor(globalOptions) {
+  var getInstanceName = function getInstanceName(el, binding, vnode) {
+    var instanceName = null;
+    if (binding.arg) {
+      instanceName = binding.arg;
+    } else if (vnode.data.attrs && (vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'])) {
+      instanceName = vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'];
+    } else if (el.id) {
+      instanceName = el.id;
+    }
+    return instanceName || 'quill';
+  };
+
+  return {
+    inserted: function inserted(el, binding, vnode) {
+      var self = vnode.context;
+      var options = binding.value || {};
+      var instanceName = getInstanceName(el, binding, vnode);
+      var quill = self[instanceName];
+
+      var eventEmit = function eventEmit(vnode, name, data) {
+        var handlers = vnode.data && vnode.data.on || vnode.componentOptions && vnode.componentOptions.listeners;
+        if (handlers && handlers[name]) handlers[name].fns(data);
+      };
+
+      if (!quill) {
+        var quillOptions = ['theme', 'modules', 'readOnly', 'boundary', 'placeholder'].reduce(function (ops, key) {
+          var _ref = [options[key], globalOptions[key], defaultOptions[key]],
+              ov = _ref[0],
+              gv = _ref[1],
+              dv = _ref[2];
+
+          if (ov !== undefined) {
+            ops[key] = ov;
+          } else if (gv !== undefined) {
+            ops[key] = gv;
+          } else if (dv !== undefined) {
+            ops[key] = dv;
+          }
+          return ops;
+        }, {});
+
+        var omt = options.modules ? options.modules.toolbar : null,
+            gomt = globalOptions.modules ? globalOptions.modules.toolbar : null,
+            domt = defaultOptions.modules ? defaultOptions.modules.toolbar : null;
+
+        quillOptions.modules.toolbar = quillOptions.modules.toolbar || (omt ? omt : gomt ? gomt : domt);
+
+        quill = self[instanceName] = new Quill(el, quillOptions);
+
+        var model = vnode.data.model;
+        var _value = vnode.data.attrs ? vnode.data.attrs.value : null;
+        var _content = vnode.data.attrs ? vnode.data.attrs.content : null;
+        var disabled = vnode.data.attrs ? vnode.data.attrs.disabled : null;
+        var content = model ? model.value : _value || _content;
+
+        if (content) {
+          quill.pasteHTML(content);
+        }
+
+        if (disabled) {
+          quill.enable(false);
+        }
+
+        quill.on('selection-change', function (range) {
+          if (!range) {
+            eventEmit(vnode, 'blur', quill);
+          } else {
+            eventEmit(vnode, 'focus', quill);
+          }
+        });
+
+        quill.on('text-change', function (delta, oldDelta, source) {
+          var html = el.children[0].innerHTML;
+          var text = quill.getText();
+          if (html === '<p><br></p>') {
+            html = '';
+            quill.root.innerHTML = html;
+          }
+          if (model) {
+            model.callback(html);
+          }
+          eventEmit(vnode, 'input', html);
+          eventEmit(vnode, 'change', { text: text, html: html, quill: quill });
+        });
+
+        eventEmit(vnode, 'ready', quill);
+      }
+    },
+    componentUpdated: function componentUpdated(el, binding, vnode) {
+      var self = vnode.context;
+      var instanceName = getInstanceName(el, binding, vnode);
+      var options = binding.value || {};
+      var quill = self[instanceName];
+      if (quill) {
+        var model = vnode.data.model;
+        var _value = vnode.data.attrs ? vnode.data.attrs.value : null;
+        var _content = vnode.data.attrs ? vnode.data.attrs.content : null;
+        var disabled = vnode.data.attrs ? vnode.data.attrs.disabled : null;
+        var content = model ? model.value : _value || _content;
+        var newData = content;
+        var oldData = el.children[0].innerHTML;
+        quill.enable(!disabled);
+        if (newData) {
+          if (newData != oldData) {
+            var range = quill.getSelection();
+            quill.root.innerHTML = newData;
+            setTimeout(function () {
+              quill.setSelection(range);
+            });
+          }
+        } else {
+          quill.setText('');
+        }
+      }
+    },
+    unbind: function unbind(el, binding, vnode) {
+      if (vnode.context[binding.arg]) {
+        vnode.context[binding.arg] = null;
+        delete vnode.context[binding.arg];
+      }
+    }
+  };
+};
+
+var VueQuillEditor = {
+  Quill: Quill,
+
+  quillEditor: quillEditor({}),
+
+  install: function install(Vue) {
+    var globalOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    Vue.directive('quill', quillEditor(globalOptions));
+  }
+};
+
+module.exports = VueQuillEditor;

dist/vue-quill-editor.js

-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("quill")):"function"==typeof define&&define.amd?define(["quill"],e):"object"==typeof exports?exports.VueQuillEditor=e(require("quill")):t.VueQuillEditor=e(t.quill)}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=4)}([function(e,n){e.exports=t},function(t,e,n){"use strict";var i=arguments;t.exports=Object.assign||function(t,e){for(var n=function(t,e,n){return"undefined"!=typeof Reflect&&Reflect&&Reflect.apply?Reflect.apply(t,e,n):t.call(e,n)},o=void 0,r=void 0,l=function(t){if(null===t||void 0===t)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(t)}(t),u=1;u<i.length;u++){o=Object(i[u]);for(var s in o)n(Object.prototype.hasOwnProperty,o,s)&&(l[s]=o[s]);if(Object.getOwnPropertySymbols){r=Object.getOwnPropertySymbols(o);for(var c=0;c<r.length;c++)n(Object.prototype.propIsEnumerable,o,r[c])&&(l[r[c]]=o[r[c]])}}return l}},function(t,e,n){"use strict";t.exports={theme:"snow",boundary:document.body,modules:{toolbar:[["bold","italic","underline","strike"],["blockquote","code-block"],[{header:1},{header:2}],[{list:"ordered"},{list:"bullet"}],[{script:"sub"},{script:"super"}],[{indent:"-1"},{indent:"+1"}],[{direction:"rtl"}],[{size:["small",!1,"large","huge"]}],[{header:[1,2,3,4,5,6,!1]}],[{color:[]},{background:[]}],[{font:[]}],[{align:[]}],["clean"],["link","image","video"]]},placeholder:"Insert text here ...",readOnly:!1}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(6),o=n.n(i),r=n(8),l=n(7),u=l(o.a,r.a,!1,null,null,null);e.default=u.exports},function(t,e,n){"use strict";var i=window.Quill||n(0),o=n(3).default,r={Quill:i,quillEditor:o,install:function(t,e){e&&(o.props.globalOptions.default=function(){return e}),t.component(o.name,o)}};t.exports=r},,function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(2),o=n(1),r=window.Quill||n(0);e.default={name:"quill-editor",data:function(){return{_options:{},_content:"",defaultOptions:i}},props:{content:String,value:String,disabled:Boolean,options:{type:Object,required:!1,default:function(){return{}}},globalOptions:{type:Object,required:!1,default:function(){return{}}}},mounted:function(){this.initialize()},beforeDestroy:function(){this.quill=null,delete this.quill},methods:{initialize:function(){var t=this;this.$el&&(this._options=o({},this.defaultOptions,this.globalOptions,this.options),this.quill=new r(this.$refs.editor,this._options),(this.value||this.content)&&this.quill.pasteHTML(this.value||this.content),this.disabled&&this.quill.enable(!1),this.quill.on("selection-change",function(e){e?t.$emit("focus",t.quill):t.$emit("blur",t.quill)}),this.quill.on("text-change",function(e,n,i){var o=t.$refs.editor.children[0].innerHTML,r=t.quill,l=t.quill.getText();"<p><br></p>"===o&&(o=""),t._content=o,t.$emit("input",t._content),t.$emit("change",{html:o,text:l,quill:r})}),this.$emit("ready",this.quill))}},watch:{content:function(t,e){this.quill&&(t&&t!==this._content?(this._content=t,this.quill.pasteHTML(t)):t||this.quill.setText(""))},value:function(t,e){this.quill&&(t&&t!==this._content?(this._content=t,this.quill.pasteHTML(t)):t||this.quill.setText(""))},disabled:function(t,e){this.quill&&this.quill.enable(!t)}}}},function(t,e){t.exports=function(t,e,n,i,o,r){var l,u=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(l=t,u=t.default);var c="function"==typeof u?u.options:u;e&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0),n&&(c.functional=!0),o&&(c._scopeId=o);var a;if(r?(a=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=a):i&&(a=i),a){var d=c.functional,f=d?c.render:c.beforeCreate;d?(c._injectStyles=a,c.render=function(t,e){return a.call(e),f(t,e)}):c.beforeCreate=f?[].concat(f,a):[a]}return{esModule:l,exports:u,options:c}}},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"quill-editor"},[t._t("toolbar"),t._v(" "),n("div",{ref:"editor"})],2)},o=[],r={render:i,staticRenderFns:o};e.a=r}])});
\ No newline at end of file
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("quill")):"function"==typeof define&&define.amd?define(["quill"],e):"object"==typeof exports?exports.VueQuillEditor=e(require("quill")):t.VueQuillEditor=e(t.quill)}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=2)}([function(e,n){e.exports=t},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(3),o=n.n(i),l=n(5),r=n(4),u=r(o.a,l.a,!1,null,null,null);e.default=u.exports},function(t,e,n){"use strict";var i=window.Quill||n(0),o=n(1).default,l={Quill:i,quillEditor:o,install:function(t,e){e&&(o.props.globalOptions.default=function(){return e}),t.component(o.name,o)}};t.exports=l},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=window.Quill||n(0),o=n(6);e.default={name:"quill-editor",data:function(){return{_options:{},_content:"",defaultOptions:o}},props:{content:String,value:String,disabled:Boolean,options:{type:Object,required:!1,default:function(){return{}}},globalOptions:{type:Object,required:!1,default:function(){return{}}}},mounted:function(){this.initialize()},beforeDestroy:function(){this.quill=null,delete this.quill},methods:{initialize:function(){var t=this;if(this.$el){var e=this.options,n=this.defaultOptions,o=this.globalOptions;this._options=["theme","modules","readOnly","boundary","placeholder"].reduce(function(t,i){var l=[e[i],o[i],n[i]],r=l[0],u=l[1],s=l[2];return void 0!==r?t[i]=r:void 0!==u?t[i]=u:void 0!==s&&(t[i]=s),t},{});var l=e.modules?e.modules.toolbar:null,r=o.modules?o.modules.toolbar:null,u=n.modules?n.modules.toolbar:null;this._options.modules.toolbar=this._options.modules.toolbar||l||r||u,this.quill=new i(this.$refs.editor,this._options),(this.value||this.content)&&this.quill.pasteHTML(this.value||this.content),this.disabled&&this.quill.enable(!1),this.quill.on("selection-change",function(e){e?t.$emit("focus",t.quill):t.$emit("blur",t.quill)}),this.quill.on("text-change",function(e,n,i){var o=t.$refs.editor.children[0].innerHTML,l=t.quill,r=t.quill.getText();"<p><br></p>"===o&&(o=""),t._content=o,t.$emit("input",t._content),t.$emit("change",{html:o,text:r,quill:l})}),this.$emit("ready",this.quill)}}},watch:{content:function(t,e){this.quill&&(t&&t!==this._content?(this._content=t,this.quill.pasteHTML(t)):t||this.quill.setText(""))},value:function(t,e){this.quill&&(t&&t!==this._content?(this._content=t,this.quill.pasteHTML(t)):t||this.quill.setText(""))},disabled:function(t,e){this.quill&&this.quill.enable(!t)}}}},function(t,e){t.exports=function(t,e,n,i,o,l){var r,u=t=t||{},s=typeof t.default;"object"!==s&&"function"!==s||(r=t,u=t.default);var a="function"==typeof u?u.options:u;e&&(a.render=e.render,a.staticRenderFns=e.staticRenderFns,a._compiled=!0),n&&(a.functional=!0),o&&(a._scopeId=o);var d;if(l?(d=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(l)},a._ssrRegister=d):i&&(d=i),d){var c=a.functional,f=c?a.render:a.beforeCreate;c?(a._injectStyles=d,a.render=function(t,e){return d.call(e),f(t,e)}):a.beforeCreate=f?[].concat(f,d):[d]}return{esModule:r,exports:u,options:a}}},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"quill-editor"},[t._t("toolbar"),t._v(" "),n("div",{ref:"editor"})],2)},o=[],l={render:i,staticRenderFns:o};e.a=l},function(t,e){t.exports={theme:"snow",boundary:document.body,modules:{toolbar:[["bold","italic","underline","strike"],["blockquote","code-block"],[{header:1},{header:2}],[{list:"ordered"},{list:"bullet"}],[{script:"sub"},{script:"super"}],[{indent:"-1"},{indent:"+1"}],[{direction:"rtl"}],[{size:["small",!1,"large","huge"]}],[{header:[1,2,3,4,5,6,!1]}],[{color:[]},{background:[]}],[{font:[]}],[{align:[]}],["clean"],["link","image","video"]]},placeholder:"Insert text here ...",readOnly:!1}}])});
\ No newline at end of file

package.json

@@ -38,7 +38,9 @@
     "vue editor"
   ],
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --config config/build.conf.js",
+    "build:spa": "cross-env NODE_ENV=production webpack --config config/build.conf.js",
+    "build:ssr": "babel src/ssr.js --out-file dist/ssr.js",
+    "build": "npm run build:spa && npm run build:ssr",
     "unit": "cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --watch",
     "test": "cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --single-run",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
@@ -47,14 +49,17 @@
   "dependencies": {
     "quill": "^1.3.4"
   },
+  "expDependencies": {
+    "node-sass": "^4.7.2",
+    "sass-loader": "^6.0.6",
+    "highlight.js": "^9.12.0",
+    "quill-image-drop-module": "^1.0.3",
+    "quill-image-resize-module": "^3.0.0"
+  },
   "devDependencies": {
-    "babel-core": "^6.24.1",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.1",
-    "cross-env": "^5.0.0",
-    "uglify-js": "^3.0.15",
     "autoprefixer": "^6.7.2",
     "babel-cli": "^6.23.0",
+    "babel-core": "^6.24.1",
     "babel-eslint": "^7.1.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-loader": "^6.2.10",
@@ -63,12 +68,15 @@
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",
     "babel-plugin-transform-export-extensions": "^6.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.0.0",
     "chai": "^3.5.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.1.0",
     "copy-webpack-plugin": "^4.0.0",
+    "cross-env": "^5.0.0",
     "css-loader": "^0.25.0",
     "eslint": "^3.14.1",
     "eslint-config-standard": "^6.1.0",
@@ -108,6 +116,7 @@
     "shelljs": "^0.7.4",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.8.0",
+    "uglify-js": "^3.0.15",
     "url-loader": "^0.5.7",
     "vue": "^2.5.0",
     "vue-hot-reload-api": "^1.2.0",

src/editor.vue

@@ -6,9 +6,8 @@
 </template>
 
 <script>
-  const defaultOptions = require('./options')
-  const objectAssign = require('./object-assign')
   const Quill = window.Quill || require('quill')
+  const defaultOptions = require('../utils/options')
 
   export default {
     name: 'quill-editor',
@@ -46,8 +45,28 @@
       initialize() {
         if (this.$el) {
 
-          // Options and instance
-          this._options = objectAssign({}, this.defaultOptions, this.globalOptions, this.options)
+          // Options
+          const { options, defaultOptions, globalOptions } = this
+          this._options = ['theme', 'modules', 'readOnly', 'boundary', 'placeholder'].reduce((ops, key) => {
+            const [ov, gv, dv] = [options[key], globalOptions[key], defaultOptions[key]]
+            if (ov !== undefined) {
+              ops[key] = ov
+            } else if (gv !== undefined) {
+              ops[key] = gv
+            } else if (dv !== undefined) {
+              ops[key] = dv
+            }
+            return ops
+          }, {})
+
+          const [omt, gomt, domt] = [
+            options.modules ? options.modules.toolbar : null,
+            globalOptions.modules ? globalOptions.modules.toolbar : null,
+            defaultOptions.modules ? defaultOptions.modules.toolbar : null
+          ]
+          this._options.modules.toolbar = this._options.modules.toolbar || (omt ? omt : (gomt ? gomt : domt))
+
+          // Instance
           this.quill = new Quill(this.$refs.editor, this._options)
 
           // Set editor content

src/index.js

@@ -12,9 +12,7 @@ const VueQuillEditor = {
   quillEditor,
   install(Vue, globalOptions) {
     if (globalOptions) {
-      quillEditor.props.globalOptions.default = () => {
-        return globalOptions
-      }
+      quillEditor.props.globalOptions.default = () => globalOptions
     }
     Vue.component(quillEditor.name, quillEditor)
   }

src/ssr.js

@@ -6,132 +6,163 @@
 */
 
 // Require sources.
-const defaultOptions = require('./options')
-const objectAssign = require('./object-assign')
-const Quill = window.Quill || require('quill')
-
-const quillEditor = {
-
-  // Quill
-  Quill,
+const Quill = require('quill')
+const defaultOptions = require('../utils/options')
+
+const quillEditor = globalOptions => {
+
+  // Get quill instace name in directive.
+  const getInstanceName = (el, binding, vnode) => {
+    let instanceName = null
+    if (binding.arg) {
+      instanceName = binding.arg
+    } else if (vnode.data.attrs && (vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'])) {
+      instanceName = (vnode.data.attrs.instanceName || vnode.data.attrs['instance-name'])
+    } else if (el.id) {
+      instanceName = el.id
+    }
+    return instanceName || 'quill'
+  }
 
-   // Global quill default options.
-  install(Vue, globalOptions) {
-
-    // Get quill instace name in directive.
-    const getInstanceName = (el, binding, vnode) => {
-      let instanceName = null
-      if (binding.arg) {
-        instanceName = binding.arg
-      } else if (vnode.data.attrs && vnode.data.attrs.instanceName) {
-        instanceName = vnode.data.attrs.instanceName
-      } else if (el.id) {
-        instanceName = el.id
+  return {
+    inserted(el, binding, vnode) {
+      const self = vnode.context
+      const options = binding.value || {}
+      const instanceName = getInstanceName(el, binding, vnode)
+      let quill = self[instanceName]
+
+       // Emit event in Vue directive.
+      const eventEmit = (vnode, name, data) => {
+        const handlers = (vnode.data && vnode.data.on) || 
+                         (vnode.componentOptions && vnode.componentOptions.listeners)
+        if (handlers && handlers[name]) handlers[name].fns(data)
       }
-      return instanceName || 'quill'
-    }
 
-    // Mount quill directive for Vue global.
-    Vue.directive('quill', {
-      inserted(el, binding, vnode) {
-        const self = vnode.context
-        const options = binding.value || {}
-        const instanceName = getInstanceName(el, binding, vnode)
-        let quill = self[instanceName]
-
-         // Emit event in Vue directive.
-        const eventEmit = (vnode, name, data) => {
-          const handlers = (vnode.data && vnode.data.on) || 
-                           (vnode.componentOptions && vnode.componentOptions.listeners)
-          if (handlers && handlers[name]) handlers[name].fns(data)
+      // Initialize quill options.
+      if (!quill) {
+
+        // Options
+        const quillOptions = ['theme', 'modules', 'readOnly', 'boundary', 'placeholder'].reduce((ops, key) => {
+          const [ov, gv, dv] = [options[key], globalOptions[key], defaultOptions[key]]
+          if (ov !== undefined) {
+            ops[key] = ov
+          } else if (gv !== undefined) {
+            ops[key] = gv
+          } else if (dv !== undefined) {
+            ops[key] = dv
+          }
+          return ops
+        }, {})
+
+        const [omt, gomt, domt] = [
+          options.modules ? options.modules.toolbar : null,
+          globalOptions.modules ? globalOptions.modules.toolbar : null,
+          defaultOptions.modules ? defaultOptions.modules.toolbar : null
+        ]
+        quillOptions.modules.toolbar = quillOptions.modules.toolbar || (omt ? omt : (gomt ? gomt : domt))
+
+        // Instance
+        quill = self[instanceName] = new Quill(el, quillOptions)
+
+        // Data init
+        const model = vnode.data.model
+        const _value = vnode.data.attrs ? vnode.data.attrs.value : null
+        const _content = vnode.data.attrs ? vnode.data.attrs.content : null
+        const disabled = vnode.data.attrs ? vnode.data.attrs.disabled : null
+        const content = model ? model.value : (_value || _content)
+
+        // Set editor content
+        if (content) {
+          quill.pasteHTML(content)
         }
 
-        // Initialize quill options.
-        if (!quill) {
-
-          // Options and instance
-          const quillOptions = objectAssign({}, defaultOptions, globalOptions || {}, options)
-          quill = self[instanceName] = new Quill(el, quillOptions)
-
-          // Data init
-          const model = vnode.data.model
-          const content = vnode.data.attrs ? vnode.data.attrs.content : null
-          const disabled = vnode.data.attrs ? vnode.data.attrs.disabled : null
+        // Disabled editor
+        if (disabled) {
+          quill.enable(false)
+        }
 
-          // Set editor content
-          if (model || content) {
-            quill.pasteHTML(model ? model.value : content)
+        // Mark model as touched if editor lost focus
+        quill.on('selection-change', range => {
+          if (!range) {
+            eventEmit(vnode, 'blur', quill)
+          } else {
+            eventEmit(vnode, 'focus', quill)
           }
-
-          // Disabled editor
-          if (disabled) {
-            quill.enable(false)
+        })
+
+        // Update model if text changes
+        quill.on('text-change', (delta, oldDelta, source) => {
+          let html = el.children[0].innerHTML
+          const text = quill.getText()
+          if (html === '<p><br></p>') {
+            html = ''
+            quill.root.innerHTML = html
           }
+          if (model) {
+            model.callback(html)
+          }
+          eventEmit(vnode, 'input', html)
+          eventEmit(vnode, 'change', { text, html, quill })
+        })
 
-          // Mark model as touched if editor lost focus
-          quill.on('selection-change', range => {
-            if (!range) {
-              eventEmit(vnode, 'blur', quill)
-            } else {
-              eventEmit(vnode, 'focus', quill)
-            }
-          })
-
-          // Update model if text changes
-          quill.on('text-change', (delta, oldDelta, source) => {
-            let html = el.children[0].innerHTML
-            const text = quill.getText()
-            if (html === '<p><br></p>') {
-              html = ''
-              quill.root.innerHTML = html
-            }
-            if (model) {
-              model.callback(html)
-            }
-            eventEmit(vnode, 'change', { text, html, quill })
-          })
-
-          // Emit ready event
-          eventEmit(vnode, 'ready', quill)
-        }
-      },
-      
-      // Parse text model change.
-      componentUpdated(el, binding, vnode) {
-        const self = vnode.context
-        const instanceName = getInstanceName(el, binding, vnode)
-        const options = binding.value || {}
-        const quill = self[instanceName]
-        if (quill) {
-          const model = vnode.data.model
-          const content = vnode.data.attrs ? vnode.data.attrs.content : null
-          const disabled = vnode.data.attrs ? vnode.data.attrs.disabled : null
-          const newData = model ? model.value : content
-          const oldData = el.children[0].innerHTML
-          quill.enable(!disabled)
-          if (newData) {
-            if (newData != oldData) {
-              const range = quill.getSelection()
-              quill.root.innerHTML = newData
-              setTimeout(() => {
-                quill.setSelection(range)
-              })
-            }
-          } else {
-            quill.setText('')
+        // Emit ready event
+        eventEmit(vnode, 'ready', quill)
+      }
+    },
+    
+    // Parse text model change.
+    componentUpdated(el, binding, vnode) {
+      const self = vnode.context
+      const instanceName = getInstanceName(el, binding, vnode)
+      const options = binding.value || {}
+      const quill = self[instanceName]
+      if (quill) {
+        const model = vnode.data.model
+        const _value = vnode.data.attrs ? vnode.data.attrs.value : null
+        const _content = vnode.data.attrs ? vnode.data.attrs.content : null
+        const disabled = vnode.data.attrs ? vnode.data.attrs.disabled : null
+        const content = model ? model.value : (_value || _content)
+        const newData = content
+        const oldData = el.children[0].innerHTML
+        quill.enable(!disabled)
+        if (newData) {
+          if (newData != oldData) {
+            const range = quill.getSelection()