Update to v2.3.0

README.md

@@ -9,9 +9,9 @@
 
 
 # Vue-Quill-Editor
-🍡Quill editor component for Vue2, support SPA and SSR.
+🍡Quill editor component for Vue, support SPA and SSR.
 
-基于Quill、适用于Vue2的富文本编辑器，支持服务端渲染和单页应用。
+基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。
 
 
 # Example
@@ -48,7 +48,7 @@ Vue.use(VueQuillEditor)
 
 
 // If used in Nuxt.js/SSR, you should keep it only in browser build environment
-if (process.BROWSER_BUILD) {
+if (process.browser) {
   const VueQuillEditor = require('vue-quill-editor/ssr')
   Vue.use(VueQuillEditor)
 }

index.js

+/**
+ * Vue-Quill-Editor
+ * @author Surmon.me
+ */
+
+window.Quill = require('quill/dist/quill.js')
+var quillEditor = require('./src/editor.vue')
+quillEditor = quillEditor.default || quillEditor
+
+var VueQuillEditor = {
+  Quill: Quill,
+  quillEditor: quillEditor,
+  install: function(Vue) {
+    Vue.component(quillEditor.name, quillEditor)
+  }
+}
+
+module.exports = VueQuillEditor

package.json

 {
   "name": "vue-quill-editor",
-  "version": "2.2.6",
-  "description": "quill editor component for Vue2",
-  "main": "./src/index.js",
+  "version": "2.3.0",
+  "description": "quill editor component for Vue",
+  "main": "index.js",
   "scripts": {
-    "build": "webpack --config ./webpack.config.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "cross-env NODE_ENV=production browserify -t vueify -e index.js -x vue -s VueQuillEditor -o dist/vue-quill-editor.js -d && uglifyjs dist/vue-quill-editor.js --source-map -o dist/vue-quill-editor.min.js"
   },
   "repository": {
     "type": "git",
@@ -13,7 +13,9 @@
   },
   "keywords": [
     "vue-quill-editor",
+    "vue quill",
     "vue text editor",
+    "vue rich text editor",
     "vue web editor",
     "vue editor"
   ],
@@ -31,17 +33,12 @@
   },
   "homepage": "https://github.com/surmon-china/vue-quill-editor#readme",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-loader": "^7.0.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "babel-runtime": "^6.23.0",
-    "css-loader": "^0.28.1",
-    "style-loader": "^0.17.0",
-    "vue-loader": "^12.0.3",
-    "vue-template-compiler": "^2.3.2",
-    "webpack": "^2.5.1"
+    "browserify": "^14.4.0",
+    "cross-env": "^5.0.0",
+    "uglify-js": "^3.0.15",
+    "vueify": "^8.7.0"
   }
 }

src/editor.vue

@@ -14,7 +14,7 @@
   }
   export default {
     name: 'quill-editor',
-    data() {
+    data: function() {
       return {
         _content: '',
         defaultModules: {
@@ -44,19 +44,19 @@
       options: {
         type: Object,
         required: false,
-        default() {
+        default: function() {
           return {}
         }
       }
     },
-    mounted() {
+    mounted: function() {
       this.initialize()
     },
-    beforeDestroy() {
+    beforeDestroy: function() {
       this.quill = null
     },
     methods: {
-      initialize() {
+      initialize: function() {
         if (this.$el) {
 
           // options and instance
@@ -88,7 +88,7 @@
           // update model if text changes
           self.quill.on('text-change', (delta, oldDelta, source) => {
             var html = self.$refs.editor.children[0].innerHTML
-            const text = self.quill.getText()
+            var text = self.quill.getText()
             if (html === '<p><br></p>') html = ''
             self._content = html
             self.$emit('input', self._content)
@@ -99,13 +99,18 @@
             })
           })
 
+          // disabled
+          if (this.disabled) {
+            this.quill.enable(false)
+          }
+
           // emit ready
           self.$emit('ready', self.quill)
         }
       }
     },
     watch: {
-      'content'(newVal, oldVal) {
+      content: function(newVal, oldVal) {
         if (this.quill) {
           if (!!newVal && newVal !== this._content) {
             this._content = newVal
@@ -115,7 +120,7 @@
           }
         }
       },
-      'value'(newVal, oldVal) {
+      value: function(newVal, oldVal) {
         if (this.quill) {
           if (!!newVal && newVal !== this._content) {
             this._content = newVal
@@ -125,7 +130,7 @@
           }
         }
       },
-      'disabled'(newVal, oldVal) {
+      disabled: function(newVal, oldVal) {
         if (this.quill) {
           this.quill.enable(!newVal)
         }

src/index.js

@@ -4,7 +4,7 @@
  */
 
 window.Quill = require('quill/dist/quill.js')
-var quillEditor = require('./editor.vue')
+var quillEditor = require('./src/editor.vue')
 quillEditor = quillEditor.default || quillEditor
 
 var VueQuillEditor = {

ssr.js

 
-const Quill = window.Quill = require('quill/dist/quill.js')
+var Quill = window.Quill = require('quill/dist/quill.js')
 
-const quillEditor = {
+var quillEditor = {
   install: function(Vue) {
     Vue.directive('quill', {
       inserted: function (el, binding, vnode) {
@@ -52,8 +52,8 @@ const quillEditor = {
           quill = _this[instanceName] = new Quill(el, options)
 
           // data init
-          const model = vnode.data.model
-          const content = vnode.data.attrs ? vnode.data.attrs.content : null
+          var model = vnode.data.model
+          var content = vnode.data.attrs ? vnode.data.attrs.content : null
 
           // set editor content
           if (model || content) {
@@ -97,13 +97,13 @@ const quillEditor = {
         var options = binding.value || {}
         var quill = _this[instanceName]
         if (quill) {
-          const model = vnode.data.model
-          const content = vnode.data.attrs ? vnode.data.attrs.content : null
+          var model = vnode.data.model
+          var content = vnode.data.attrs ? vnode.data.attrs.content : null
           var newData = model ? model.value : content
           var oldData = el.children[0].innerHTML
           if (newData) {
             if (newData != oldData) {
-              const range = quill.getSelection();
+              var range = quill.getSelection();
               quill.root.innerHTML = newData;
               setTimeout(function() {
                 quill.setSelection(range);

webpack.config.js

-const path = require('path')
-const webpack = require( 'webpack' )
-
-module.exports = {
-  entry: './src/index.js',
-  output: {
-    path: path.join(__dirname, 'dist'),
-    filename: 'index.js',
-    library: 'VueQuillEditor',
-    libraryTarget: 'umd',
-  },
-  resolve: {
-    extensions: [ '.js', '.vue' ]
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: __dirname,
-        exclude: /node_modules/
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      },
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      }
-    ]
-  },
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin( {
-      minimize : true,
-      sourceMap : false,
-      mangle: true,
-      compress: {
-        warnings: false
-      }
-    })
-  ]
-}
\ No newline at end of file