{"id":15893235,"url":"https://github.com/liuhong1happy/react-umeditor","last_synced_at":"2025-04-04T22:09:17.829Z","repository":{"id":57346960,"uuid":"58367982","full_name":"liuhong1happy/react-umeditor","owner":"liuhong1happy","description":"React Editor like Umeditor","archived":false,"fork":false,"pushed_at":"2022-12-08T09:27:46.000Z","size":6560,"stargazers_count":278,"open_issues_count":47,"forks_count":76,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-03-28T21:06:42.846Z","etag":null,"topics":["editor","react","umeditor"],"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/liuhong1happy.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":"2016-05-09T10:19:20.000Z","updated_at":"2025-03-09T13:21:37.000Z","dependencies_parsed_at":"2023-01-25T05:45:14.421Z","dependency_job_id":null,"html_url":"https://github.com/liuhong1happy/react-umeditor","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-umeditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-umeditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-umeditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-umeditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liuhong1happy","download_url":"https://codeload.github.com/liuhong1happy/react-umeditor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256115,"owners_count":20909240,"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":["editor","react","umeditor"],"created_at":"2024-10-06T08:09:11.529Z","updated_at":"2025-04-04T22:09:17.803Z","avatar_url":"https://github.com/liuhong1happy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-umeditor\n\n[![Version](https://img.shields.io/npm/v/react-umeditor.svg)](https://www.npmjs.com/package/react-umeditor)\n[![Downloads](https://img.shields.io/npm/dt/react-umeditor.svg)](https://www.npmjs.com/package/react-umeditor)\n\nReact Editor like [Umeditor](https://github.com/fex-team/umeditor)\n\n## Install \n\n\tnpm install react-umeditor --save\n\n## Use\n\njavascript\n\n``` js\nvar React = require('react');\nvar Editor = require('react-umeditor');\n\nclass App extends React.Component {\n\tconstructor(props){\n\t\tsuper(props);\n\t\tthis.state = {\n\t\t\tcontent: \"\"\n\t\t}\n\t}\n\thandleChange(content){\n\t\tthis.setState({\n\t\t\tcontent: content\n\t\t})\n\t}\n\tgetIcons(){\n\t\tvar icons = [\n\t\t\t\"source | undo redo | bold italic underline strikethrough fontborder emphasis | \",\n\t\t\t\"paragraph fontfamily fontsize | superscript subscript | \",\n\t\t\t\"forecolor backcolor | removeformat | insertorderedlist insertunorderedlist | selectall | \",\n\t\t\t\"cleardoc  | indent outdent | justifyleft justifycenter justifyright | touppercase tolowercase | \",\n\t\t\t\"horizontal date time  | image emotion spechars | inserttable\"\n\t\t]\n\t\treturn icons;\n\t}\n\tgetPlugins(){\n\t\treturn {\n\t\t\t\"image\": { \n\t\t\t\t\"uploader\": { \n\t\t\t\t\t\"name\":\"file\", \n\t\t\t\t\t\"url\": \"/api/upload\" \n\t\t\t\t} \n\t\t\t} \n\t\t}\n\t}\n\trender(){\n\t    var icons = this.getIcons();\n\t\tvar plugins = this.getPlugins();\n\t\treturn (\u003cEditor ref=\"editor\" \n\t\t\ticons={icons} \n\t\t\tvalue={this.state.content} defaultValue=\"\u003cp\u003eReact Umeditor\u003c/p\u003e\" \n\t\t\tonChange={this.handleChange.bind(this)} \n\t\t\tplugins={plugins} /\u003e)\n\t}\n}\n```\n\t\nhtml\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"UTF-8\"\u003e\n\t\u003ctitle\u003eEditor Demo\u003c/title\u003e\n\t\n\t\u003c!-- mathquill \u0026 umeditor stylesheet \u0026 if you have the formula icon --\u003e\n\t\u003clink rel=\"stylesheet\" href=\"../../dist/third-part/mathquill/mathquill.css\"/\u003e\n\t\n\t\u003clink rel=\"stylesheet\" href=\"app.css\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\t\u003cdiv id=\"react-container\"\u003e\u003c/div\u003e\n\t\n\t\u003c!-- jquery \u0026 mathquill javascript \u0026 if you have the formula icon --\u003e\n\t\u003cscript src=\"../../dist/third-part/jquery.min.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"../../dist/third-part/mathquill/mathquill.js\"\u003e\u003c/script\u003e\n\t\n\t\u003c!-- your react script --\u003e\n\t\u003cscript src=\"bundle.js\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\t\n## Example\n\n- [react-umeditor-example](https://github.com/liuhong1happy/react-umeditor-example)\n\n## Ref Functions\n\nYou can `this.refs.editor.xxx()`! The `xxx` maybe is as follows:\n\n* findDOMNode: find  refs by ref name  `\"root\",\"editarea\",\"toolbar\",\"color\" `\n* setContent: set html of editor\n* getContent: get html of editor\n* focusEditor: focus the editor\n\n## Props\n\nYou can set the `props`!The `props` maybe is as follows:\n* onFocus: the focus event\n* onChange: the text change event `{ content: string }`\n* defaultValue: default value of editor\n* value: value of editor\n* icons: icons of toolbar\n* plugins: settings of plugins\n\t* toolbar: settings of toolbar\n\t\t* icons: custom icons\n\t\t\t* name: name of icon\n\t\t\t* title: title of icon\n\t\t\t* onIconClick: handle event\n\t\t\t* mapRangeState: filter rangeState\n\t\t\t* props: props of icon \u0026 component\n\t\t\t* component: custom component, eg. dialog\n\t* image: settings of image dialog \n\t\t* uploader: settings of image uploader\n\t\t\t* name:  form name of xhr\n\t\t\t* url:  url of server\n\t\t\t* data: other formData of xhr\n\t\t\t* filter: filter json style body\n\t\t* customUploader: custom file uploader(see [FileUploader](./src/utils/FileUpload.js))\n\n## Icons\n\nSupport icons, As fllow:\n\n\tsource undo redo bold italic underline strikethrough fontborder emphasis \n\tparagraph fontfamily fontsize superscript subscript \n\tforecolor backcolor removeformat insertorderedlist insertunorderedlist  selectall \n\tcleardoc  indent outdent justifyleft justifycenter justifyright  touppercase tolowercase \n\thorizontal date time  image emotion spechars inserttable formula\n\n## Snapshot\n\n![snapshot](editor.png)\n\n## Develop\n\n\t// clone code\n\tgit clone https://github.com/liuhong1happy/react-umeditor\n\tcd react-umeditor\n\t// install require\n\tnpm install\n\t// build\n\tnpm run build\n\t// run example server\n\tcd example\n\tnpm run example\n\t\n## Todo - Version 1.0\n\n- [x] 1. Custom Image Uploader Props\n- [x] 2. Custom Toolbar Icon\n- [x] 3. ES6 Style\n- [x] 4. React16\n- [ ] 5. Tests (Toolbar \u0026 Example \u0026 New Feature)\n- [ ] 6. Docs (README.md \u0026 Docs \u0026 Example Docs)\n\n## Contribute\n\nChanges and improvements are more than welcome! Feel free to fork and open a pull request. Please make your changes in a specific branch and request to pull into master! If you can, please make sure the editor fully works before sending the PR, as that will help speed up the process.\n\nSee more [document](https://github.com/liuhong1happy/react-umeditor/blob/master/docs/contribute.md)\n\n## Concat\n\nEmail: [liuhong1.happy@163.com](mailto:liuhong1.happy@163.com)\n\nQQ Group: 247978846\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliuhong1happy%2Freact-umeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliuhong1happy%2Freact-umeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliuhong1happy%2Freact-umeditor/lists"}