Merge branch 'master' into master

froala · Feb 18, 2020 · bbb7554 · bbb7554
2 parents f567cf6 + 1215237
commit bbb7554
Show file tree

Hide file tree

Showing 9 changed files with 305 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,7 @@ var viewModel = {
   options: {
     // disable wrapping content with paragraphs
     // instead <br> will be used
-    enter: $.FroalaEditor.ENTER_DIV,
+    enter: FroalaEditor.ENTER_DIV,
 
     // we like gray!
     theme: 'gray',
@@ -62,7 +62,107 @@ or a `<div>`
 ```html
 <div data-bind="froala: comments, froalaOptions: options, froalaEvents: events"></div>
 ```
+#### You can also pass [events](https://www.froala.com/wysiwyg-editor/docs/events) 
 
+Inside `knockout-froala.js`-
+
+ ```
+ 'focus': function () {
+    // this is the editor instance.
+    console.log(this);
+  }
+  ```
+## 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:
+
+
+1. // Froala Editor plugins list.
+
+    var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',
+                      'entities', 'file', 'font_family', 'font_size', 'fullscreen',
+                      'image_manager', 'image', 'inline_style', 'line_breaker',
+                      'link', 'lists', 'paragraph_format', 'paragraph_style', 'quote',
+                      'save', 'table', 'url', 'video']
+    // Define paths.
+    var paths = {
+      'app': '../app',
+      'FroalaEditor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
+
+      'knockout':'../../../bower_components/knockout/dist/knockout.debug',
+      'knockout-froala':'../../../src/knockout-froala'
+    };
+    // Add Froala Editor plugins to path.
+    for (var i = 0; i < fe_plugins.length; i++) {
+      paths['fe_' + fe_plugins[i]] = '../../../bower_components/froala-wysiwyg-editor/js/plugins/' + fe_plugins[i] + '.min';
+    }
+    var shim = {
+
+
+    };
+    for (var i = 0; i < fe_plugins.length; i++) {
+      shim['fe_' + fe_plugins[i]] = {
+        deps: ['FroalaEditor']
+
+      }
+    }
+    // Init RequireJS.
+    requirejs.config({
+      'baseUrl': 'js/lib',
+      'paths': paths,
+      shim: shim
+    });
+
+    // Load the main app module to start the app
+
+
+    requirejs(["app"]);
+
+
+Where:
+1.fe_plugins denote list of froala plugins.
+2.paths variable defines the path of all resources.
+3.shim variable defines dependencies among  js files.
+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.
+
 ## License
 
 The `knockout-froala` project is under MIT license. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.

diff --git a/Requirejs Demo/index.html b/Requirejs Demo/index.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html class="no-js" lang="">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>Knockout Froala Demo</title>
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Froala files -->
+
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/froala_style.min.css" />
+
+  <!-- Froala plugin stylesheets, remove what you don't need -->
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/char_counter.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/code_view.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/colors.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/draggable.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/emoticons.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/file.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/fullscreen.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/image.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/image_manager.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/line_breaker.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/quick_insert.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/table.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/video.min.css" />
+  <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/themes/gray.min.css" />
+
+
+</head>
+
+<body>
+  <div id="app">
+    <h3> Editor </h3>
+    <textarea data-bind="value: html, froala: html, froalaOptions: options"></textarea>
+  <div id="edit"></div>
+
+    <br>
+    <h3> Preview Output </h3>
+
+    <hr>
+    <pre data-bind="html: html"></pre>
+    <hr>
+
+    <br>
+  </div>
+
+  <script data-main="js/app" src="js/lib/require.js"></script>
+
+  <script>
+    // Froala Editor plugins list.
+    var fe_plugins = ['align', 'char_counter', 'code_view', 'colors', 'draggable', 'emoticons',
+                      'entities', 'file', 'font_family', 'font_size', 'fullscreen',
+                      'image_manager', 'image', 'inline_style', 'line_breaker',
+                      'link', 'lists', 'paragraph_format', 'paragraph_style', 'quote',
+                      'save', 'table', 'url', 'video']
+    // Define paths.
+    var paths = {
+      'app': '../app',
+      'FroalaEditor': '../../../bower_components/froala-wysiwyg-editor/js/froala_editor.min',
+      'knockout':'../../../bower_components/knockout/dist/knockout.debug',
+      'knockout-froala':'../../../src/knockout-froala'
+    };
+    // Add Froala Editor plugins to path.
+    for (var i = 0; i < fe_plugins.length; i++) {
+      paths['fe_' + fe_plugins[i]] = '../../../bower_components/froala-wysiwyg-editor/js/plugins/' + fe_plugins[i] + '.min';
+    }
+    var shim = {
+
+    };
+    for (var i = 0; i < fe_plugins.length; i++) {
+      shim['fe_' + fe_plugins[i]] = {
+        deps: ['FroalaEditor']
+      }
+    }
+    // Init RequireJS.
+    requirejs.config({
+      'baseUrl': 'js/lib',
+      'paths': paths,
+      'shim': shim
+
+    });
+
+    // Load the main app module to start the app
+
+    requirejs(["app"]);
+
+  </script>
+
+</body>
+</html>
diff --git a/Requirejs Demo/js/app.js b/Requirejs Demo/js/app.js
@@ -0,0 +1,37 @@
+
+
+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' ) );
+  })();
+
+
+
+})
+})
+})
+
+})
diff --git a/Requirejs Demo/js/lib/require.js b/Requirejs Demo/js/lib/require.js
diff --git a/bower.json b/bower.json
@@ -1,10 +1,11 @@
 {
   "name": "knockout-froala",
-  "version": "2.7.5",
+
+  "version": "3.1.0",
+
   "homepage": "https://github.com/froala/knockout-froala",
   "authors": [
-    "Anas Nakawa <[email protected]>",
-    "Stefan Neculai <[email protected]>"
+    "Anas Nakawa <[email protected]>"
   ],
   "description": "Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor",
   "main": "src/knockout-froala.js",
@@ -36,11 +37,12 @@
     "tests"
   ],
   "dependencies": {
-    "froala-wysiwyg-editor": "^2.7.5",
-    "knockout": "~3.3.0"
+
+    "froala-wysiwyg-editor": "3.1.0",
+    "font-awesome": "^4.7.0",
+
+    "knockout": "~3.5.0"
   },
   "resolutions": {
-    "knockout": "2.3",
-    "jquery": "1.11.0"
-  }
+    "knockout": "2.3"  }
 }
