Provide a Version with Froala 4.0.19

README.md

@@ -1,28 +1,13 @@
-# Vue JS Froala WYSIWYG Editor
-
-[![npm](https://img.shields.io/npm/v/vue-froala-wysiwyg.svg)](https://www.npmjs.com/package/vue-froala-wysiwyg)
-[![npm](https://img.shields.io/npm/dm/vue-froala-wysiwyg.svg)](https://www.npmjs.com/package/vue-froala-wysiwyg)
-[![npm](https://img.shields.io/npm/l/vue-froala-wysiwyg.svg)](https://www.npmjs.com/package/vue-froala-wysiwyg)
-
->vue-froala-wyswiyg provides Vue bindings to the Froala WYSIWYG editor VERSION 3.
-
-## Compatibility
-
-- v1 later `@legacy`
-  - Vue.js 1.x
-- v2 later
-  - Vue.js 2.x
+# Vue3 Froala WYSIWYG Editor
 
 ## Installation
 
-Install `vue-froala-wysiwyg` from `npm`
+Install `froala-wysiwyg-vue3` from `npm`
 
 ```bash
-npm install vue-froala-wysiwyg --save
+npm install froala-wysiwyg-vue3 --save
 ```
 
-
-
 ## Integration
 
 #### 1. Require and use Froala Editor component inside your application.
@@ -40,27 +25,26 @@ import 'froala-editor/js/third_party/image_tui.min';
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 
 // Import and use Vue Froala lib.
-import VueFroala from 'vue-froala-wysiwyg'
-Vue.use(VueFroala)
-Vue.config.productionTip = false
+import VueFroala from 'froala-wysiwyg-vue3';
 
-new Vue({
-  render: h => h(App),
-
-}).$mount('#app')
+const app = createApp({
+  render: () => h(App)
+});
+app.use(VueFroala);
+app.mount('#app');
 
 ```
 
 #### App.vue file:
-```javascript
+```html
 <template>
   <div id="app">
     <froala id="edit" :tag="'textarea'" :config="config" v-model="model"></froala>
   </div>
 </template>
 
 <script>
-import VueFroala from 'vue-froala-wysiwyg';
+import VueFroala from 'froala-wysiwyg-vue3';
 
 export default {
   name: 'app',
@@ -111,14 +95,14 @@ module.exports = {
       css: 'vue-style-loader!css-loader'
     }
   }
-})
+}
 ```
 
 ## Usage
 
 ### Initialize
 
-```javascript
+```html
 // If model is initialized, 'Init text' text child will be overwritten.
 <froala :tag="'textarea'" :config="config" v-model="model">Init text</froala>
 ```
@@ -154,8 +138,8 @@ Events can be passed in with the options, with a key events and object where the
 ```javascript
 config: {
   placeholder: "Edit Me",
-  events : {
-    focus : function(e, editor) {
+  events: {
+    focus: (e, editor) => {
       console.log(editor.selection.get());
     }
   }
@@ -174,14 +158,14 @@ The WYSIWYG HTML editor content model. Two way binding is suported.
 
 Use the content in other places:
 
-```javascript
+```html
 <input v-model="model"/>
 ```
 
 ### Special tags
 You can also use the editor on **img**, **button**, **input** and **a** tags:
 
-```javascript
+```html
 <froala :tag="img" v-model="imgModel"></froala>
 ```
 
@@ -217,7 +201,7 @@ config: {
 
 You can pass the custom buttons to the editor by following way:
 #### App.vue file:
-```javascript
+```html
 <script>
 import FroalaEditor from 'froala-editor';
 
@@ -294,7 +278,7 @@ The object received by the function will contain the following methods:
 
 To display content created with the froala editor use the `froalaView` component.
 
-```javascript
+```html
 <froala v-model="content"></froala>
 
 <froalaView v-model="content"></froalaView>

build/webpack.base.conf.js

@@ -3,7 +3,7 @@ var config = require('../config')
 var webpack = require('webpack')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { VueLoaderPlugin } = require('vue-loader');
 module.exports = {
   entry: {
     main: './src/main.js',
@@ -18,7 +18,7 @@ module.exports = {
     extensions: ['.js', '.vue'],
     alias: {
       'src': path.resolve(__dirname, '../src'),
-     
+
     },
     modules: [path.join(__dirname, '../node_modules'),path.join(__dirname,'../node_modules/froala-editor/js')],
   },
@@ -35,7 +35,8 @@ module.exports = {
       },
       {
         test: /\.json$/,
-        loader: 'json-loader'
+        use: ['json-loader'],
+        type: 'javascript/auto'
       },
       {
         test: /\.html$/,
@@ -66,4 +67,4 @@ module.exports = {
   // vue: {
   //   loaders: utils.cssLoaders()
   // }
-}
+}

config/index.js

@@ -11,7 +11,7 @@ module.exports = {
   },
   dev: {
     env: require('./dev.env'),
-    port: 8080,
+    port: 7788,
     proxyTable: {}
   },
   umd: {

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "vue-froala-wysiwyg",
+  "name": "froala-wysiwyg-vue3",
   "version": "4.0.14",
-  "description": "Vue plugin for Froala WYSIWYG HTML rich text editor.",
+  "description": "Vue3 plugin for Froala WYSIWYG HTML rich text editor.",
   "author": "Froala Labs (https://www.froala.com/)",
   "license": "https://froala.com/wysiwyg-editor/terms/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/froala/vue-froala-wysiwyg.git"
+    "url": "https://github.com/williamsun1993/vue3-froala-wysiwyg"
   },
   "bugs": {
-    "url": "https://github.com/froala/vue-froala-wysiwyg/issues"
+    "url": "https://github.com/williamsun1993/vue3-froala-wysiwyg/issues"
   },
   "keywords": [
     "vue",
@@ -43,17 +43,17 @@
     "babel-runtime": "^6.26.0",
     "@babel/runtime-corejs2": "^7.7.7",
     "froala-editor": "^4.0.14",
-    "vue": "2.6.6"
+    "vue": "^3.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
+    "@babel/core": "^7.4.0",
     "@babel/helpers": "^7.3.1",
     "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.4",
     "@babel/runtime": "^7.3.4",
-    "@babel/runtime-corejs2": "^7.3.4",
+    "@vue/compiler-sfc": "^3.0.7",
     "babel-helpers": "^6.24.1",
     "babel-loader": "^8.0.5",
     "connect-history-api-fallback": "^1.1.0",
@@ -79,7 +79,7 @@
     "url-loader": "^1.1.2",
     "vue-hot-reload-api": "^2.0.11",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "15.6.2",
+    "vue-loader": "^16.1.2",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "2.6.6",
     "webpack": "^4.29.3",

src/main.js

@@ -6,11 +6,13 @@ import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/js/plugins.pkgd.min.js';
 
 import App from './examples/App'
-import Vue from 'vue'
+import { createApp, h } from 'vue'
 import VueFroala from 'src';
 
-Vue.use(VueFroala);
-new Vue({
- render: h => h(App)
+const app = createApp({
+  render: () => h(App)
+})
 
-}).$mount('#app')
+app.use(VueFroala)
+
+app.mount('#app')

src/vue-froala.js

@@ -1,27 +1,28 @@
 import FroalaEditor from 'froala-editor';
-export default (Vue, Options = {}) => {
+import { h } from 'vue';
+export default (app, Options = {}) => {
 
   var froalaEditorFunctionality = {
 
-    props: ['tag', 'value', 'config', 'onManualControllerReady'],
+    props: ['tag', 'modelValue', 'config', 'onManualControllerReady'],
 
     watch: {
-      value: function () {
-        this.model = this.value;
+      modelValue: function () {
+        this.model = this.modelValue;
         this.updateValue();
       }
     },
 
-    render: function (createElement) {
-      return createElement(
+    render: function () {
+      return h(
         this.currentTag,
         [this.$slots.default]
       )
     },
 
     created: function () {
       this.currentTag = this.tag || this.currentTag;
-      this.model = this.value;
+      this.model = this.modelValue;
     },
 
     // After first time render.
@@ -97,13 +98,14 @@ export default (Vue, Options = {}) => {
         this.registerEvents();
         this.initListeners();
 
-        this._editor = new FroalaEditor(this.$el, this.currentConfig)
+        this._editor = new FroalaEditor(this.$el, this.currentConfig);
+        this._interval = null;
 
         this.editorInitialized = true;
 
       },
 
-       // Return clone object 
+       // Return clone object
       clone(item) {
         const me = this;
         if (!item) {
@@ -223,6 +225,9 @@ export default (Vue, Options = {}) => {
           this._editor.destroy();
           this.editorInitialized = false;
           this._editor = null;
+
+          clearInterval(this._interval);
+          this._interval = null;
         }
       },
 
@@ -271,20 +276,41 @@ export default (Vue, Options = {}) => {
           }
         }
 
+        if ( this._editor.codeView.isActive && this._editor.codeView.isActive() ) {
+          modelContent = this._editor.codeView.get();
+        }
+
+        if ( this.oldModel == modelContent ) {
+          return;
+        }
+
         this.oldModel = modelContent;
-        this.$emit('input', modelContent);
+        this.$emit('update:modelValue', modelContent);
       },
 
       initListeners: function() {
         var self = this;
-
         this.registerEvent('initialized', function () {
           if (self._editor.events) {
             // bind contentChange and keyup event to froalaModel
             self._editor.events.on('contentChanged', function () {
               self.updateModel();
             });
 
+            self._editor.events.on('commands.after', function () {
+
+              let callback = function () {
+                self.updateModel();
+              }
+              if ( self._editor.codeView.isActive() ) {
+                self._interval = setInterval(callback, 900);
+              }
+            });
+
+            self._editor.events.on('codeView.update', function () {
+              clearInterval(self._interval);
+            });
+
             if (self.currentConfig.immediateVueModelUpdate) {
               self._editor.events.on('keyup', function () {
                 self.updateModel();
@@ -355,7 +381,7 @@ export default (Vue, Options = {}) => {
     }
   };
 
-  Vue.component('Froala', froalaEditorFunctionality);
+  app.component('Froala', froalaEditorFunctionality);
 
   var froalaViewFunctionality = {
 
@@ -371,8 +397,8 @@ export default (Vue, Options = {}) => {
       this.currentTag = this.tag || this.currentTag;
     },
 
-    render: function (createElement) {
-      return createElement(
+    render: function () {
+      return h(
         this.currentTag,
         {
           class: 'fr-view'
@@ -384,8 +410,8 @@ export default (Vue, Options = {}) => {
     mounted: function() {
       this._element = this.$el;
 
-      if (this.value) {
-         this._element.innerHTML = this.value
+      if (this.modelValue) {
+         this._element.innerHTML = this.modelValue
       }
     },
 
@@ -398,5 +424,5 @@ export default (Vue, Options = {}) => {
     }
   };
 
-  Vue.component('FroalaView', froalaViewFunctionality);
-}
+  app.component('FroalaView', froalaViewFunctionality);
+}