ng2-umeditor

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();
}
 
...