knockout-froala - npm Package Compare versions

Comparing version 2.9.5 to 3.0.0-beta.1

bower.json

 {
   "name": "knockout-froala",
-  "version": "2.9.5",
+
+  "version": "3.0.0-beta.1",
+
   "homepage": "https://github.com/froala/knockout-froala",
@@ -38,9 +40,10 @@ "authors": [
   "dependencies": {
-    "froala-wysiwyg-editor": "2.9.5",
+
+    "froala-wysiwyg-editor": "3.0.0-beta.1",
+    "font-awesome": "^4.7.0",
+
     "knockout": "~3.5.0"
   },
   "resolutions": {
-    "knockout": "2.3",
-    "jquery": "1.11.0"
-  }
+    "knockout": "2.3"  }
 }

demo/app.js

@@ -10,7 +10,8 @@ /**
       // instead <br> will be used
-      enter: $.FroalaEditor.ENTER_DIV,
-      theme: 'gray'
-    }
+      enter: FroalaEditor.ENTER_DIV,
+      theme: 'gray',
+      
+      
   }
-
+  }
   ko.applyBindings( viewModel, document.getElementById( 'app' ) );

package.json

 {
   "name": "knockout-froala",
-  "version": "2.9.5",
+  "version": "3.0.0-beta.1",
+
   "description": "Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor",
@@ -5,0 +6,0 @@ "main": "src/knockout-froala.js",

README.md

@@ -37,3 +37,3 @@ # Knockout Froala WYSIWYG HTML Editor
     // instead <br> will be used
-    enter: $.FroalaEditor.ENTER_DIV,
+    enter: FroalaEditor.ENTER_DIV,
 
@@ -61,7 +61,11 @@ // we like gray!
 
-
+## Including All Plugins
+ Use froala_editor.pkgd.legacy.min file to include all plugins
+ 
 ## How to use with require js
 In order to use knockout-froala with require js, you require code snippet similar to following:
 
-// Froala Editor plugins list.
+
+1. // Froala Editor plugins list.
+
     var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',
@@ -75,4 +79,4 @@ 'entities', 'file', 'font_family', 'font_size', 'fullscreen',
       'app': '../app',
-      'jquery': 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min',
-      'froala_editor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
+      'FroalaEditor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
+
       'knockout':'../../../bower_components/knockout/dist/knockout.debug',
@@ -86,7 +90,9 @@ 'knockout-froala':'../../../src/knockout-froala'
     var shim = {
-      'froala_editor': {deps: ['jquery']}
+
+   
     };
     for (var i = 0; i < fe_plugins.length; i++) {
       shim['fe_' + fe_plugins[i]] = {
-        deps: ['froala_editor']
+        deps: ['FroalaEditor']
+
       }
@@ -102,11 +108,7 @@ }
     // Load the main app module to start the app
-    requirejs(["knockout"],function(ko)
-    {
-    window.ko=ko;
-    requirejs(["knockout-froala"],function(knockout_froala)
-    {
+
+    
     requirejs(["app"]);
-    })
-  })
 
+
 Where:
@@ -116,7 +118,38 @@ 1.fe_plugins denote list of froala plugins.
 3.shim variable defines dependencies among  js files.
-4.knockout.debug.js is loaded first because it returns a object(ko) required for accessing knockout variables and methods.
-This variable is made global.
-5.knockout-froala is loaded next because it defines the froala bindings required by main app.
-6.Finally app.js is loaded which contains the logic of your app.
+4.app.js  contains the logic of your app.
 
+2. Here is app.js code:
+
+requirejs(["knockout"],function(ko)
+{
+window.ko=ko;
+requirejs(["FroalaEditor"],function(FroalaEditor)
+{
+ window.FroalaEditor = FroalaEditor;
+requirejs(["knockout-froala"],function()
+{
+
+
+requirejs(["fe_image","fe_char_counter"], function() {
+
+  (function(){
+    var viewModel = {
+      html: ko.observable( '' ),
+      options: {
+        enter: FroalaEditor.ENTER_DIV,
+        theme: 'gray',
+        charCounterMax:150
+      }
+    }
+  
+    ko.applyBindings( viewModel, document.getElementById( 'app' ) );
+  })();
+   
+
+})
+})
+})
+})
+
+
 A Requirejs demo app is included in the repository. You can refer it for more details.
@@ -123,0 +156,0 @@

Requirejs Demo/js/app.js

@@ -1,4 +0,16 @@
-// Load the editor and the plugins we need.
-define(["jquery","froala_editor", "fe_image", "fe_link"], function($,a,b,c) {
 
+
+requirejs(["knockout"],function(ko)
+{
+window.ko=ko;
+requirejs(["FroalaEditor"],function(FroalaEditor)
+{
+ window.FroalaEditor = FroalaEditor;
+requirejs(["knockout-froala"],function()
+{
+
+
+requirejs(["fe_image","fe_char_counter"], function() {
+
+
   (function(){
@@ -8,6 +20,7 @@ var viewModel = {
       options: {
-        // disable wrapping content with paragraphs
-        // instead <br> will be used
-        enter: $.FroalaEditor.ENTER_DIV,
-        theme: 'gray'
+
+        enter: FroalaEditor.ENTER_DIV,
+        theme: 'gray',
+        charCounterMax:150
+
       }
@@ -18,6 +31,9 @@ }
   })();
-    /**
- * knockout binding for Froala Editor
- */
 
