背景

最近折腾前端，选用了漂亮的Antd angular，但它并没有提供富文本编辑器，于是就想手动集成国内最好用的Ueditor.

主要知识点

• 组件
• 父组件调用子组件方法
• 组件传参

手术过程

1、下载 Ueditor 1.4.3.3 for ASP，为什么要下asp呢？因为根本没打算用asp文件夹下的东西，不要再问为什么了。

2、下载 Angular Routing 演示项目 Hero，这个项目集成了一个Route的演示。

3、解压项目，执行npm install还原包。

4、将下载的Ueditor解压到 /src/assets/下，并删除index.html和asp，文件路径看起来像下图这样

目录结构

5、用VS Code打开项目，在Terminal中执行 ng g component ueditor创建一个组件，此组件在src/app/ueditor/下。

6、编辑angular.json文件，在projects.angular.io-example.architect.build.scripts中引入Ueditor的js文件。

            "scripts": [

              "src/assets/ueditor/ueditor.config.js",
              "src/assets/ueditor/ueditor.all.js",
              "src/assets/ueditor/lang/zh-cn/zh-cn.js"
            ]

引入JS

7、编辑src/assets/ueditor/ueditor.config.js，设置HOME_URL

  window.UEDITOR_HOME_URL = "/assets/ueditor/"

8、编辑src/app/ueditor/ueditor.component.ts如下

import { Component, OnInit, Input } from "@angular/core";
declare var UE: any;
@Component({
  selector: "app-ueditor",
  template: ""
})
export class UeditorComponent implements OnInit {
  ue: any;
  interval : any;
  //编辑器内容
  @Input() content: string;
  //编辑器id
  @Input() id: string;
  constructor() {}

  ngOnInit() {
    this.ue = UE.getEditor(this.id);
    if(this.content!=null && this.content != undefined && this.content!=""){
      this.setContent(this.content);
    }
  }
  //获取内容
  public getContent(){
    return this.ue.getContent();
  }
  //设置内容
  public setContent(content: string){
    var that = this;
    this.interval = setInterval(function(){
      if(that.ue.isReady == 1){
        that.ue.setContent(that.content, false);
        clearInterval(that.interval);
      }
    },10);
  }
}

在这一步，由于初始化编辑器需要一点时间，所以使用了setInterval去判断编辑器是否初始化完成，然后才会去设置编辑器的内容。

可能有机智的朋友会问为什么不用UE.editor.ready事件呢？

BUT, 这个我试过了，ready触发的时候，仍然无法setContent，最后只能采用这种笨办法。

如果有高人写出更优雅的方法，请扔我一份，谢谢！

9、删除ueditor.component.css和ueditor.component.html

10、编辑src/app/hero-detail/hero-detail.component.ts

增加一个变量htmlbody:string，并在ngOnInit中初始化此变量值this.htmlbody = "<p style='color:red'>红衣军出动</p>";

增加对组件的引用

  @ViewChild('editor1') editor: UeditorComponent;
  getContent(){
    this.hero.name = this.editor.getContent();
  }

完整代码清单

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { Hero }         from '../hero';
import { HeroService }  from '../hero.service';
import { UeditorComponent } from '../ueditor/ueditor.component';


@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
  hero: Hero;
  htmlbody : string;

  constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.htmlbody = "<p style='color:red'>红衣军出动</p>";
    //this.loaddata();
    console.log("detail-show");
    this.getHero();
  }
  @ViewChild('editor1') editor: UeditorComponent;
  getContent(){
    this.hero.name = this.editor.getContent();
  }
  loaddata(){
    console.log("herodetail running");
    setTimeout(()=>{this.loaddata()}, 1000);
  }
  ngOnDestroy(){
    console.log("herodetail destory");
    return true;
  }
  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
    this.location.back();
  }
}

11、编辑src/app/hero-detail/hero-detail.component.html，增加app-ueditor组件

<app-ueditor id="editor" [(content)]="htmlbody" #editor1></app-ueditor>

12、运行效果

在Terminal中输入ng serve --open，编译完成后弹出浏览器，点击一个英雄名称查看效果。

组件赋值效果

在编辑器中输入文字后，点击“读取内容”获取更改后的内容

组件取值效果

附：

工具栏定制，参数定制，可以在UE.getEditor时传入新的参数，例如

toolbars = [    [
        'source', //源代码
        'fullscreen', //全屏
        'undo', //撤销
        'redo', //重做
        'selectall', //全选
        'fontfamily', //字体
        'fontsize', //字号
        'forecolor', //字体颜色
        'bold', //加粗
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'superscript', //上标
    ],[
        'pasteplain', //纯文本粘贴模式
        'horizontal', //分隔线
        'removeformat', //清除格式
        'time', //时间
        'date', //日期
        'unlink', //取消链接
        'spechars', //特殊字符
        'searchreplace', //查询替换
        'justifyleft', //居左对齐
        'justifyright', //居右对齐
        'justifycenter', //居中对齐
        'justifyjustify', //两端对齐
        'simpleupload', //单图上传
        'insertimage', //多图上传
        'attachment', //附件
        'insertvideo', //视频
        'touppercase', //字母大写
        'tolowercase', //字母小写
        'template', //模板
    ]];

  ngOnInit() {
    this.ue = UE.getEditor(this.id, {toolbars : this.toolbars, initialFrameHeight  : 200});
...
  }

参考

UEditor配置项手册