angular中引用富文本编辑器Ueditor

Angular中使用ueditor富文本编辑器

npm install ngx-ueditor --save

把从官网下载下来的uediotor文件放在assets中

在app.module.ts(在其他module.ts中也放一下，以防万一，我没试过）

import { UEditorModule } from 'ngx-ueditor';

 imports: [
  UEditorModule.forRoot({
      js:[
        '../assets/ueditor/ueditor.all.js',
        '../assets/ueditor/ueditor.config.js',
      ],
      options:{
        UEDITOR_HOME_URL:'../assets/ueditor',
      }
    }),
 ]

在需要使用UEditor的组件中

HTML文件

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

TS文件

html = ``; //编辑器内容
  editorConfig={
    wordCount: true, // 文字计数
    initialFrameHeight: 300, // 设置高度
    initialFrameWidth: '100%', // 设置宽度
  }

   _ready($event){}
  _destroy(){}
  _change($event){}

去修改src\assets\ueditor\ueditor.config.js，添加一句：

window.UEDITOR_HOME_URL="/assets/ueditor/";
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

然后极大可能报错，都和ueditor.config.js有关：

类似于下面这种报错：
The load ../assets/ueditorthemes/default/css/ueditor.css fails,check the url settings of file ueditor.config.js 

解决方法：在ueditor.config.js中找到下面代码，取消部分注释

 //语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
        //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
        //,lang:"zh-cn"
        //,langPath:URL +"lang/"

        //主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
        //现有如下皮肤:default
        //,theme:'default'
        //,themePath:URL +"themes/"

修改后的文件如下：

//语言配置项,默认是zh-cn。有需要的话也可以使用如下这样的方式来自动多语言切换，当然，前提条件是lang文件夹下存在对应的语言文件：
        //lang值也可以通过自动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
        ,lang:"zh-cn"
        ,langPath:URL +"lang/"

        //主题配置项,默认是default。有需要的话也可以使用如下这样的方式来自动多主题切换，当然，前提条件是themes文件夹下存在对应的主题文件：
        //现有如下皮肤:default
        ,theme:'default'
        ,themePath:URL +"themes/"

到此为止，ueditor出来了，部分功能无法实现，哈哈哈哈！！！！

 toolbars:控制编辑器中的内容

// 'undo', 'redo', '|',
 // 'bold', 'forecolor', 'removeformat', 'autotypeset', 'pasteplain', '|', '|',
// 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
// 'link', 'unlink', '|',
// 'simpleupload', 'insertimage', '|',
// 'wordimage', '|',
// 'inserttable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'splittocells'