{"id":13535645,"url":"https://github.com/KillerCodeMonkey/stencil-quill","last_synced_at":"2025-04-02T02:31:03.674Z","repository":{"id":33038002,"uuid":"149749479","full_name":"KillerCodeMonkey/stencil-quill","owner":"KillerCodeMonkey","description":"Native web components for the Quill Rich Text Editor built with stencil","archived":false,"fork":false,"pushed_at":"2025-03-18T05:00:24.000Z","size":3117,"stargazers_count":39,"open_issues_count":2,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T03:05:46.073Z","etag":null,"topics":["component","editor","quill","quill-editor","quilljs","renderer","rendering","rich-text-editor","stencil","stencil-quill","viewer","webcomponent","webcomponents","wysiwyg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.paypal.me/bengtler","https://www.buymeacoffee.com/bengtler"]}},"created_at":"2018-09-21T10:38:03.000Z","updated_at":"2025-03-05T06:37:50.000Z","dependencies_parsed_at":"2024-06-21T01:40:49.556Z","dependency_job_id":"6a233579-6648-493e-9c2b-47e7f06f501d","html_url":"https://github.com/KillerCodeMonkey/stencil-quill","commit_stats":{"total_commits":266,"total_committers":5,"mean_commits":53.2,"dds":0.6729323308270676,"last_synced_commit":"b047d8b6c9f6093d2ac22b9db8b28a0d2677fb1c"},"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fstencil-quill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fstencil-quill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fstencil-quill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KillerCodeMonkey%2Fstencil-quill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KillerCodeMonkey","download_url":"https://codeload.github.com/KillerCodeMonkey/stencil-quill/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743545,"owners_count":20826551,"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":["component","editor","quill","quill-editor","quilljs","renderer","rendering","rich-text-editor","stencil","stencil-quill","viewer","webcomponent","webcomponents","wysiwyg"],"created_at":"2024-08-01T09:00:20.035Z","updated_at":"2025-04-02T02:31:03.662Z","avatar_url":"https://github.com/KillerCodeMonkey.png","language":"TypeScript","readme":"# stencil-quill [![Build Status](https://github.com/KillerCodeMonkey/stencil-quill/workflows/CI/badge.svg?branch=master)](https://github.com/KillerCodeMonkey/stencil-quill/actions/)\n\nNative web components for the [Quill Rich Text Editor](https://quilljs.com/)\n\n![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\n## Donate/Support\n\nIf you like my work, feel free to support it. Donations to the project are always welcomed :)\n\nPayPal: [PayPal.Me/bengtler](https://paypal.me/bengtler)\n\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\n\n## Examples\n\n- [Live Demo](https://killercodemonkey.github.io/stencil-quill)\n\n## Installation\n\n- `npm install stencil-quill`\n- load `node_modules/stencil-quill/dist/quill-components.js` in your index.html or add it to your build process or project\n- do not forget to install `quill` **v2!** and include it + theme css in your buildprocess, module or `index.html`! (the component is using the global Quill object)\n\n## QuillEditor component\n\n### HTML-Tag\n\n```HTML\n\u003cquill-editor content=\"\" format=\"html\" theme=\"snow\"\u003e\u003c/quill-editor\u003e\n```\n\n### Config\n\n- [Check the component readme](https://github.com/KillerCodeMonkey/stencil-quill/tree/master/src/components/quill-editor)\n- content - the base content of the editor passed as string or JSON string\n- readOnly (true | false) if user can edit content\n- formats - array of allowed formats/groupings\n- format - model format - default: `html`, values: `html | text | json`, sets the model value type - html = html string, json = quill operations as json string, text = plain text\n- modules - configure/disable quill modules, passed as JSON-string!, e.g toolbar or add custom toolbar via html element default is\n\n```\n{\n  toolbar: [\n    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons\n    ['blockquote', 'code-block'],\n\n    [{ 'header': 1 }, { 'header': 2 }],               // custom button values\n    [{ 'list': 'ordered'}, { 'list': 'bullet' }],\n    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript\n    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent\n    [{ 'direction': 'rtl' }],                         // text direction\n\n    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown\n    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n\n    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme\n    [{ 'font': [] }],\n    [{ 'align': [] }],\n\n    ['clean'],                                         // remove formatting button\n\n    ['link', 'image', 'video']                         // link and image, video\n  ]\n};\n```\n\n- theme - bubble/snow, default is `snow`\n- styles - set a styles object, e.g. `styles=\"{height: '250px'}\"`\n- placeholder - placeholder text, default is `Insert text here ...`\n- bounds - boundary of the editor, default `document.body`, pass 'self' to attach the editor element\n- possbility to create a custom toolbar via a custom slot `quill-toolbar`:\n\n```\n\u003cquill-component content=\"test\"\u003e\n  \u003cdiv slot=\"quill-toolbar\"\u003e\n    \u003cspan class=\"ql-formats\"\u003e\n      \u003cselect class=\"ql-font\"\u003e\n        \u003coption value=\"aref\"\u003eAref Ruqaa\u003c/option\u003e\n        \u003coption value=\"mirza\"\u003eMirza\u003c/option\u003e\n        \u003coption selected\u003eRoboto\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cselect class=\"ql-align\" title=\"Aligment\"\u003e\n        \u003coption selected\u003e\u003c/option\u003e\n        \u003coption value=\"center\"\u003e\u003c/option\u003e\n        \u003coption value=\"right\"\u003e\u003c/option\u003e\n        \u003coption value=\"justify\"\u003e\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cselect class=\"ql-align\" title=\"Aligment2\"\u003e\n        \u003coption selected\u003e\u003c/option\u003e\n        \u003coption value=\"center\"\u003e\u003c/option\u003e\n        \u003coption value=\"right\"\u003e\u003c/option\u003e\n        \u003coption value=\"justify\"\u003e\u003c/option\u003e\n      \u003c/select\u003e\n    \u003c/span\u003e\n    \u003cspan class=\"ql-formats\"\u003e\n      \u003cdiv id=\"counter\"\u003e\u003c/div\u003e\n    \u003c/span\u003e\n  \u003c/div\u003e\n\u003c/quill-component\u003e\n```\n\n- customToolbarPosition - if you are working with a custom toolbar you can switch the position :). - default: `top`, possible values `top`, `bottom`\n- debug - set log level `warn`, `error`, `log` or `false` to deactivate logging, default: `warn`\n- defaultEmptValue - set the default empty value, e.g. empty string, default `null`\n\n[Full Quill Toolbar HTML](https://github.com/quilljs/quill/blob/f75ff2973f068c3db44f949915eb8a74faf162a8/docs/_includes/full-toolbar.html)\n\n### Events\n\n- editorInit - editor instance\n\n```\neditor\n```\n\n- editorContentChange - text is updated by 'user'\n\n```\n{\n  editor: editorInstance,\n  html: html,\n  text: text,\n  content: content,\n  delta: delta,\n  oldDelta: oldDelta,\n  source: source\n}\n```\n\n- editorSelectionChange - selection is updated, also triggered for onBlur and onFocus, because the selection changed\n\n```\n{\n  editor: editorInstance,\n  range: range,\n  oldRange: oldRange,\n  source: source\n}\n```\n\n- editorChange - text or selection is updated - independent of the source\n\n```\n{\n  editor: editorInstance, // Quill\n  event: 'text-change' // event type\n  html: html, // html string\n  text: text, // plain text string\n  content: content, // Content - operatins representation\n  delta: delta, // Delta\n  oldDelta: oldDelta, // Delta\n  source: source // ('user', 'api', 'silent' , undefined)\n}\n```\n\nor\n\n```\n{\n  editor: editorInstance, // Quill\n  event: 'selection-change' // event type\n  range: range, // Range\n  oldRange: oldRange, // Range\n  source: source // ('user', 'api', 'silent' , undefined)\n}\n```\n\n- editorFocus - editor is focused\n\n```\n{\n  editor: editorInstance, // Quill\n  source: source // ('user', 'api', 'silent' , undefined)\n}\n```\n\n- editorBlur - editor is blured\n\n```\n{\n  editor: editorInstance, // Quill\n  source: source // ('user', 'api', 'silent' , undefined)\n}\n```\n\n## QuillView component\n\nIt renders a readOnly quilljs editor without a border and toolbar. Does not provide any Events, but has similar properties.\n\n### HTML-Tag\n\n```HTML\n\u003cquill-view content=\"\" format=\"html\" theme=\"snow\"\u003e\u003c/quill-view\u003e\n```\n\n### Config\n\n- [Check the component readme](https://github.com/KillerCodeMonkey/stencil-quill/tree/master/src/components/quill-view)\n- content - the base content of the editor passed as string or JSON string\n- formats - array of allowed formats/groupings\n- format - model format - default: `html`, values: `html | text | json`, sets the model value type - html = html string, json = quill operations as json string, text = plain text\n- modules - configure/disable quill modules, passed as JSON-string! - keep in mind toolbar will be set to false anyways\n- theme - bubble/snow, default is `snow`\n- styles - set a styles object, e.g. `styles=\"{height: '250px'}\"`\n- debug - set log level `warn`, `error`, `log` or `false` to deactivate logging, default: `warn`\n- defaultEmptValue - set the default empty value, e.g. empty string, default `null`\n\n## QuillViewHTML component\n\nIt renders an quilljs html string as you would expect it without createing a quilljs instance.\n\n### HTML-Tag\n\n```HTML\n\u003cquill-view-html content=\"\" theme=\"snow\"\u003e\u003c/quill-view-html\u003e\n```\n\n### Config\n\n- [Check the component readme](https://github.com/KillerCodeMonkey/stencil-quill/tree/master/src/components/quill-view-html)\n- content - the base content of the editor passed as string or JSON string\n- theme - bubble/snow, default is `snow`\n\n## Using the components\n\n### Script tag\n\n- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)\n- Put a script tag similar to this `\u003cscript src='https://unpkg.com/stencil-quill/dist/quill-components/quill-components.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### Node Modules\n\n- Run `npm install stencil-quill --save`\n- Put a script tag similar to this `\u003cscript src='node_modules/stencil-quill/dist/quill-components/quill-components.js'\u003e\u003c/script\u003e` in the head of your index.html\n- Then you can use the element anywhere in your template, JSX, html etc\n\n### In a stencil-starter app\n\n- Run `npm install stencil-quill --save`\n- Add an import to the npm packages `import quill-components;`\n- Then you can use the element anywhere in your template, JSX, html etc\n- [Minimal example](https://github.com/KillerCodeMonkey/stencil-quill-example)\n","funding_links":["https://www.paypal.me/bengtler","https://www.buymeacoffee.com/bengtler","https://paypal.me/bengtler"],"categories":["Components built with Stencil","Uncategorized"],"sub_categories":["Community","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKillerCodeMonkey%2Fstencil-quill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKillerCodeMonkey%2Fstencil-quill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKillerCodeMonkey%2Fstencil-quill/lists"}