angular8 表单集成ueditor富文本编辑器

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：493

安装依赖
```
npm install ueditor --save
```

- 下载UEditor源码
`UEditor`的官网已经迁移到了github上，可以直接clone下来，然后`npm run build`打包，打包之后dist文件夹就是源码目录

> 最近github好像被和谐了，打开比较慢，也可以从国内的站点下载压缩包，或者给我留言，那么收到留言后，我会把已下载的压缩包发邮件给你

- 将UEditor源码复制到资源目录assets下面，本项目的目录结构如下
![](https://www.qikecai.com/xindejob-file/picture/20210604/a629f8ca03d120b7ae4c9cf08885b8a1.png)

- 在项目模块中导入ueditor模块，并且配置
```
import { UEditorModule } from 'ngx-ueditor';
@NgModule({
	imports: [
		UEditorModule.forRoot({
			js: [
				`./assets/ueditor/ueditor.all.min.js`,
				`./assets/ueditor/ueditor.config.js`,
			], // 默认前端配置项
			options: {
				UEDITOR_HOME_URL: './assets/ueditor/'
			}
		})
	],
	...
```

- 开始使用
使用时注意ueditor类库加载已经渲染需要一段时间，所有需要有一定的延迟，否则报错UE未定义。 你将`ueditor.all.min.js`和`ueditor.config.js`放到头部文件中可能就不需要延迟了，这个我还没有去使用，因为angular都是懒加载，即便可以感觉也不是最佳方案。
.ts文件部分代码如下：
```
// 富文本框编辑器配置信息
const classicUEditorConfig = {
	wordCount: true, // 文字计数
	maximumWords: 10000, // 最多文字
	initialFrameHeight: 800, // 设置高度
	initialFrameWidth: '100%', // 设置宽度
	enableAutoSave: false,
	lang: "en", // 语言包
	/* 上传图片配置项 */
	imageActionName: 'uploadimage', // 执行上传图片的action名称
	imageFieldName: 'upfile', // 提交的图片表单名称
	imageMaxSize: 2048000, // 上传大小限制，单位B
	imageAllowFiles: [ '.png', '.jpg', '.jpeg', '.gif', '.bmp', ], // 上传图片格式显示
	enableDragUpload: true, // 启用拖放上传
	enablePasteUpload: true, // 启用粘贴上传
	imageCompressEnable: true, // 是否压缩图片,默认是true
	imageCompressBorder: 1600, // 图片压缩最长边限制
	imageInsertAlign: 'none', // 插入的图片浮动方式
	imageUrlPrefix: '', // 图片访问路径前缀,可配置您的文件访问地址
	imagePathFormat: '', // 上传保存路径,可以自定义保存路径和文件名格式，不使用本地保存，可不配置
	replace: '',
	zIndex: 2000,
	autoFloatEnabled: false, // 是否保持toolbar的位置不动
	serverUrl: '/api/access/my.ueditor/index', // 服务器统一请求接口路径
	toolbars: [
		[ 'bold', 'italic', 'underline', 'blockquote', 'removeformat', '|', 'fontfamily', 'fontsize', 'paragraph', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|', 'source', '|', 'undo', 'redo', '|', 'link', 'unlink', '|', 'indent', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'insertimage', 'insertcode', '|', 'inserttable' ],
	],
};
...
ngOnInit() {
	/* 延迟显示等待UE加载 */
	setTimeout(() => { this.loading = false; }, 3000); }
	...
	ready(data) {
		/* 设置请求参数 */
		if (this.model.editorConfig.token) {
			const ue = data.instance;
			ue.execCommand('serverparam', {
				token: this.model.editorConfig.token,
				'app-key': this.model.editorConfig['app-key'],
			});
		}
	}
```
.html模板信息
```
<ueditor *ngIf="! loading" #full [formControlName]="model_name" [config]="classicUEditorConfig" id="model_name" (onReady)="ready($event)"></ueditor>
```

### 鸣谢

- [CSDN博主**边城孤客**](https://blog.csdn.net/qq_41423570/article/details/102539159)
- [CSDN博主**chelen_jak**](https://blog.csdn.net/chelen_jak/article/details/104273432)

标签：富文本 ueditor angular

上一篇：如何使用mvn命令导入依赖下一篇：Windows php7.2安装redis扩展

angular8 表单集成ueditor富文本编辑器

随便看看

留言