ngx-ueditor

Angular2.x for Baidu UEditor

Demo

特性

懒加载 ueditor.all.js 文件。
支持ueditor事件监听与移除
支持语言切换
支持ueditor实例对象直接访问。

使用

1、安装

npm install ngx-ueditor --save

把 UeditorModule 模块导入到你项目中。

import { UeditorModule } from 'ngx-ueditor';

@NgModule({
    imports: [BrowserModule,UeditorModule ],declarations: [AppComponent],bootstrap: [AppComponent]
})
export class AppModule { }

2、使用

<ueditor [(ngModel)]="full_source" 
         [config]="{...}"
         [path]="'./assets/ueditor/'"
         (onReady)=""
         (onDestroy)=""
         (onContentChange)=""></ueditor>

名称	类型	默认值	描述
config	Object		前端配置项说明，见官网
path	string	./assets/ueditor/	ueditor代码根目录路径，以 `/` 结尾。
onReady	Function		编辑器准备就绪后会触发该事件
onDestroy	Function		编辑器组件销毁后会触发该事件
onContentChange	Function		编辑器内容发生改变时会触发该事件

3、关于懒加载

懒加载在未到 wdinow.UE 时会启动，如果你在 index.html 已经使用 <script src="ueditor.all.js"></script> 加载过，懒加载流程将会失效。

加载语言注意点

懒加载会自动识别并引用，否则，需要自行在 <head> 加入语言版本脚本。

访问ueditor实例对象

首先，需要给组件定义一下模板变量：

<ueditor [(ngModel)]="full_source" #full></ueditor>

使用 @ViewChild 访问组件，并使用 this.full.Instance 访问ueditor实例对象。

export class DemoComponent {
    @ViewChild('full') full: UeditorComponent;
    constructor(private el: ElementRef) {}

    getAllHtml() {
        // 通过 `this.full.Instance` 访问ueditor实例对象
        alert(this.full.Instance.getAllHtml())
    }
}

事件

虽说上节也可以直接注册ueditor事件，但当组件被销毁时可能会引发内存泄露。所以不建议直接在ueditor实例中这么做。组件本身提供 addListener 和 removeListener 来帮你处理。

// 事件监听
this.full.addListener('focus',() => {
    this.focus = `fire focus in ${new Date().getTime()}`;
});
// 事件移除
this.full.removeListener('focus');

表单非空校验

组件加入 required 当编辑器为空时会处于 ng-invalid 状态，具体体验见Live Demo。

Angular2如何使用Ueditor？