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

淩亂°似流年 2023-07-04 14:28 50阅读 0赞

原文出处：[https://blog.csdn.net/lurenxie/article/details/93170297][https_blog.csdn.net_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中创建标签来使用 ##

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

### 1、去umeditor官方网站下载umeditor包，地址 [https://ueditor.baidu.com/website/download.html\#mini][https_ueditor.baidu.com_website_download.html_mini] ###

我这里使用的是php版本的utf-8版mini版包  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

### 2、解压后将文件放于项目中npm生成的assets文件夹下 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1][]

### 3、在之前创建的标签中加入文件地址 ###

第一个是配置文件地址。第二个是目标文件根目录，指向根目录就好了。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 2][]

### 现在就可以显示出来了，至于详细的配置可以进官网进行参考配置修改。 ###

### 官网地址：[http://fex.baidu.com/ueditor/\#start-config][http_fex.baidu.com_ueditor_start-config] ###

# 注：ionic3也适用 #

[https_blog.csdn.net_lurenxie_article_details_93170297]: https://blog.csdn.net/lurenxie/article/details/93170297
[https_ueditor.baidu.com_website_download.html_mini]: https://ueditor.baidu.com/website/download.html#mini
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200212090055228.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200212090138457.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200212090202744.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70
[http_fex.baidu.com_ueditor_start-config]: http://fex.baidu.com/ueditor/#start-config