{"id":21827505,"url":"https://github.com/laixiangran/e-ngx-editor","last_synced_at":"2025-04-14T05:42:57.657Z","repository":{"id":57218019,"uuid":"90526061","full_name":"laixiangran/e-ngx-editor","owner":"laixiangran","description":"基于Angular的富文本编辑组件，依赖第三方插件：neditor（neditor 基于 UEditor）","archived":false,"fork":false,"pushed_at":"2018-11-15T01:45:22.000Z","size":3460,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-09T21:41:05.978Z","etag":null,"topics":["angular","editor","ueditor"],"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/laixiangran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-05-07T10:50:21.000Z","updated_at":"2019-10-18T03:02:07.000Z","dependencies_parsed_at":"2022-09-07T16:13:14.331Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-editor","commit_stats":null,"previous_names":["laixiangran/essence-ng2-editor"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830420,"owners_count":21168272,"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":["angular","editor","ueditor"],"created_at":"2024-11-27T18:13:22.211Z","updated_at":"2025-04-14T05:42:57.637Z","avatar_url":"https://github.com/laixiangran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-editor\n\n基于Angular的富文本编辑组件，依赖第三方插件：[neditor](https://github.com/notadd/neditor)（neditor 基于 [UEditor](http://fex.baidu.com/ueditor/)）\n\n需要使用后台相关的功能（如上传图片、视频等等）请部署对应的后端，[后端部署说明](http://fex.baidu.com/ueditor/#server-deploy)\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-editor@latest\n\t```\n\t\n2. 在index.html引入neditor [下载安装包](https://github.com/notadd/neditor#%E5%AE%8C%E6%95%B4%E5%AE%89%E8%A3%85%E5%8C%85-%E6%97%A0%E9%9C%80%E7%BC%96%E8%AF%91)\n\n\t```html\n    \u003cscript src=\"./assets/scripts/neditor/neditor.config.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./assets/scripts/neditor/neditor.all.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"./assets/scripts/neditor/i18n/zh-cn/zh-cn.js\"\u003e\u003c/script\u003e\n\t```\n\n3. Add the ENgxEditorModule\n\n\t```typescript\n\timport {ENgxEditorModule} from \"e-ngx-editor\";\n\t@NgModule({\n\t    imports: [\n\t        ENgxEditorModule\n\t    ]\n\t})\n\t```\n\n4. Use in the template\n\n\t```html\n\t\u003ce-ngx-editor #editor [(ngModel)]=\"model_text\"\n                        (contentChange)=\"contentChange($event)\"\n                        (ready)=\"editorReady($event)\"\n                        (click)=\"test(editor.text)\"\u003e\n    \u003c/e-ngx-editor\u003e\n\t```\n\n5. Use in the component\n\n\t```typescript\n\tmodel_text: string = '\u003cp style=\"font-weight: bold;\"\u003e\u003ca href=\"http://ueditor.baidu.com/website/index.html\" target=\"_blank\" title=\"去UEditor官网\"\u003eUEditor Component for Angular2\u003c/a\u003e\u003c/p\u003e';\n\n    contentChange ($event) {\n        console.log(\"contentChange：\", $event);\n    }\n\n    editorReady ($event) {\n        console.log(\"ready：\", $event);\n    }\n\n    test (text: string): void {\n        console.log(text);\n    }\n\t```\n\n## API\n\n### Inputs\n\n- `[(ngModel)]`（`string`） - 绑定编辑器内容\n- `ueOption`（`?Object`） - 属性参数（[参照官网配置](http://fex.baidu.com/ueditor/#start-config)），默认defaultConfig如下：\n```typescript\n    defaultConfig: any = {\n        autoHeightEnabled: false\n    };\n```\n\n### Outputs\n\n- `ready` - 编辑器准备就绪后会触发该事件\n\n- `destroy` - 执行destroy方法会触发该事件\n\n- `reset` - 执行reset方法会触发该事件\n\n- `focusEvent` - 执行focus方法会触发该事件\n\n- `langReady` - 语言加载完成会触发该事件\n\n- `beforeExecCommand` - 运行命令之后会触发该命令\n\n- `afterExecCommand` - 运行命令之后会触发该命令\n\n- `firstBeforeExecCommand` - 运行命令之前会触发该命令\n\n- `beforeGetContent` - 在getContent方法执行之前会触发该事件\n\n- `afterGetContent` - 在getContent方法执行之后会触发该事件\n\n- `getAllHtml` - 在getAllHtml方法执行时会触发该事件\n\n- `beforeSetContent` - 在setContent方法执行之前会触发该事件\n\n- `afterSetContent` - 在setContent方法执行之后会触发该事件\n\n- `selectionchange` - 每当编辑器内部选区发生改变时，将触发该事件。**警告： 该事件的触发非常频繁，不建议在该事件的处理过程中做重量级的处理**\n\n- `beforeSelectionChange` - 在所有selectionchange的监听函数执行之前，会触发该事件\n\n- `afterSelectionChange` - 在所有selectionchange的监听函数执行完之后，会触发该事件\n\n- `contentChange` - 编辑器内容发生改变时会触发该事件\n\n### Methods\n\n- `setHeight (height: number): void` - 设置编辑器高度。当配置项autoHeightEnabled为真时，该方法无效\n\t- height 编辑器高度（不带单位）\n\t\n- `setContent (html: string, isAppendTo: boolean = false): void` - 设置编辑器的内容，可修改编辑器当前的html内容\n\t- html 要插入的html内容\n    - 若传入true，不清空原来的内容，在最后插入内容，否则，清空内容再插入\n    \n- `getContent (): any` - 获取编辑器html内容\n\n- `getContentTxt (): any` - 获取编辑器纯文本内容\n\n- `getPlainTxt (): any` - 获取编辑器带格式的纯文本内容\n\n- `hasContents (): boolean` - 判断编辑器是否有内容\n\n- `focus (): void` - 让编辑器获得焦点\n\n- `blur (): void` - 让编辑器失去焦点\n\n- `isFocus (): boolean` - 判断编辑器是否获得焦点\n\n- `setDisabled (): void` - 设置当前编辑区域不可编辑\n\n- `setEnabled (): void` - 设置当前编辑区域可以编辑\n\n- `setHide (): void` - 隐藏编辑器\n\n- `setShow (): void` - 显示编辑器\n\n- `getSelectionText (): string` - 获得当前选中的文本\n\n- `executeCommand (command: string, content?: string)` - 执行指定命令\n\t- command 执行的命令\n    - content 执行要操作的内容\n\n## Develop\n\n\t```shell\n\tnpm install // 安装依赖包\n\t\n\tnpm start // 启动项目\n\t```\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-editor/lists"}