+   
+
+})
+})
+})
+
 })

src/knockout-froala.js

@@ -9,4 +9,3 @@ /**
   var unwrap = ko.utils.unwrapObservable;
-
-
+  var editorInstance =null;
   /**
@@ -23,3 +22,3 @@ * initiate froala editor, listen to its changes
   function init( element, value, bindings ) {
-    var $el = $( element );
+   
     var model = value();
@@ -29,24 +28,36 @@ var allBindings = unwrap( bindings() );
 
-    // initialize the editor
-    $el.froalaEditor( options || {} );
 
-    // provide froala editor instance for flexibility
-    if( allBindings.froalaInstance && ko.isWriteableObservable( allBindings.froalaInstance ) ) {
-      allBindings.froalaInstance( $el.data( 'froala.editor' ) );
-    }
-
     // update underlying model whenever editor content changed
-    var processUpdateEvent = function (e, editor) {
-        if (ko.isWriteableObservable(model)) {
-            var editorValue = editor.html.get();
-            var current = model();
-            if (current !== editorValue) {
-                model(editorValue);
-            }
+    var processUpdateEvent = function (e) {
+    
+      if (ko.isWriteableObservable(model)) {
+        if(editorInstance!=null)
+        {
+          var editorValue = editorInstance.html.get();
+          var current = model();
+          if (current !== editorValue) {
+              model(editorValue);
+          }
         }
+        
+      }
+  }
+options.events = {
+  initialized: function() {
+    editorInstance=this;
+    // provide froala editor instance for flexibility
+    if(allBindings.froalaInstance && ko.isWriteableObservable( allBindings.froalaInstance ) ) {
+      allBindings.froalaInstance( editorInstance );
     }
+  },
+  'contentChanged': processUpdateEvent,
+  'paste.after':processUpdateEvent
+}
+ new FroalaEditor(element,options||{});
+ 
 
-    $el.on('froalaEditor.contentChanged', processUpdateEvent);
-    $el.on('froalaEditor.paste.after', processUpdateEvent);
+    
 
+    
+
     // cleanup editor, when dom node is removed
@@ -70,15 +81,15 @@ ko.utils.domNodeDisposal.addDisposeCallback( element, destroy( element ) );
   function update( element, value ) {
-    var $el = $( element );
+  
     var modelValue = unwrap( value() );
-    var editorInstance = $el.data( 'froala.editor' );
-
-    if( editorInstance == null ) {
+ 
+    if( editorInstance == null  ) {
       return;
     }
-
-    var editorValue = editorInstance.html.get();
-
+    
+     var editorValue = editorInstance.html.get();
+     
     // avoid any un-necessary updates
     if( editorValue !== modelValue && (typeof modelValue === 'string'  || modelValue === null)) {
       editorInstance.html.set( modelValue );
+     
     }
@@ -97,6 +108,5 @@ }
   function destroy( element ) {
-    var $el = $( element );
     return function() {
-      if( $el.data( 'froala.editor' ) ) {
-        $el.froalaEditor( 'destroy' );
+      if( editorInstance!=null ) {
+        editorInstance.destroy();
       }
@@ -103,0 +113,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38340

increased by1.38%

Lines of code

184

increased by5.14%

Number of lines in readme file

157

increased by26.61%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes