{"id":13535654,"url":"https://github.com/benwinding/quill-html-edit-button","last_synced_at":"2025-04-04T09:10:02.708Z","repository":{"id":35638497,"uuid":"218686244","full_name":"benwinding/quill-html-edit-button","owner":"benwinding","description":"Quill.js Module which allows you to quickly view/edit the HTML in the editor","archived":false,"fork":false,"pushed_at":"2024-08-31T01:33:35.000Z","size":10548,"stargazers_count":163,"open_issues_count":14,"forks_count":44,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-28T08:09:23.124Z","etag":null,"topics":["html","javascript","quill"],"latest_commit_sha":null,"homepage":"https://benwinding.github.io/quill-html-edit-button/script-tags/demo-quill-1.x.html","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/benwinding.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2019-10-31T04:46:49.000Z","updated_at":"2025-03-20T05:04:51.000Z","dependencies_parsed_at":"2024-10-24T21:23:58.117Z","dependency_job_id":"ea727f1a-cf13-4777-86b5-00205beefe92","html_url":"https://github.com/benwinding/quill-html-edit-button","commit_stats":{"total_commits":108,"total_committers":14,"mean_commits":7.714285714285714,"dds":0.25,"last_synced_commit":"b98789f8369bd13def5ca54d37066c1b3e0b80a3"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fquill-html-edit-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fquill-html-edit-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fquill-html-edit-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/benwinding%2Fquill-html-edit-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/benwinding","download_url":"https://codeload.github.com/benwinding/quill-html-edit-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149505,"owners_count":20891954,"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":["html","javascript","quill"],"created_at":"2024-08-01T09:00:20.238Z","updated_at":"2025-04-04T09:10:02.689Z","avatar_url":"https://github.com/benwinding.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# quill-html-edit-button\n\n\u003c!-- [START badges] --\u003e\n\n[![NPM Version](https://img.shields.io/npm/v/quill-html-edit-button.svg)](https://www.npmjs.com/package/quill-html-edit-button)\n[![License](https://img.shields.io/npm/l/quill-html-edit-button.svg)](https://github.com/benwinding/quill-html-edit-button/blob/master/LICENSE)\n[![Downloads/week](https://img.shields.io/npm/dm/quill-html-edit-button.svg)](https://www.npmjs.com/package/quill-html-edit-button)\n[![Github Issues](https://img.shields.io/github/issues/benwinding/quill-html-edit-button.svg)](https://github.com/benwinding/quill-html-edit-button)\n![Build and Publish](https://github.com/benwinding/quill-html-edit-button/actions/workflows/deploy.yml/badge.svg)\n\n\u003c!-- [END badges] --\u003e\n\nQuill.js Module which allows you to quickly view/edit the HTML in the editor\n\n![Demo](https://user-images.githubusercontent.com/664714/93285035-f7f44e80-f7a1-11ea-83c7-59e151c53c06.gif)\n\n- [Live Demo (webpack javascript)](https://benwinding.github.io/quill-html-edit-button/javascript/) - also \u003e [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/javascript)\n- [Live Demo (webpack typescript)](https://benwinding.github.io/quill-html-edit-button/typescript/) - also \u003e [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/typescript)\n- [Live Demo (webpack vue)](https://benwinding.github.io/quill-html-edit-button/vue/) - also \u003e [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/vue)\n- [Live Demo (script tags quill-1.x)](https://benwinding.github.io/quill-html-edit-button/script-tags/demo-quill-1.x.html) - also \u003e [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/script-tags/demo-quill-1.x.html)\n- [Live Demo (script tags quill-2.x) With Tables!](https://benwinding.github.io/quill-html-edit-button/script-tags/demo-quill-2.x.html) - also \u003e [Source Code](https://github.com/benwinding/quill-html-edit-button/tree/master/demos/script-tags/demo-quill-2.x.html)\n\n## Install\n\n`yarn add quill-html-edit-button`\n\n## Quickstart (Javascript)\n\n``` js\nimport Quill from 'quill/core';\nimport Toolbar from 'quill/modules/toolbar';\nimport Snow from 'quill/themes/snow';\n\nimport htmlEditButton from \"quill-html-edit-button\";\n\nQuill.register({\n  'modules/toolbar': Toolbar,\n  'themes/snow': Snow,\n  \"modules/htmlEditButton\": htmlEditButton\n})\n\nconst quill = new Quill(editor, {\n  // ...\n  modules: {\n    // ...\n    htmlEditButton: {}\n  }\n});\n```\n\n## Quickstart (typescript)\n\nDue to Quill's implementation, typescript integration is not trivial:\n\n- Follow the demo example here [`demos/typescript/src/index.ts`](https://github.com/benwinding/quill-html-edit-button/blob/master/demos/typescript/src/index.ts)\n- The file [`setup.js`](https://github.com/benwinding/quill-html-edit-button/blob/master/demos/typescript/src/setup.js`) is to use the library without types (as they aren't implemented with quill modules).\n- Your `tsconfig.json` needs the following properties, to prevent errors:\n``` json\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"checkJs\": false\n  }\n```\n\n\n## Quickstart (script tag)\n\n``` html\n\u003cscript src=\"https://unpkg.com/quill@1.3.7/dist/quill.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/quill-html-edit-button@2.2.7/dist/quill.htmlEditButton.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  Quill.register(\"modules/htmlEditButton\", htmlEditButton);\n  const quill = new Quill(editor, {\n    // ...\n    modules: {\n      // ...\n      htmlEditButton: {}\n    }\n  });\n\u003c/script\u003e\n```\n\n## Options\n\n``` js\nmodules: {\n  // ...\n  htmlEditButton: {\n    debug: true, // logging, default:false\n    msg: \"Edit the content in HTML format\", //Custom message to display in the editor, default: Edit HTML here, when you click \"OK\" the quill editor's contents will be replaced\n    okText: \"Ok\", // Text to display in the OK button, default: Ok,\n    cancelText: \"Cancel\", // Text to display in the cancel button, default: Cancel\n    buttonHTML: \"\u0026lt;\u0026gt;\", // Text to display in the toolbar button, default: \u003c\u003e\n    buttonTitle: \"Show HTML source\", // Text to display as the tooltip for the toolbar button, default: Show HTML source\n    syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false\n    prependSelector: 'div#myelement', // a string used to select where you want to insert the overlayContainer, default: null (appends to body),\n    editorModules: {} // The default mod\n  }\n}\n```\n\n### Syntax Highlighting\n\nBy default syntax highlighting is off, if you want to enable it use `syntax: true` in the options (as shown above) and make sure you add the following script tags:\n\n``` html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/github.min.css\"\n/\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js\"\u003e\u003c/script\u003e\n\u003cscript\n  charset=\"UTF-8\"\n  src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/xml.min.js\"\n\u003e\u003c/script\u003e\n```\n\nAlternatively, include these scripts in your package bundler, as long as highlightjs is available in the global space at `window.hljs`.\n\n## Customising The HTML Editor\nThe editor itself is actually a Quill Editor instance too! So you can pass in custom modules like this:\n\n``` ts\n  // options\n  htmlEditButton: {\n    // Flags\n    debug?: boolean;              // default:  false \n    syntax?: boolean;             // default:  false  \n    // Overlay\n    closeOnClickOverlay: boolean; // default:  true                       \n    prependSelector: string;      // default:  null                       \n    // Labels\n    buttonHTML?: string;          // default:  \"\u0026lt;\u0026gt;\"\n    buttonTitle?: string;         // default:  \"Show HTML source\"\n    msg: string;                  // default:  'Edit HTML here, when you click \"OK\" the quill editor\\'s contents will be replaced'     \n    okText: string;               // default:  \"Ok\"\n    cancelText: string;           // default:  \"Cancel\"            \n    // Quill Modules (for the HTML editor)\n    editorModules?: {             // default:  null\n      // Any modules here will be declared in HTML quill editor instance\n      keyboard: {\n        bindings: {\n          custom: {\n            key: 'a',\n            handler: function(range, context) {\n              console.log('A KEY PRESSED!');\n            }\n          },\n        },\n      },\n    },\n  },\n```\n\n## Thanks\n\nThis project is based on [quill-image-uploader](https://github.com/NoelOConnell/quill-image-uploader), thanks mate!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Fquill-html-edit-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenwinding%2Fquill-html-edit-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenwinding%2Fquill-html-edit-button/lists"}