diff --git a/README.md b/README.md index 59dcb92..ab2b16e 100644 --- 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,14 +135,14 @@ 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) @@ -130,16 +150,27 @@ Configuration - 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 index 087f4eb..9eff233 100644 --- a/demo.html +++ b/demo.html @@ -5,10 +5,14 @@ - - + + - - + + +