Angular2如何使用Ueditor？

2019年9月4日 297次阅读 来源: cipchk

ngx-ueditor

Angular2.x for Baidu UEditor

《Angular2如何使用Ueditor？》
《Angular2如何使用Ueditor？》

Demo

Live 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>
名称类型默认值描述
configObject前端配置项说明，见官网
pathstring./assets/ueditor/ueditor代码根目录路径，以 / 结尾。
onReadyFunction编辑器准备就绪后会触发该事件
onDestroyFunction 编辑器组件销毁后会触发该事件
onContentChangeFunction编辑器内容发生改变时会触发该事件

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。

    原文作者：cipchk
    原文地址: https://segmentfault.com/a/1190000009157357
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