Merge branch 'release/4.0.0'

KillerCodeMonkey · Dec 2, 2018 · 570cece · 570cece
2 parents ad6d5a0 + 759d2bc
commit 570cece
Show file tree

Hide file tree

Showing 9 changed files with 4,699 additions and 2,335 deletions.
diff --git a/README.md b/README.md
@@ -5,27 +5,47 @@
 [![NPM](https://nodei.co/npm/ng-quill.png)](https://nodei.co/npm/ng-quill/)
 
 ng-quill is an [Angular.js](http://angularjs.org/) component for [Quill](http://quilljs.com/) rich text editor.
-You can get an ugly as hell demo here: [ngQuill in action](https://killercodemonkey.github.io/ng-quill/demo.html)
-or with AMD (RequireJS) [ngQuill requirejs](https://killercodemonkey.github.io/ng-quill/demoamd.html)
 
-The new version is complete rewritten and is using QuillJS 1.x.
-For the latest old version (0.20.1) checkout the special branch for it.
+## Donate/Support
+
+If you like my work, feel free to support it. Donations to the project are always welcomed :)
+
+PayPal: [PayPal.Me/bengtler](PayPal.Me/bengtler)
+
+BTC Wallet Address:
+`3QVyr2tpRLBCw1kBQ59sTDraV6DTswq8Li`
+
+ETH Wallet Address:
+`0x394d44f3b6e3a4f7b4d44991e7654b0cab4af68f`
+
+LTC Wallet Address:
+`MFif769WSZ1g7ReAzzDE7TJVqtkFpmoTyT`
+
+XRP Wallet Address:
+`rXieaAC3nevTKgVu2SYoShjTCS2Tfczqx?dt=159046833`
+
+## Examples
+
+- [Advanced Demo](https://killercodemonkey.github.io/ng-quill/demo.html)
+- [RequireJS](https://killercodemonkey.github.io/ng-quill/demoamd.html)
+
+## Installation
 
-Installation
-============
 - `npm install ng-quill`
 - or download zip from release page: https://github.com/KillerCodeMonkey/ngQuill/releases
 - or grab the latest release from cdn: https://cdnjs.com/libraries/ng-quill
+- install peerDependencies `npm install angular angular-sanitize quill`
 
+The new version is complete rewritten and is using QuillJS 1.x.
+For the latest old version (0.20.1) checkout the special branch for it.
 
-Contribution
-============
+## Contribution
 
-I am using GitFlow --> All Changes and Pull-Requests have to be on develop-branch!
+This project is using GitFlow --> All Changes and Pull-Requests have to be on develop-branch!
 Changes directly in the master branch are not longer allowed and will be rejected.
 
-Usage
-=====
+## Usage
+
 - load angular, quill, ngquill scripts in your index.html
 - original sources are in src-folder, build files are in dist-folder
 - add dependency to your app module `var myAppModule = angular.module('quillTest', ['ngQuill']);`
@@ -115,31 +135,42 @@ app.config([
 ```
 \**see:* ./src/ng-quill/app.provider('ngQuillConfig').config
 
-Configuration
-=============
+## Configuration
+
 
 - use `ngQuillConfigProvider.set({modules: { ... }, theme: 'snow', placeholder: 'placeholder', formats: { ... }, bounds: document.body, readyOnly: false) to config toolbar module, other modules, default theme, allowed formats, ...``
 - set theme name: `theme="snow"` (default: 'snow')
 - set readOnly: `read-only=""` (default: false) - requires true or false
 - overwrite global config for each editor: `modules="modulesConfig"`
-- set placeholder: `placeholder="Inser your text here"` or `placeholder=" "` for empty string
+- set placeholder: `placeholder="'Inser your text here'"` or `placeholder="''"` for empty string
 - set bounds: `bounds="..."`, change the default boundary element of the editor (`document.body`) - set it to 'self' and the editor element is used
 - override formats: `formats="formatsArray"`, per default all quill formats are allowed
 - set max-length: `max-length="5"`, adds validation for maxlength (sets model state to `invalid` and adds `ng-invalid-maxlength` class)
 - set min-length: `min-length="5"`, adds validation for minlength (sets model state to `invalid` and adds `ng-invalid-minlength` class), only works for values > 1, if you only want to check if there is a value --> use required/ng-required
 - set strict: activate/deactivate strict editor mode (default: `true`)
 - set scrollingContainer: set html element or css selector that gets the scrollbars
 - use custom-options for adding for example custom font sizes (see example in demo.html) --> this overwrites this options **globally** !!!
+- format - default 'html', possible values 'json' | 'object' | 'html' | 'text', so you are able to set quill operation object, html or plain text to your model
+- styles - set dynamic inline editor styles - `styles="{ backgroundColor: 'red' }"`
+- sanitize - santize the model content if format is `html` (default: `false`)
 
-Callback/Outputs
-================
+## Callback/Outputs
 
 - onEditorCreated: triggered after editor is created and provides editor-object `on-editor-created="myCallback(editor)"`
-- onContentChanged: triggered after changes in the editor. Provides editor-object, html representation and text representation `on-content-changed="myCallback(editor, html, text, delta, oldDelta, source)"`
-- onSelectionChanged: triggered after text selection changed `on-selection-changed="myCallback(editor, range, oldRange, source)"`
+- onContentChanged: triggered after changes in the editor. Provides editor-object, html representation and text representation `on-content-changed="myCallback(editor, html, text, content, delta, oldDelta, source)"`
+- onSelectionChanged: triggered after text selection changed `on-selection-changed="myCallback(editor, range, oldRange, source)"` - content = quill editor content object, text = content as plain text, html = content as html string
+
+## Security Hint
+
+Angular templates provide some assurance against XSS in the form of client side sanitizing of all inputs.
+
+Ng-quill provides the config paramter sanitize to sanitize html-strings passed as ngModel to the component.
+
+It is deactivated per default to avoid stripping content or styling, which is not expected.
+
+But it is recommended to activate this option, if you are working with html strings as model values.
 
-Advanced Usage and Configuration
-================================
+## Advanced Usage and Configuration
 
 After editor creation you can use everything from the ordinary quill editor -> listen to editorCreated and work with the editor instance in your controller like you want ;).
 Add modules, use the quill API or listen to Events. Keep in mind to use $timeout if you are listening / working with quill-Events and updating some $scope stuff to notify angular about it ;).

diff --git a/demo.html b/demo.html
@@ -5,10 +5,14 @@
         <meta charset="utf-8">
 
         <!-- Style -->
-        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.1/quill.snow.css">
-        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.1/quill.bubble.css">
+        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
+        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">
 
         <style>
+            ng-quill-editor .ql-container {
+                height: 150px;
+            }
+
             ng-quill-editor.ng-invalid .ql-container {
                 border: 1px dashed red;
             }
@@ -27,8 +31,9 @@
         </style>
 
         <!-- Scripts -->
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
-        <script type="text/javascript" src="//cdn.quilljs.com/1.3.1/quill.js"></script>
+        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
+        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-sanitize.min.js"></script>
+        <script type="text/javascript" src="//cdn.quilljs.com/1.3.6/quill.js"></script>
         <script type="text/javascript" src="src/ng-quill.js"></script>
         <script>
 
@@ -42,7 +47,20 @@
             '$timeout',
             function ($scope, $timeout) {
               $scope.title = 'Quill works'
+              $scope.requiredModel = ''
+              $scope.modelJSONString = JSON.stringify([
+                { insert: 'Hello ' },
+                { insert: 'World!', attributes: { bold: true } },
+                { insert: '\n' }
+              ])
+              $timeout(function () {
+                $scope.modelJSONString = JSON.stringify([
+                { insert: 'World!', attributes: { bold: true } },
+                { insert: '\n' }
+              ])
+              }, 2000)
               $scope.model = ''
+              $scope.required = 'required'
               $scope.modelJSON = [
                 { insert: 'Hello ' },
                 { insert: 'World!', attributes: { bold: true } },
@@ -64,6 +82,7 @@
                   [{'size': [false, '14', '16', '18']}]
                 ]
               }
+              $scope.backgroundColor = 'gray'
 
               $timeout(function () {
                 $scope.title += ' awsome!!!'
@@ -85,28 +104,44 @@
     <body ng-app="quillTest" ng-controller="AppCtrl">
         <h3>Default editor + Callbacks/Outputs in JS console</h3>
         <pre><code>{{title}}</code></pre>
-        <ng-quill-editor bounds="self" ng-model="title" placeholder="override default placeholder" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
+        <ng-quill-editor bounds="self" ng-model="title" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
 
         <h3>Default editor + Callbacks/Outputs in JS console and empty init model + Object-Format</h3>
         <pre><code>{{modelJSON}}</code></pre>
-        <ng-quill-editor format="object" custom-options="customTag" ng-model="modelJSON" placeholder="override default placeholder" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
+        <ng-quill-editor format="object" custom-options="customTag" ng-model="modelJSON" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text, content)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
 
         <h3>Bubble editor + Text-format</h3>
         <pre><code>{{modelText}}</code></pre>
         <ng-quill-editor format="text" theme="bubble" ng-model="modelText"></ng-quill-editor>
 
-        <h3>Editor without toolbar + required and ngModule</h3>
+        <h3>Bubble editor + JSONString-format</h3>
+        <pre><code>{{modelJSONString}}</code></pre>
+        <ng-quill-editor format="json" theme="bubble" ng-model="modelJSONString"></ng-quill-editor>
+
+        <h3>Editor without toolbar + min- and max-length and ngModule</h3>
         <button ng-click="readOnly = !readOnly;">toggle readOnly</button>
+        <button ng-click="placeholder = placeholder ? placeholder + '!' : '!'">toggle placeholder</button>
         readonly: {{readOnly}}
         <form name="form">
-            <ng-quill-editor ng-model="title" read-only="readOnly" required="true" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor>
+            <ng-quill-editor ng-model="title" placeholder="placeholder" read-only="readOnly" max-length="5" min-length="2" modules="{toolbar: false}"></ng-quill-editor>
+            form invalid?: {{form.$invalid}}
+        </form>
+
+        <h3>Editor without toolbar + required and ngModule</h3>
+        <button ng-click="required = required ? '' : 'required';">toggle required</button> {{ !!required }}
+        <form name="form">
+            <ng-quill-editor ng-model="requiredModel" required="{{required}}" modules="{toolbar: false}"></ng-quill-editor>
             form invalid?: {{form.$invalid}}
         </form>
 
+        <h3>Set Styles</h3>
+        <button ng-click="backgroundColor = backgroundColor ? '' : 'gray'">toggle Backgroundcolor</button>
+        <ng-quill-editor ng-model="title" styles="{backgroundColor: backgroundColor}"></ng-quill-editor>
+
         <h3>ng-quill - custom toolbar</h3>
         <ng-quill-editor
             ng-model="title"
-            placeholder=" "
+            placeholder="''"
         >
             <ng-quill-toolbar>
                 <div id="ng-quill-toolbar">

diff --git a/demoamd.html b/demoamd.html
@@ -5,13 +5,16 @@
         <meta charset="utf-8">
 
         <!-- Style -->
-        <link rel="stylesheet" href="//cdn.quilljs.com/1.2.0/quill.snow.css">
-        <link rel="stylesheet" href="//cdn.quilljs.com/1.2.0/quill.bubble.css">
+        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
+        <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">
 
         <style>
             ng-quill-editor.ng-invalid .ql-container {
                 border: 1px dashed red;
             }
+            ng-quill-editor .ql-container {
+                height: 150px;
+            }
         </style>
 
         <!-- Scripts -->
@@ -20,13 +23,17 @@
           require.config({
             baseUrl: '.',
             paths: {
-              'quill': '//cdn.quilljs.com/1.2.0/quill.min',
+              'quill': '//cdn.quilljs.com/1.3.6/quill.min',
               'ng-quill': 'src/ng-quill',
-              'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min'
+              'angular': '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min',
+              'angular-sanitize': '//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-sanitize.min'
             },
             shim: {
               'ng-quill': {
-                deps: ['angular', 'quill']
+                deps: ['angular', 'angular-sanitize', 'quill']
+              },
+              'angular-sanitize': {
+                deps: ['angular']
               }
             }
           })
@@ -72,7 +79,7 @@
     <body ng-controller="AppCtrl">
         <h3>Default editor + Callbacks/Outputs in JS console</h3>
         <pre><code>{{title}}</code></pre>
-        <ng-quill-editor ng-model="title" placeholder="override default placeholder" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
+        <ng-quill-editor ng-model="title" placeholder="'override default placeholder'" on-editor-created="editorCreated(editor)" on-content-changed="contentChanged(editor, html, text)" on-selection-changed="selectionChanged(editor, range, oldRange, source)"></ng-quill-editor>
 
         <h3>Bubble editor</h3>
         <ng-quill-editor theme="bubble" ng-model="title"></ng-quill-editor>

diff --git a/karma.conf.js b/karma.conf.js
@@ -1,16 +1,17 @@
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
 
     basePath: '',
 
     files: [
       'node_modules/angular/angular.js',
       'node_modules/angular-mocks/angular-mocks.js',
+      'node_modules/angular-sanitize/angular-sanitize.js',
       'node_modules/quill/dist/quill.js',
 
       './src/ng-quill.js',
 
-      './tests/ng-quill.spec.js',
+      './tests/ng-quill.spec.js'
     ],
 
     preprocessors: { './src/ng-quill.js': 'coverage' },
@@ -25,11 +26,11 @@ module.exports = function(config) {
     singleRun: true,
     coverageReporter: {
       reporters: [{
-        type : 'html',
-        dir : 'coverage/'
+        dir: 'coverage/',
+        type: 'html'
       }, {
         type: 'text-summary'
       }]
     }
-  });
-};
+  })
+}