在 angular6/7 中使用 umeditor 富文本编辑器 (Ionic3适用，实用）

本文详细介绍如何在Angular7项目中集成Umeditor富文本编辑器，包括npm安装、模块导入、HTML标签创建及配置，解决显示问题所需步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文出处：https://blog.youkuaiyun.com/lurenxie/article/details/93170297

目前做angular7项目是用的zorro后台框架，很好用，除了没有富文本编辑器，于是到处找，最后选定了umeditor，比较轻量级，但是，找了一大圈后发现开不起来，最后百般折腾终于搞定，这记录下几个关键点。

首先按照npm的官方教程，地址是https://www.npmjs.com/package/ngx-umeditor

1、通过npm安装ngx-umeditor

npm install ngx-umeditor --save

2、把 UMeditorModule 模块导入到你项目中

import { UMeditorModule } from 'ngx-umeditor';
import { BrowserModule } from '@angular/platform-browser';
 
@NgModule({
  imports: [
    UMeditorModule.forRoot(),
    BrowserModule
  ]
})

3、在html中创建标签来使用

<umeditor 
         [(ngModel)]="full_source" 
         [config]="{...}"
         [path]="'./assets/umeditor/'"
         [loadingTip]="'加载中……'"
         (onReady)=""
         (onDestroy)=""
></umeditor>

注意：现在还是出不来效果的