Merge branch 'release/3.8.0'

README.md

@@ -33,12 +33,13 @@ Usage
 - use ngquill directive in your html
 `<ng-quill-editor ng-model="message"></ng-quill-editor>`
 - add this line to your css `[ng-quill-editor] { display: block; }`
-- if you use it in a form and you are resetting it via $setPristine() -> you have to set editor.setHTML('') -> it will add the error class only, if the model has ng-dirty class
+- if you use it in a form and you are resetting it via $setPristine() -> you have to set editor.setText('') -> it will add the error class only, if the model has ng-dirty class
 - add a custom toolbar using `ng-quill-toolbar` - it uses transclusion to add toolbar, avoids flickering and sets the modules toolbar config to the custom toolbar automatically:
+
+Recommended Usage
+--
 ```
-<ng-quill-editor
-    ng-model="title"
->
+<ng-quill-editor ng-model="title">
     <ng-quill-toolbar>
         <div>
             <span class="ql-formats">
@@ -61,13 +62,63 @@ Usage
         </div>
     </ng-quill-toolbar>
 </ng-quill-editor>
+```
+
+**[Full Quill Toolbar HTML](https://github.com/quilljs/quill/blob/f75ff2973f068c3db44f949915eb8a74faf162a8/docs/_includes/full-toolbar.html)**
 
+Alternative Usage
+--
 ```
+let app = angular.module('app', [ 'ngQuill' ])
+
+app.constant('NG_QUILL_CONFIG', {
+  /*
+   * @NOTE: this config/output is not localizable.
+   */
+  modules: {
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+      ['blockquote', 'code-block'],
+
+      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+      [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+      [{ 'script': 'sub' }, { 'script': 'super' }],     // superscript/subscript
+      [{ 'indent': '-1' }, { 'indent': '+1' }],         // outdent/indent
+      [{ 'direction': 'rtl' }],                         // text direction
+
+      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+
+      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+      [{ 'font': [] }],
+      [{ 'align': [] }],
+
+      ['clean'],                                         // remove formatting button
+
+      ['link', 'image', 'video']                         // link and image, video
+    ]
+  },
+  theme: 'snow',
+  placeholder: '',
+  readOnly: false,
+  bounds: document.body
+})
+
+app.config([
+  'ngQuillConfigProvider',
+  'NG_QUILL_CONFIG',
+
+  function (ngQuillConfigProvider, NG_QUILL_CONFIG) {
+    ngQuillConfigProvider.set(NG_QUILL_CONFIG)
+  }
+])
+```
+\**see:* ./src/ng-quill/app.provider('ngQuillConfig').config
 
 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, ...
+- 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"`
@@ -76,7 +127,7 @@ Configuration
 - 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 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** !!!
 
@@ -93,4 +144,3 @@ 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 ;).
 [Quill Documentation](http://quilljs.com/docs/quickstart/)
-

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "ngQuill",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "main": ["src/ng-quill.js"],
   "description": "AngularJS directive for the QuillJS rich text editor",
   "authors": [

demo.html

@@ -43,6 +43,12 @@
             function ($scope, $timeout) {
               $scope.title = 'Quill works'
               $scope.model = ''
+              $scope.modelJSON = [
+                { insert: 'Hello ' },
+                { insert: 'World!', attributes: { bold: true } },
+                { insert: '\n' }
+              ]
+              $scope.modelText = 'Hello World'
               $scope.readOnly = false
               $scope.test = ''
               $scope.customOptions = [{
@@ -66,8 +72,8 @@
               $scope.editorCreated = function (editor) {
                 console.log(editor)
               }
-              $scope.contentChanged = function (editor, html, text, delta, oldDelta, source) {
-                console.log('editor: ', editor, 'html: ', html, 'text:', text, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source)
+              $scope.contentChanged = function (editor, html, text, content, delta, oldDelta, source) {
+                console.log('editor: ', editor, 'html: ', html, 'text:', text, 'content:', content, 'delta: ', delta, 'oldDelta:', oldDelta, 'source:', source)
               }
               $scope.selectionChanged = function (editor, range, oldRange, source) {
                 console.log('editor: ', editor, 'range: ', range, 'oldRange:', oldRange, 'source:', source)
@@ -79,14 +85,15 @@
     <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)" 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</h3>
-        <pre><code>{{model}}</code></pre>
-        <ng-quill-editor custom-options="customTag" ng-model="model" 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>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>
 
-        <h3>Bubble editor</h3>
-        <ng-quill-editor theme="bubble" ng-model="title"></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>
         <button ng-click="readOnly = !readOnly;">toggle readOnly</button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-quill",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "Angular directive for rich text editor Quill",
   "author": "Bengt Weiße <[email protected]>",
   "homepage": "https://github.com/KillerCodeMonkey/ngQuill",

src/ng-quill.js

@@ -89,7 +89,8 @@
       'ngModel': '<',
       'maxLength': '<',
       'minLength': '<',
-      'customOptions': '<?'
+      'customOptions': '<?',
+      'format': '@?'
     },
     require: {
       ngModelCtrl: 'ngModel'
@@ -102,10 +103,13 @@
       var config = {}
       var content
       var editorElem
+      var format = 'html'
       var modelChanged = false
       var editorChanged = false
       var editor
       var placeholder = ngQuillConfig.placeholder
+      var textChangeEvent
+      var selectionChangeEvent
 
       this.validate = function (text) {
         if (this.maxLength) {
@@ -151,6 +155,10 @@
           placeholder = this.placeholder.trim()
         }
 
+        if (this.format && ['object', 'html', 'text'].indexOf(this.format) > -1) {
+          format = this.format
+        }
+
         config = {
           theme: this.theme || ngQuillConfig.theme,
           readOnly: this.readOnly || ngQuillConfig.readOnly,
@@ -170,6 +178,17 @@
         }.bind(this), 0)
       }
 
+      this.$onDestroy = function () {
+        editor = null
+
+        if (textChangeEvent) {
+          textChangeEvent.removeListener('text-change')
+        }
+        if (selectionChangeEvent) {
+          selectionChangeEvent.removeListener('selection-change')
+        }
+      }
+
       this._initEditor = function (editorElem) {
         var $editorElem = angular.element('<div></div>')
         var container = $element.children()
@@ -192,7 +211,7 @@
             var newCustomOption = Quill.import(customOption.import)
             newCustomOption.whitelist = customOption.whitelist
             if (customOption.toRegister) {
-              newCustomOption[customOption.toRegister.key] = customOption.toRegister.value;
+              newCustomOption[customOption.toRegister.key] = customOption.toRegister.value
             }
             Quill.register(newCustomOption, true)
           })
@@ -203,7 +222,7 @@
         this.ready = true
 
         // mark model as touched if editor lost focus
-        editor.on('selection-change', function (range, oldRange, source) {
+        selectionChangeEvent = editor.on('selection-change', function (range, oldRange, source) {
           if (this.onSelectionChanged) {
             this.onSelectionChanged({
               editor: editor,
@@ -222,27 +241,36 @@
         }.bind(this))
 
         // update model if text changes
-        editor.on('text-change', function (delta, oldDelta, source) {
+        textChangeEvent = editor.on('text-change', function (delta, oldDelta, source) {
           var html = editorElem.children[0].innerHTML
           var text = editor.getText()
+          var content = editor.getContents()
+
           var emptyModelTag = ['<' + editor.root.firstChild.localName + '>', '</' + editor.root.firstChild.localName + '>']
 
           if (html === emptyModelTag[0] + '<br>' + emptyModelTag[1]) {
-              html = null
+            html = null
           }
           this.validate(text)
 
           if (!modelChanged) {
             $scope.$applyAsync(function () {
               editorChanged = true
 
-              this.ngModelCtrl.$setViewValue(html)
+              if (format === 'text') {
+                this.ngModelCtrl.$setViewValue(text)
+              } else if (format === 'object') {
+                this.ngModelCtrl.$setViewValue(content)
+              } else {
+                this.ngModelCtrl.$setViewValue(html)
+              }
 
               if (this.onContentChanged) {
                 this.onContentChanged({
                   editor: editor,
                   html: html,
                   text: text,
+                  content: content,
                   delta: delta,
                   oldDelta: oldDelta,
                   source: source
@@ -257,8 +285,14 @@
         if (content) {
           modelChanged = true
 
-          var contents = editor.clipboard.convert(content)
-          editor.setContents(contents)
+          if (format === 'text') {
+            editor.setText(content, 'silent')
+          } else if (format === 'object') {
+            editor.setContents(content, 'silent')
+          } else {
+            editor.setContents(editor.clipboard.convert(content, 'silent'))
+          }
+
           editor.history.clear()
         }