ngx-ueditor 百度web前端研发部出品的 UEditor 风格 Angular 桌面端编辑器。

UEditor是由百度团队开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点。

特性

• 懒加载 ueditor.all.js 文件。
• 支持ueditor事件监听与移除
• 支持语言切换
• 支持ueditor实例对象直接访问。
• 支持二次开发。

安装

npm i ngx-ueditor -S

把UEditorModule模块导入到你的项目中

import { NgModule } from '@angular/core';
import { UEditorModule } from 'ngx-ueditor';

@NgModule({
  imports: [ 
    UEditorModule.forRoot({
      js: [
        `./assets/ueditor/ueditor.config.js`,
        `./assets/ueditor/ueditor.all.min.js`,
      ],
      // 默认前端配置项
      options: {
        UEDITOR_HOME_URL: './assets/ueditor/'
      }
    })
  ],
})
export class AppModule { }

使用

<ueditor [(ngModel)]="html" 
         [config]="{ wordCount: true }"
         [loadingTip]="'加载中……'"
         (onReady)="_ready($event)"
         (onDestroy)="_destroy()"
         (ngModelChange)="_change($event)"></ueditor>

完整实例

<ueditor [(ngModel)]="full_source" #full></ueditor>

表单非空校验

<ueditor [(ngModel)]="full_source" #full required></ueditor>

除了以上功能外，还支持 中英文切换、事件监听、自定义Toolbars、二次开发、模态框创建组件 等功能。

# 说明文档
https://cipchk.github.io/ngx-ueditor/

# github地址
https://github.com/cipchk/ngx-ueditor

ok，关于NgxUEditor的介绍就到这里。基于Angular开发pc端项目，这款编辑器可能适合你，感兴趣的小伙伴可以去试试哈。