diff --git a/README.md b/README.md index fa31fe1..ebfcb34 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,22 @@ ## Installation +### Use with Vue CLI + +#### Generating simple webpack boilerplate with Vue-cli + +*Note*: you can skip this part if you already have application generated. + +```bash +npm install -g vue-cli +vue init webpack-simple my-project +cd my-project +npm install +npm run dev +``` + +#### Add vue-froala-wysiwyg + Install `vue-froala-wysiwyg` from `npm` ```bash @@ -84,6 +100,8 @@ export default { #### 2. Make sure you have the right Webpack settings for loading the CSS files. +*Note*: you can skip this part if you created your application using boiler plate generation code stated above. + ```javascript var webpack = require('webpack') var path = require('path') diff --git a/src/vue-froala.js b/src/vue-froala.js index 61df008..6553662 100644 --- a/src/vue-froala.js +++ b/src/vue-froala.js @@ -89,7 +89,6 @@ export default (Vue, Options = {}) => { } this.currentConfig = this.clone(this.config || this.defaultConfig); - this.currentConfig = {...this.currentConfig}; this.setContent(true); @@ -178,12 +177,21 @@ export default (Vue, Options = {}) => { function htmlSet() { - self._editor.html.set(self.model || ''); + // Check if editor not null + if (self._editor == null) { + return; + } + + if (self._editor.html != undefined) { + self._editor.html.set(self.model || ''); + } //This will reset the undo stack everytime the model changes externally. Can we fix this? - self._editor.undo.saveStep(); - self._editor.undo.reset(); + if (self._editor.undo != undefined) { + self._editor.undo.saveStep(); + self._editor.undo.reset(); + } } @@ -217,6 +225,7 @@ export default (Vue, Options = {}) => { }, destroyEditor: function() { + this.initEvents = []; if (this._editor) { @@ -279,7 +288,12 @@ export default (Vue, Options = {}) => { var self = this; this.registerEvent('initialized', function () { - if (self._editor.events) { + + // Editor initialized + self.editorInitialized = true; + + // Check if editor not null and editor has events + if (self._editor != null && self._editor.events) { // bind contentChange and keyup event to froalaModel self._editor.events.on('contentChanged', function () { self.updateModel();