diff --git a/demo/app.js b/demo/app.js
@@ -7,9 +7,10 @@
     options: {
       // disable wrapping content with paragraphs
       // instead <br> will be used
-      enter: $.FroalaEditor.ENTER_DIV,
-      theme: 'gray'
-    }
+      enter: FroalaEditor.ENTER_DIV,
+      theme: 'gray',
+
+
+  }
   }
-
   ko.applyBindings( viewModel, document.getElementById( 'app' ) );
diff --git a/demo/index.html b/demo/index.html
@@ -27,6 +27,11 @@
   <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/table.min.css" />
   <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/plugins/video.min.css" />
   <link rel="stylesheet" href="../bower_components/froala-wysiwyg-editor/css/themes/gray.min.css" />
+  <!-- Include TUI CSS. -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.css">
+<link rel="stylesheet" href="https://uicdn.toast.com/tui-color-picker/latest/tui-color-picker.css">
+
+
 </head>
 
 <body>
@@ -46,8 +51,6 @@ <h3> Preview Output </h3>
   </div>
 
 
-  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
-
   <script src="../bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>
 
   <!-- Froala plugins, remove what you don't need -->
@@ -79,8 +82,16 @@ <h3> Preview Output </h3>
   <script src="../bower_components/froala-wysiwyg-editor/js/plugins/video.min.js"></script>
 
   <script src="../bower_components/knockout/dist/knockout.debug.js"></script>
+<!-- Include TUI JS. -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.7/fabric.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-code-snippet.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-image-editor.min.js"></script>
+
+<!-- Include TUI plugin. -->
+<script type="text/javascript" src="../bower_components/froala-wysiwyg-editor/js/third_party/image_tui.min.js"></script>
 
   <script src="../src/knockout-froala.js"></script>
   <script src="app.js"></script>
+
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "knockout-froala",
-  "version": "2.7.5",
+  "version": "3.1.0",
   "description": "Knockout.js binding for Froala WYSIWYG HTML Rich Text Editor",
   "main": "src/knockout-froala.js",
   "scripts": {