{"id":13536387,"url":"https://github.com/ipenywis/ButterflyEditor","last_synced_at":"2025-04-02T03:30:39.775Z","repository":{"id":57191901,"uuid":"163892366","full_name":"ipenywis/ButterflyEditor","owner":"ipenywis","description":"WYSIWYG Rich Text Editor ","archived":false,"fork":false,"pushed_at":"2019-01-07T13:07:00.000Z","size":34748,"stargazers_count":25,"open_issues_count":2,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T04:46:48.850Z","etag":null,"topics":["draftjs","javascript","react","typescript","wysiwyg"],"latest_commit_sha":null,"homepage":"https://ipenywis.github.io/ButterflyEditor/","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/ipenywis.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}},"created_at":"2019-01-02T21:38:55.000Z","updated_at":"2025-03-06T21:24:54.000Z","dependencies_parsed_at":"2022-09-01T05:53:51.966Z","dependency_job_id":null,"html_url":"https://github.com/ipenywis/ButterflyEditor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipenywis%2FButterflyEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipenywis%2FButterflyEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipenywis%2FButterflyEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipenywis%2FButterflyEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipenywis","download_url":"https://codeload.github.com/ipenywis/ButterflyEditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750795,"owners_count":20827782,"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":["draftjs","javascript","react","typescript","wysiwyg"],"created_at":"2024-08-01T09:00:38.312Z","updated_at":"2025-04-02T03:30:38.897Z","avatar_url":"https://github.com/ipenywis.png","language":"TypeScript","funding_links":[],"categories":["Front End"],"sub_categories":[],"readme":"# ButterflyEditor\n\nButterflyEditor is an Extensible Rich Text Editor `WYSIWYG` with nice and smooth UI. Built on top of Draftjs and React for high performance.\n\n[![Screenshot of ButterflyEditor](https://github.com/ipenywis/ButterflyEditor/blob/master/demos/screenshots/butterflyEditor%20v1.0.0%20Screenshot.png)](https://ipenywis.github.io/ButterflyEditor)\n\n- Made for React and Vanilla javascript Apps\n- Support Extensible plugins\n- Rich Text editing the new way\n\n# Features\n\n- All text editor Features\n- Nice and Elegent UI\n- HTML Export support\n- Configurable Editor\n\n# Installation\n\n---\n\nThe Editor package is available on NPM so simply use NPM to install it on your project.\n\n```sh\n$ npm install butterfly-editor --save\n```\n\n##### NOTE: The Editor package comes with support of both Vanilla Javascript Implementation and a React Component\n\n# Usage\n\n---\n\n#### 1- With Javascript App\n\n---\n\nFor javascript apps you either use a CDN like `jsDelivr` or install the package from `NPM`.\n**CDN**\n\n```HTML\n\u003c!-- Import Editor Style --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/butterfly-editor@latest/dist/style.css\"/\u003e\n\u003c!-- And the Main Script --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/butterfly-editor@latest/dist/index.js\"\u003e\u003c/script\u003e\n```\n\n**You can also use another CDNs that provides NPM packages automatically.**\n\n**We highly recommend using NPM over CDN since it is more stable.**\n\nNow for Creating and Initializing the Editor you need to make sure you create an **EMPTY** HTML container `div` for the editor to mount and render on.\n\n```HTML\n    \u003cdiv id=\"butterfly-editor\"\u003e\u003c/div\u003e\n```\n\nThen Create the Editor:\n\n```javascript\n\u003cscript\u003e\n    /*Run the createEditor command on the default exported EditorCreator class giving it a container id and config object*/\n    EditorCreator.createEditor(\"butterfly-editor\", { allowHTMLExport: true });\n\u003c/script\u003e\n```\n\n**Check the DOCS bellow for the Config Object and available API Methods.**\n\n#### 2- With React App\n\n---\n\nFor React you must use NPM to install the package since you are using a package manager like Webpack or Browserify so everything will be taken care of from your bundler you just need to install and import and the editor.\n\n```javascript\nimport { ButterflyEditor } from \"butterfly-editor\";\n//Rendering\n\u003cButterflyEditor\n  config={{ allowHTMLExport: true, initialHeight: \"400px\" }}\n  editorRef={ref =\u003e (this.textEditor = ref)}\n/\u003e;\n```\n\n**Check the Examples Section for more detailed implementation.**\n\n# API Docs\n\n---\n\nThe package has a Default Export `EditorCreator` and other named Expots like the Editor React Component `ButterflyEditor`\n\n**Exports:** `default` as EditorCreator | `ButterflyEditor` | `EditorConfig`\n\n#### EditorCreator\n\nThe EditorCreator is a class that allows you to directly create and initialize an editor on a specific container with `#id` or get the react component.\n\n###### Methods\n\n- **static CreateEditor(containerId: string. config: EditorConfig): EditorInstance**\n\n#### ButterflyEditor React Component\n\n###### Props:\n\n- config: EditorConfig\n- ref: (editor: EditorInstance) =\u003e void\n\n#### EditorConfig\n\n- allowEditorFullExpand: boolean\n- allowHTMLExport: boolean\n- allowResize: boolean\n- initialHeight: string\n- maxHeight: string\n- fixedHeight: string\n\nall the configs are optional, if not provided there will be an `DEFAULT` values\n\n##### Default EditorConfig\n\n- allowEditorFullExpand: true\n- allowHTMLExport: true\n- allowResize: true\n- initialHeight: \"200px\"\n- maxHeight: null\n- fixedHeight: null\n\n#### EditorInstance\n\n- getExportedHTML(): string\n- geText(): string\n- onChange(callback: (newText: string, html: string) =\u003e void)\n- setEditorInitialHeight(height: string)\n- setEditorFixedHeight(height: string)\n- setEditorMaxHeight(height: string)\n\n# Examples\n\n---\n\n**NOTE:** Full code and configuration of the examples is available inside demos/ of the Repo\n\n### Vanilla Javascript with Webpack\n\n```javascript\n//Import Main Editor (Imports an EditorCrea)\nimport EditorCreator from \"butterfly-editor\";\n\n//This will create and render the Editor Component into the target's id\nEditorCreator.createEditor(\"editor-root-container\", {\n  maxHeight: \"500px\",\n  allowHTMLExport: true,\n  allowResize: true\n}).then(editorInstance =\u003e {\n  //this gets printed only once the editor is initialized\n  console.log(\"Current HTML: \", editorInstance.getExportedHTML());\n\n  console.log(editorInstance);\n  //register an onChange callback to get updated text and html when user change something on the editor\n  editorInstance.onChange((text, html) =\u003e {\n    console.log(\"New Text: \", text);\n    console.log(\"New HTML: \", html);\n  });\n});\n```\n\nAlso don't forget to import the editor style either on js scripe file and let webpack handle the css output or via standard HTML link in the head\n\n```HTML\n\u003clink rel=\"stylesheet\" href=\"path/to/node_modules/butterfly-editor/dist/style.css\" /\u003e\n```\n\n### React with `create-react-app`\n\n```javascript\nimport React from \"react\";\nimport EditorCreator, { ButterflyEditor } from \"butterfly-editor\";\n//make sure to import Editor style\nimport \"butterfly-editor/dist/style.css\";\n\nexport default class App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.editorConfig = {\n      allowEditorFullExpand: true,\n      allowHTMLExport: false\n    };\n  }\n\n  componentDidMount() {\n    //Register OnChange Callback for listening for new text \u0026 HTML changes on the Butterfly Editor\n    this.textEditor.onChange((text, html) =\u003e {\n      console.log(\"Editor Text Changed: \", text, html);\n    });\n  }\n\n  render() {\n    return (\n      \u003cdiv\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          flexDirection: \"column\",\n          alignItems: \"center\"\n        }}\n      \u003e\n        \u003ch3\u003eButterfly Editor Demo on React (create-react-app)\u003c/h3\u003e\n        \u003cButterflyEditor\n          config={this.editorConfig}\n          editorRef={ref =\u003e (this.textEditor = ref)}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n# AUTHOR\n\n---\n\n**Created with :heart: and :chocolate_bar: By Islem Penywis**\n\n**[Twitter](https://twitter.com/ipenywis)**\n\n**[Github](https://github.com/ipenywis)**\n\n**[Ipenywis.com](https://ipenywis.com)**\n\n**Email: islempenywis@gmail.com**\n\n# CONTRIBUTING\n\n---\n\nPlease feel free to take the ButterflyEditor and add new features to it or fix bugs you found along the way of using it.\nMake sure to PR you changes to make the Best Open-Source Rich Text Editor Ever for people like me and you!\n\n# LICENSE\n\n---\n\n**MIT**\ncheck LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipenywis%2FButterflyEditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipenywis%2FButterflyEditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipenywis%2FButterflyEditor/lists"}