1. 安装依赖

npm install ueditor --save

2. 下载UEditor配置文件

官方地址：http://ueditor.baidu.com/website/download.html
百度云盘： 边城孤客 提取码：chpl
解压后目录为

将配置的文件复制到资源目录下

3. 在共享模块里导入配置信息

import { UEditorModule } from 'ngx-ueditor';
---
const THIRDMODULES = [NgZorroAntdModule, CountdownModule, NgxTinymceModule, UEditorModule];
@NgModule({imports: [CommonModule,FormsModule,RouterModule,ReactiveFormsModule,AlainThemeModule.forChild(),DelonABCModule,DelonChartModule,DelonACLModule,DelonFormModule,// third libs...THIRDMODULES,// 找到你复制的文件位置UEditorModule.forRoot({js: [`../../assets/ueditor/ueditor.all.min.js`,`../../assets/ueditor/ueditor.config.js`,],// 默认前端配置项options: {UEDITOR_HOME_URL: '../../assets/ueditor/'}})],

4.开始使用

1.创建配置文件 ueditor-config.ts

// 富文本框编辑器配置信息
export class UEditorConfig {wordCount = true; // 文字计数initialFrameHeight = 420; // 设置高度initialFrameWidth = '100%';// 设置宽度enableAutoSave = false;/* 上传图片配置项 */imageActionName = 'uploadimage' /* 执行上传图片的action名称 */;imageFieldName = 'upfile' /* 提交的图片表单名称 */;imageMaxSize = 2048000 /* 上传大小限制，单位B */;imageAllowFiles = ['.png','.jpg','.jpeg','.gif','.bmp',] /* 上传图片格式显示 */;imageCompressEnable = true /* 是否压缩图片,默认是true */;imageCompressBorder = 1600 /* 图片压缩最长边限制 */;imageInsertAlign = 'none' /* 插入的图片浮动方式 */;imageUrlPrefix = 'loacalhost:8080/sysAlone/viewImg?imagePath='; /* 图片访问路径前缀,可配置您的文件访问地址 */;imagePathFormat= '' /* 上传保存路径,可以自定义保存路径和文件名格式，不使用本地保存，可不配置 */;replace = '';serverUrl = 'loacalhost:8080/ueditorUploadImg'; // 服务器统一请求接口路径toolbars = [['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|','fontfamily', 'fontsize', 'customstyle', 'paragraph', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','fullscreen', 'source', '|', 'undo', 'redo', '|','indent', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|','link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertframe', 'insertcode', 'template', '|','horizontal', 'date', 'time', 'spechars', 'wordimage', '|','inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|','preview', 'searchreplace']];
};

2.在ts文件中声明配置信息变量

import { UEditorConfig } from './config/ueditor-config';
...省略...
export class NewBlogComponent implements OnInit {constructor() {}ueditorConf = new UEditorConfig();
}

3.在html中引入标签<ueditor></ueditor>，支持双向数据绑定

<ueditor [(ngModel)]="blogInfo.contentText" [config]="ueditorConf"></ueditor>

然后运行项目，你就可以看到，，，

图片上传配置说明

与图片上传配置相关的配置

//上传图片配置项
imageActionName = ‘uploadimage’ // 执行上传图片的action名称 ;
imageFieldName = ‘upfile’ // 提交的图片表单名称 ;
imageMaxSize = 2048000 // 上传大小限制，单位B ;
imageAllowFiles = [
‘.png’,
‘.jpg’,
‘.jpeg’,
‘.gif’,
‘.bmp’,
] // 上传图片格式显示 ;
imageCompressEnable = true // 是否压缩图片,默认是true ;
imageCompressBorder = 1600 // 图片压缩最长边限制 ;
imageInsertAlign = ‘none’ // 插入的图片浮动方式 ;
imageUrlPrefix = ‘loacalhost:8080/sysAlone/viewImg?imagePath=’; // 图片访问路径前缀,可配置您的文件访问地址 ;
imagePathFormat= ‘’ // 上传保存路径,可以自定义保存路径和文件名格式，不使用本地保存，可不配置 ;
replace = ‘’;
serverUrl = ‘loacalhost:8080/ueditorUploadImg’; // 服务器统一请求接口路径

以上配置中，我们需要关注三个重要部分
imageActionName = ‘uploadimage’ // 执行上传图片的action名称
serverUrl = ‘loacalhost:8080/ueditorUploadImg’; // 服务器统一请求接口路径
通过观察这两个配置，我们发现ueditor只有一个负责与后台进行交互的接口，后台是根据不同的Action进行分别处理

imageUrlPrefix = ‘loacalhost:8080/sysAlone/viewImg?imagePath=’; //图片访问路径前缀,可配置您的文件访问前缀
这个配置表明Ueditor可以通过接口访问到后台的图片信息
所以他的通讯大概是这样的

好了，开始搞我们的后台服务吧

首先，前端的控制台报这个错，请求后台配置项http错误，上传功能将不能正常使用

这是编辑器在初始化时，首先会向后端请求配置信息，进行通讯校验。其实也没啥用处；
但是为了防止报错，你需要设置一个接口；响应他的校验

NO.1 配置信息的获取

请求信息： GET {“action”: “config”}
返回信息：
// 需要支持callback参数,返回jsonp格式
{
“imageUrl”: “http://localhost/ueditor/php/controller.php?action=uploadimage”,
“imagePath”: “/ueditor/php/”,
“imageFieldName”: “upfile”,
“imageMaxSize”: 2048,
“imageAllowFiles”: [".png", “.jpg”, “.jpeg”, “.gif”, “.bmp”]
}

返回的是JSONP请求，一定要明确。。。。

另外，实现上传功能还需要一个图片上传接口

NO.2 图片上传接口

请求信息：{“action”: “uploadimage”} “upfile”: File Data
返回信息：(格式不能自定义，否则识别不了)
{
“state”: “SUCCESS”,
“url”: “upload/demo.jpg”,
“title”: “demo.jpg”,
“original”: “demo.jpg”
}

所以，两个接口合并之后，可以这样写。。。

/*** -------------------------------------* @Description: Ueditor图片上传功能  * @param action ueditor发出的action参数，以分发不同的请求* @return* @Date: 2019年10月11日 下午11:41:43 	* @version 1.0* @author canghai  * @Copyright:2019 canghai.blog* -------------------------------------*/@ResponseBody@RequestMapping(value = "/ueditorUploadImg")public Object uploadSimpleFile(String action, HttpServletRequest request) {// 返回对象，fastJSonJSONObject jsonObject = new JSONObject();// 根据配置的action响应不同的请求if ("config".equals(action)) {// 这些配置的参数只是起到一个校验的作用，也没有啥实际作用jsonObject.put("imageUrl", "http://localhost:8092/ueditorUploadImg?action=uploadimage");jsonObject.put("imagePath", "");jsonObject.put("imageFieldName", "upfile");jsonObject.put("imageMaxSize", 2048);jsonObject.put("imageAllowFiles", new String[] {".png", ".jpg", ".jpeg", ".gif", ".bmp"});// 注意！注意！注意！一定要返回JSONP的请求，JSONPObject jsonpObect = new JSONPObject();jsonpObect.addParameter(jsonpObect);return jsonpObect.toJSONString();}else if("uploadimage".equals(action)){// 上传文件，懒得写注释了，就是普通的文件上传MultipartHttpServletRequest multipartRequest = WebUtils.getNativeRequest(request, MultipartHttpServletRequest.class);Iterator<String> iterator = multipartRequest.getFileNames();MultipartFile multipartFile = multipartRequest.getFile(iterator.next());String originalFilename = multipartFile.getOriginalFilename();String suffixName = originalFilename.substring(originalFilename.lastIndexOf("."));String filePath = CAPropertites.UPLOAD_SIMPLE_FILEPATH + UUID.randomUUID() + suffixName; File upFile = new File(CAPropertites.UPLOAD_SIMPLE_FILEPATH);if (!upFile.isDirectory()) {upFile.mkdirs();}try {multipartFile.transferTo(new File(filePath));// 封装返回参数，注意一定要按照这个格式// 返回状态，成功SUCCESS/失败ERRORjsonObject.put("state", "SUCCESS");// 文件原始名字jsonObject.put("original", originalFilename);// 文件大小jsonObject.put("size",  multipartFile.getSize());// 文件类型jsonObject.put("type", suffixName);// 文件上传后的路径jsonObject.put("url", filePath);} catch (IllegalStateException | IOException e) {e.printStackTrace();}}return jsonObject;}

同样，你还需要编写一个获取图片信息的接口，用于配置在图片访问的前缀…
然后就ok了。