Angular2如何使用Ueditor？

时间 2019-11-08

标签 angular2 angular 如何使用 ueditor 栏目 AngularJS 繁體版

原文原文链接

ngx-ueditor

Angular2.x for Baidu UEditorhtml

Demo

Live Demo前端

特性

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

使用

一、安装

npm install ngx-ueditor --save

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

import { UeditorModule } from 'ngx-ueditor';

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

二、使用

<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		编辑器内容发生改变时会触发该事件

三、关于懒加载

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

加载语言注意点typescript

懒加载会自动识别并引用，不然，须要自行在 <head> 加入语言版本脚本。npm

访问ueditor实例对象

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

<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 来帮你处理。ui

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

表单非空校验

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