{"id":13394311,"url":"https://github.com/jaredreich/pell","last_synced_at":"2025-05-12T13:08:22.645Z","repository":{"id":44364914,"uuid":"96689748","full_name":"jaredreich/pell","owner":"jaredreich","description":"📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies","archived":false,"fork":false,"pushed_at":"2024-05-12T17:09:57.000Z","size":1248,"stargazers_count":12020,"open_issues_count":68,"forks_count":550,"subscribers_count":155,"default_branch":"master","last_synced_at":"2025-05-09T05:41:05.884Z","etag":null,"topics":["contenteditable","editor","javascript","rich-text-editor","text-editing","text-editor","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/jaredreich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-07-09T14:30:51.000Z","updated_at":"2025-05-09T00:16:37.000Z","dependencies_parsed_at":"2024-06-18T11:21:17.245Z","dependency_job_id":"a47b43fa-675c-4da8-ab77-cb427d7f8354","html_url":"https://github.com/jaredreich/pell","commit_stats":{"total_commits":73,"total_committers":6,"mean_commits":"12.166666666666666","dds":0.1095890410958904,"last_synced_commit":"49a7f63b55fa8274180da89b6d293ff463caa2aa"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredreich%2Fpell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredreich%2Fpell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredreich%2Fpell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredreich%2Fpell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredreich","download_url":"https://codeload.github.com/jaredreich/pell/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745157,"owners_count":21957317,"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":["contenteditable","editor","javascript","rich-text-editor","text-editing","text-editor","wysiwyg","wysiwyg-editor"],"created_at":"2024-07-30T17:01:15.682Z","updated_at":"2025-05-12T13:08:22.609Z","avatar_url":"https://github.com/jaredreich.png","language":"JavaScript","readme":"#### [v2 working branch](https://github.com/jaredreich/pell/tree/v2) and [v2 project board](https://github.com/jaredreich/pell/projects/1)\n\n---\n\n\u003cimg src=\"./images/logo.png\" width=\"128\" alt=\"Logo\"\u003e\n\n[![npm](https://img.shields.io/npm/v/pell.svg)](https://www.npmjs.com/package/pell)\n[![cdnjs](https://img.shields.io/cdnjs/v/pell.svg)](https://cdnjs.com/libraries/pell)\n\n\u003e pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies\n\n![Demo](/demo.gif?raw=true \"Demo\")\n\n## Comparisons\n\n| library       | size (min+gzip) | size (min) | jquery | bootstrap | react | link |\n|---------------|-----------------|------------|--------|-----------|-------|------|\n| pell          | 1.38kB          | 3.54kB     |        |           |       | https://github.com/jaredreich/pell |\n| squire        | 16kB            | 49kB       |        |           |       | https://github.com/neilj/Squire |\n| medium-editor | 27kB            | 105kB      |        |           |       | https://github.com/yabwe/medium-editor |\n| quill         | 43kB            | 205kB      |        |           |       | https://github.com/quilljs/quill |\n| trix          | 47kB            | 204kB      |        |           |       | https://github.com/basecamp/trix |\n| ckeditor      | 163kB           | 551kB      |        |           |       | https://ckeditor.com |\n| trumbowyg     | 8kB             | 23kB       | x      |           |       | https://github.com/Alex-D/Trumbowyg |\n| summernote    | 26kB            | 93kB       | x      | x         |       | https://github.com/summernote/summernote |\n| draft         | 46kB            | 147kB      |        |           | x     | https://github.com/facebook/draft-js |\n| froala        | 52kB            | 186kB      | x      |           |       | https://github.com/froala/wysiwyg-editor |\n| tinymce       | 157kB           | 491kB      | x      |           |       | https://github.com/tinymce/tinymce |\n\n## Features\n\n* Pure JavaScript, no dependencies, written in ES6\n* Easily customizable with the sass file (pell.scss) or overwrite the CSS\n\nIncluded actions:\n- Bold\n- Italic\n- Underline\n- Strike-through\n- Heading 1\n- Heading 2\n- Paragraph\n- Quote\n- Ordered List\n- Unordered List\n- Code\n- Horizontal Rule\n- Link\n- Image\n\nOther available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):\n- Justify Center\n- Justify Full\n- Justify Left\n- Justify Right\n- Subscript\n- Superscript\n- Font Name\n- Font Size\n- Indent\n- Outdent\n- Clear Formatting\n- Undo\n- Redo\n\nOr create any custom action!\n\n## Browser Support\n\n* IE 9+ (theoretically, but good luck)\n* Chrome 5+\n* Firefox 4+\n* Safari 5+\n* Opera 11.6+\n\n## Installation\n\n#### npm:\n\n```bash\nnpm install --save pell\n```\n\n#### HTML:\n\n```html\n\u003chead\u003e\n  ...\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/pell/dist/pell.min.css\"\u003e\n  \u003cstyle\u003e\n    /* override styles here */\n    .pell-content {\n      background-color: pink;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  ...\n  \u003c!-- Bottom of body --\u003e\n  \u003cscript src=\"https://unpkg.com/pell\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Usage\n\n#### API\n\n```js\n// ES6\nimport pell from 'pell'\n// or\nimport { exec, init } from 'pell'\n```\n\n```js\n// Browser\npell\n// or\nwindow.pell\n```\n\n```js\n// Initialize pell on an HTMLElement\npell.init({\n  // \u003cHTMLElement\u003e, required\n  element: document.getElementById('some-id'),\n\n  // \u003cFunction\u003e, required\n  // Use the output html, triggered by element's `oninput` event\n  onChange: html =\u003e console.log(html),\n\n  // \u003cstring\u003e, optional, default = 'div'\n  // Instructs the editor which element to inject via the return key\n  defaultParagraphSeparator: 'div',\n\n  // \u003cboolean\u003e, optional, default = false\n  // Outputs \u003cspan style=\"font-weight: bold;\"\u003e\u003c/span\u003e instead of \u003cb\u003e\u003c/b\u003e\n  styleWithCSS: false,\n\n  // \u003cArray[string | Object]\u003e, string if overwriting, object if customizing/creating\n  // action.name\u003cstring\u003e (only required if overwriting)\n  // action.icon\u003cstring\u003e (optional if overwriting, required if custom action)\n  // action.title\u003cstring\u003e (optional)\n  // action.result\u003cFunction\u003e (required)\n  // Specify the actions you specifically want (in order)\n  actions: [\n    'bold',\n    {\n      name: 'custom',\n      icon: 'C',\n      title: 'Custom Action',\n      result: () =\u003e console.log('Do something!')\n    },\n    'underline'\n  ],\n\n  // classes\u003cArray[string]\u003e (optional)\n  // Choose your custom class names\n  classes: {\n    actionbar: 'pell-actionbar',\n    button: 'pell-button',\n    content: 'pell-content',\n    selected: 'pell-button-selected'\n  }\n})\n\n// Execute a document command, see reference:\n// https://developer.mozilla.org/en/docs/Web/API/Document/execCommand\n// this is just `document.execCommand(command, false, value)`\npell.exec(command\u003cstring\u003e, value\u003cstring\u003e)\n```\n\n#### List of overwriteable action names\n- bold\n- italic\n- underline\n- strikethrough\n- heading1\n- heading2\n- paragraph\n- quote\n- olist\n- ulist\n- code\n- line\n- link\n- image\n\n## Examples\n\n#### General\n\n```html\n\u003cdiv id=\"editor\" class=\"pell\"\u003e\u003c/div\u003e\n\u003cdiv\u003e\n  HTML output:\n  \u003cdiv id=\"html-output\" style=\"white-space:pre-wrap;\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { exec, init } from 'pell'\n\nconst editor = init({\n  element: document.getElementById('editor'),\n  onChange: html =\u003e {\n    document.getElementById('html-output').textContent = html\n  },\n  defaultParagraphSeparator: 'p',\n  styleWithCSS: true,\n  actions: [\n    'bold',\n    'underline',\n    {\n      name: 'italic',\n      result: () =\u003e exec('italic')\n    },\n    {\n      name: 'backColor',\n      icon: '\u003cdiv style=\"background-color:pink;\"\u003eA\u003c/div\u003e',\n      title: 'Highlight Color',\n      result: () =\u003e exec('backColor', 'pink')\n    },\n    {\n      name: 'image',\n      result: () =\u003e {\n        const url = window.prompt('Enter the image URL')\n        if (url) exec('insertImage', url)\n      }\n    },\n    {\n      name: 'link',\n      result: () =\u003e {\n        const url = window.prompt('Enter the link URL')\n        if (url) exec('createLink', url)\n      }\n    }\n  ],\n  classes: {\n    actionbar: 'pell-actionbar-custom-name',\n    button: 'pell-button-custom-name',\n    content: 'pell-content-custom-name',\n    selected: 'pell-button-selected-custom-name'\n  }\n})\n\n// editor.content\u003cHTMLElement\u003e\n// To change the editor's content:\neditor.content.innerHTML = '\u003cb\u003e\u003cu\u003e\u003ci\u003eInitial content!\u003c/i\u003e\u003c/u\u003e\u003c/b\u003e'\n```\n\n#### Example (Markdown)\n\n```html\n\u003cdiv id=\"editor\" class=\"pell\"\u003e\u003c/div\u003e\n\u003cdiv\u003e\n  Markdown output:\n  \u003cdiv id=\"markdown-output\" style=\"white-space:pre-wrap;\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport { init } from 'pell'\nimport Turndown from 'turndown'\n\nconst { turndown } = new Turndown({ headingStyle: 'atx' })\n\ninit({\n  element: document.getElementById('editor'),\n  actions: ['bold', 'italic', 'heading1', 'heading2', 'olist', 'ulist'],\n  onChange: html =\u003e {\n    document.getElementById('markdown-output').innerHTML = turndown(html)\n  }\n})\n```\n\n#### Frameworks\n\n- [React](/examples/react.md)\n- [Vue](/examples/vue.md)\n\n## Custom Styles\n\n#### SCSS\n\n```scss\n$pell-content-height: 400px;\n// See all overwriteable variables in src/pell.scss\n\n// Then import pell.scss into styles:\n@import '../../node_modules/pell/src/pell';\n```\n\n#### CSS\n\n```css\n/* After pell styles are applied to DOM: */\n.pell-content {\n  height: 400px;\n}\n```\n\n## License\n\nMIT\n\n## Credits\n\nBrowserStack for cross browser testing:\n\n\u003ca href=\"https://www.browserstack.com\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg width=\"128\" src=\"./images/browserstack.png\" alt=\"BrowserStack logo\"\u003e\u003c/a\u003e\n","funding_links":[],"categories":["JavaScript","Rich text editor","text-editor","Editor","独立的","Text Editor","Programming Languages","Repository","Standalone"],"sub_categories":["Flip","React Components","JavaScript","Editor"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredreich%2Fpell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredreich%2Fpell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredreich%2Fpell/lists"}