Commit 65f60ad8 authored by surmon's avatar surmon
Browse files

馃檪Update to v3.0.0

parent 89282092
......@@ -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
// ...
}
......
......@@ -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'),
......
!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;
!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
......@@ -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",
......
......@@ -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
......
......@@ -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)
}
......
......@@ -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()