Angular集成UEditor

    一、Ueditor的集成主要經過把UEditor作成一個Component來實現，先上Component代碼：      

import {
  AfterContentInit, Component, Input, OnDestroy, OnInit
} from '@angular/core';
import {DomSanitizer, SafeHtml} from '@angular/platform-browser';



@Component({
  selector: 'app-ueditor',
  template: '<div [innerHTML]="trustedHtml"></div>'
})
export class UeditorComponent implements OnInit, OnDestroy, AfterViewInit {
  ngOnDestroy(): void {
    this.ueditor.destroy();
    this.ueditor = null;
  }


  @Input() content: string;
  ueditor: any;

  trustedHtml: SafeHtml;
  constructor(private sanitizer: DomSanitizer) {
    // javascript: URLs are dangerous if attacker controlled.
    // Angular sanitizes them in data binding, but you can
    // explicitly tell Angular to trust this value:
  }
  ngOnInit(): void {
    const html = '<script id="textdescription" name="content"  style="display: inline-block;" type="text/plain">' + this.content + '</script>';
    this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(html);

  }
  ngAfterViewInit(): void {
    this.ueditor = UE.getEditor('textdescription', {'initialFrameHeight': 580});
    //console.log(this.ueditor);
  }


}

 

   簡單解釋一下，這個代碼幹了啥，用DomSanitizer這個組件把原本模板中不合法的Script標籤合法化，並且只能經過屬性綁定的賦值，才能讓模板把它渲染出來。Ng的模板自帶XSS過濾，像Script標籤會被直接省略掉，致使的結果是UE找不到holder的位置，執行出錯。

   二、上面這個代碼裏面的UE是一個全局庫，有個比較直接懶的只是讓其可見的聲明方式是以下，細緻的接口聲明，同志們本身搞吧：

declare var UE: any;

      三、把Ueditor的那兩個js文件ueditor.config.js、ueditor.all.js加進angular-cli的scripts配置項。

      四、要把Ueditor用到的靜態資源扔進assets

      五、ueditor.config.js中的UEDITOR_HOME_URL改爲靜態文件URL父目錄，serverUrl改爲後端服務器URL。

      最後補一句後端修改點，因爲SPA每每跨域部署，後端正常的CORS配置之外，Ueditor會自動把某些調用(config)改爲jsonp調用，後端須要根據callback參數作對應額jsonp方式返回響應。最後作個廣告：若是你用Django，推薦DUEditor插件：https://github.com/dhcn/DUEditor