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');