{"id":13473157,"url":"https://github.com/KillerCodeMonkey/ng-quill","last_synced_at":"2025-03-26T17:32:04.081Z","repository":{"id":22766857,"uuid":"26112684","full_name":"KillerCodeMonkey/ng-quill","owner":"KillerCodeMonkey","description":"AngularJS Component for Quill rich text editor","archived":true,"fork":false,"pushed_at":"2021-08-20T08:04:11.000Z","size":850,"stargazers_count":222,"open_issues_count":0,"forks_count":108,"subscribers_count":17,"default_branch":"master","last_synced_at":"2024-10-11T12:38:08.792Z","etag":null,"topics":["angular","angularjs","javascript","ng","ng-quill","quil","quilljs","rich-text","rich-text-editor","richtext","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KillerCodeMonkey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"custom":["https://www.paypal.me/bengtler","https://www.buymeacoffee.com/bengtler"]}},"created_at":"2014-11-03T09:51:45.000Z","updated_at":"2024-08-14T19:42:21.000Z","dependencies_parsed_at":"2022-08-21T12:00:50.253Z","dependency_job_id":null,"html_url":"https://github.com/KillerCodeMonkey/ng-quill","commit_stats":null,"previous_names":["killercodemonkey/ngquill"],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fng-quill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fng-quill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fng-quill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fng-quill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KillerCodeMonkey","download_url":"https://codeload.github.com/KillerCodeMonkey/ng-quill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222156624,"owners_count":16940437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularjs","javascript","ng","ng-quill","quil","quilljs","rich-text","rich-text-editor","richtext","wysiwyg","wysiwyg-editor"],"created_at":"2024-07-31T16:01:01.288Z","updated_at":"2024-10-30T03:31:42.385Z","avatar_url":"https://github.com/KillerCodeMonkey.png","language":"JavaScript","readme":"### PROJECT IS NO LONGER MAINTAINED - angularjs lts period ends on 2021/12/31 \r\n\r\n------\r\n\r\n# ng-quill [![Build Status](https://travis-ci.org/KillerCodeMonkey/ng-quill.svg?branch=master)](https://travis-ci.org/KillerCodeMonkey/ng-quill)\r\n\r\n\u003cimg src=\"https://cloud.githubusercontent.com/assets/2264672/12809927/fd4c3416-cb22-11e5-9b02-80ebd9138255.png\" width=\"120\"\u003e\r\n\r\n[![NPM](https://nodei.co/npm/ng-quill.png)](https://nodei.co/npm/ng-quill/)\r\n\r\nng-quill is an [Angular.js](http://angularjs.org/) component for [Quill](http://quilljs.com/) rich text editor.\r\n\r\n## Donate/Support\r\n\r\nIf you like my work, feel free to support it. Donations to the project are always welcomed :)\r\n\r\nPayPal: [PayPal.Me/bengtler](https://paypal.me/bengtler)\r\n\r\n\u003ca href=\"https://www.buymeacoffee.com/bengtler\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\r\n\r\nBTC Wallet Address:\r\n`3QVyr2tpRLBCw1kBQ59sTDraV6DTswq8Li`\r\n\r\nETH Wallet Address:\r\n`0x394d44f3b6e3a4f7b4d44991e7654b0cab4af68f`\r\n\r\nLTC Wallet Address:\r\n`MFif769WSZ1g7ReAzzDE7TJVqtkFpmoTyT`\r\n\r\n## Examples\r\n\r\n- [Advanced Demo](https://killercodemonkey.github.io/ng-quill/demo.html)\r\n- [RequireJS](https://killercodemonkey.github.io/ng-quill/demoamd.html)\r\n\r\n## Installation\r\n\r\n- `npm install ng-quill`\r\n- or download zip from release page: https://github.com/KillerCodeMonkey/ngQuill/releases\r\n- or grab the latest release from cdn: https://cdnjs.com/libraries/ng-quill\r\n- install peerDependencies `npm install angular angular-sanitize quill`\r\n\r\nThe new version is complete rewritten and is using QuillJS 1.x.\r\nFor the latest old version (0.20.1) checkout the special branch for it.\r\n\r\n## Usage\r\n\r\n- load angular, quill, ngquill scripts in your index.html\r\n- original sources are in src-folder, build files are in dist-folder\r\n- add dependency to your app module `var myAppModule = angular.module('quillTest', ['ngQuill']);`\r\n- use ngQuillConfigProvider to overwrite global settings in your config-Block\r\n- use ngquill directive in your html\r\n`\u003cng-quill-editor ng-model=\"message\"\u003e\u003c/ng-quill-editor\u003e`\r\n- add this line to your css `[ng-quill-editor] { display: block; }`\r\n- if you use it in a form and you are resetting it via $setPristine() -\u003e you have to set editor.setText('') -\u003e it will add the error class only, if the model has ng-dirty class\r\n- 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:\r\n\r\nRecommended Usage\r\n--\r\n```\r\n\u003cng-quill-editor ng-model=\"title\"\u003e\r\n    \u003cng-quill-toolbar\u003e\r\n        \u003cdiv\u003e\r\n            \u003cspan class=\"ql-formats\"\u003e\r\n                \u003cbutton class=\"ql-bold\" ng-attr-title=\"{{'Bold'}}\"\u003e\u003c/button\u003e\r\n            \u003c/span\u003e\r\n            \u003cspan class=\"ql-formats\"\u003e\r\n                \u003cselect class=\"ql-align\" ng-attr-title=\"{{'Aligment'}}\"\u003e\r\n                    \u003coption selected\u003e\u003c/option\u003e\r\n                    \u003coption value=\"center\"\u003e\u003c/option\u003e\r\n                    \u003coption value=\"right\"\u003e\u003c/option\u003e\r\n                    \u003coption value=\"justify\"\u003e\u003c/option\u003e\r\n                \u003c/select\u003e\r\n                \u003cselect class=\"ql-align\"\u003e\r\n                    \u003coption selected\u003e\u003c/option\u003e\r\n                    \u003coption value=\"center\"\u003e\u003c/option\u003e\r\n                    \u003coption value=\"right\"\u003e\u003c/option\u003e\r\n                    \u003coption value=\"justify\"\u003e\u003c/option\u003e\r\n                \u003c/select\u003e\r\n            \u003c/span\u003e\r\n        \u003c/div\u003e\r\n    \u003c/ng-quill-toolbar\u003e\r\n\u003c/ng-quill-editor\u003e\r\n```\r\n- customToolbarPosition - if you are working with a custom toolbar you can switch the position :). - default: `top`, possible values `top`, `bottom`\r\n\r\n**[Full Quill Toolbar HTML](https://github.com/quilljs/quill/blob/f75ff2973f068c3db44f949915eb8a74faf162a8/docs/_includes/full-toolbar.html)**\r\n\r\nAlternative Usage\r\n--\r\n```\r\nlet app = angular.module('app', [ 'ngQuill' ])\r\n\r\napp.constant('NG_QUILL_CONFIG', {\r\n  /*\r\n   * @NOTE: this config/output is not localizable.\r\n   */\r\n  modules: {\r\n    toolbar: [\r\n      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons\r\n      ['blockquote', 'code-block'],\r\n\r\n      [{ 'header': 1 }, { 'header': 2 }],               // custom button values\r\n      [{ 'list': 'ordered' }, { 'list': 'bullet' }],\r\n      [{ 'script': 'sub' }, { 'script': 'super' }],     // superscript/subscript\r\n      [{ 'indent': '-1' }, { 'indent': '+1' }],         // outdent/indent\r\n      [{ 'direction': 'rtl' }],                         // text direction\r\n\r\n      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown\r\n      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\r\n\r\n      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme\r\n      [{ 'font': [] }],\r\n      [{ 'align': [] }],\r\n\r\n      ['clean'],                                         // remove formatting button\r\n\r\n      ['link', 'image', 'video']                         // link and image, video\r\n    ]\r\n  },\r\n  theme: 'snow',\r\n  debug: 'warn',\r\n  placeholder: '',\r\n  readOnly: false,\r\n  bounds: document.body,\r\n  scrollContainer: null\r\n})\r\n\r\napp.config([\r\n  'ngQuillConfigProvider',\r\n  'NG_QUILL_CONFIG',\r\n\r\n  function (ngQuillConfigProvider, NG_QUILL_CONFIG) {\r\n    ngQuillConfigProvider.set(NG_QUILL_CONFIG)\r\n  }\r\n])\r\n```\r\n\\**see:* ./src/ng-quill/app.provider('ngQuillConfig').config\r\n\r\n## Configuration\r\n\r\n- use `ngQuillConfigProvider.set({modules: { ... }, theme: 'snow', placeholder: 'placeholder', formats: { ... }, bounds: document.body, readyOnly: false) to config toolbar module, other modules, default theme, allowed formats, ...`\r\n- set theme name: `theme=\"snow\"` (default: 'snow')\r\n- set readOnly: `read-only=\"\"` (default: false) - requires true or false\r\n- overwrite global config for each editor: `modules=\"modulesConfig\"`\r\n- set placeholder: `placeholder=\"'Inser your text here'\"` or `placeholder=\"''\"` for empty string\r\n- set bounds: `bounds=\"...\"`, change the default boundary element of the editor (`document.body`) - set it to 'self' and the editor element is used\r\n- override formats: `formats=\"formatsArray\"`, per default all quill formats are allowed\r\n- set max-length: `max-length=\"5\"`, adds validation for maxlength (sets model state to `invalid` and adds `ng-invalid-maxlength` class)\r\n- 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 \u003e 1, if you only want to check if there is a value --\u003e use required/ng-required\r\n- set strict: activate/deactivate strict editor mode (default: `true`)\r\n- set scrollingContainer: set html element or css selector that gets the scrollbars\r\n- use custom-options for adding for example custom font sizes (see example in demo.html) --\u003e this overwrites this options **globally** !!!\r\n- 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\r\n- styles - set dynamic inline editor styles - `styles=\"{ backgroundColor: 'red' }\"`\r\n- sanitize - santize the model content if format is `html` (default: `false`)\r\n- debug - set debug level, allowed `'error', 'warn', 'log', true, false` (default: `'warn'`)\r\n- trackChanges - check if only `user` (quill source user) or `all` change should be trigger model update, default `user`. Using `all` is not recommended, it cause some unexpected sideeffects. But useful for 3rd Party modules and blots to keep your model up to date\r\n- preserveWhitespace - default: false - possbility to use a pre-tag instead of a div-tag for the contenteditable area to preserve duplicated whitespaces | caution if used with syntax plugin [Related issue](https://github.com/quilljs/quill/issues/1751)\r\n\r\n## Callback/Outputs\r\n\r\n- onEditorCreated: triggered after editor is created and provides editor-object `on-editor-created=\"myCallback(editor)\"`\r\n- 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)\"`\r\n- 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\r\n- onFocus: triggered if editor gets focus `on-focus=\"myCallback(editor, source)\"`\r\n- onBlur: triggered if editor gets focus `on-blur=\"myCallback(editor, source)\"`\r\n\r\n## Security Hint\r\n\r\nAngular templates provide some assurance against XSS in the form of client side sanitizing of all inputs.\r\n\r\nNg-quill provides the config paramter sanitize to sanitize html-strings passed as ngModel to the component.\r\n\r\nIt is deactivated per default to avoid stripping content or styling, which is not expected.\r\n\r\nBut it is recommended to activate this option, if you are working with html strings as model values.\r\n\r\n## Advanced Usage and Configuration\r\n\r\nAfter editor creation you can use everything from the ordinary quill editor -\u003e listen to editorCreated and work with the editor instance in your controller like you want ;).\r\nAdd 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 ;).\r\n[Quill Documentation](http://quilljs.com/docs/quickstart/)\r\n","funding_links":["https://www.paypal.me/bengtler","https://www.buymeacoffee.com/bengtler","https://paypal.me/bengtler"],"categories":["基于 Angular","Uncategorized","For Angular"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKillerCodeMonkey%2Fng-quill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKillerCodeMonkey%2Fng-quill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKillerCodeMonkey%2Fng-quill/lists"}