ngx-umeditor

Angular4.x for Baidu UMeditor

说明

• 支持图片上传（跨域问题测试通过），不支持百度地图（未解决报错问题）
• 提供了原生UM对象，可自定义操作

使用

1、获取ng2-umeditor

npm install ng2-umeditor --save

将包内umeditor文件夹复制到项目的assets目录中

引入css样式（.angular-cli.json）

...

"styles": [
        "assets/umeditor/themes/default/css/umeditor.css",
        "styles.css"
      ],
...

把 Ng2UmeditorModule 模块导入到你项目中。

import { Ng2UmeditorModule } from 'ng2-umeditor';

@NgModule({
    imports: [..., Ng2UmeditorModule ],
    ...
})
export class AppModule { }

2、Example

<!--test.component.html:-->

<app-ng2-umeditor
         [config]="config"
         [content]="content"
         (onLoad)="onLoad($event)"
         (onChange)="onChange($event)">
</app-ng2-umeditor>

//test.component.ts:

import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {


  constructor() { }

  ngOnInit() { 

    //模拟数据请求过程
    setTimeout(_=>{
        //如果编辑器初始化成功设置初始值
        if (this.um != undefined) this.um.setContent(this.content);
    },3000)

  }

  onLoad(um:any){
      //文本编辑器加载成功后，获取UM对象
      console.log(um);
      this.um=um
      this.um.setContent(this.content)
  }

  onChange(content: string){
      //文本内容改变时获取新的内容
      this.content=content;
  }

  content: string;

  //编辑器配置
  config: any = {
    toolbar: [
      'source | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor | removeformat |',
      'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize',
      '| justifyleft justifycenter justifyright justifyjustify |',
      'link unlink | emotion image ',
      '| horizontal print preview fullscreen'],
    imageUrl: 'http://www.example.com/upload',//图片上传链接
    imagePath: '/'//图片保存路径
  }

  //编辑器对象
  um:any

}

参考说明

主动获取编辑器内容

//test.component.ts:

...

um:any

content:any

onLoad(um:any){
      //文本编辑器加载成功后，获取UM对象
      this.um=um;
      //获取文本内容
      this.um.getContent();
}

...