Angular2如何使用Ueditor?

发布时间:2019-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular2如何使用Ueditor?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

ngx-uedITor

Angular2.x for Baidu UEditor

NPM version
Build Status

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>
名称 类型 默认值 描述
config Object 前端配置项说明,见官网
path string ./assets/ueditor/ ueditor代码根目录路径,以 / 结尾。
onReady Function 编辑器准备就绪后会触发该事件
onDestroy Function @H_777_173@编辑器组件销毁后会触发该事件
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实例中这么做。组件本身提供 addListenerremoveListener 来帮你处理。

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

表单非空校验

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

脚本宝典总结

以上是脚本宝典为你收集整理的Angular2如何使用Ueditor?全部内容,希望文章能够帮你解决Angular2如何使用Ueditor?所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。