700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 在 angular6/7 中使用 umeditor 富文本编辑器

在 angular6/7 中使用 umeditor 富文本编辑器

时间:2022-06-03 08:51:41

相关推荐

在 angular6/7 中使用 umeditor 富文本编辑器

目前做angular7项目是用的zorro后台框架,很好用,除了没有富文本编辑器,于是到处找,最后选定了umeditor,比较轻量级,但是,找了一大圈后发现开不起来,最后百般折腾终于搞定,这记录下几个关键点。

首先按照npm的官方教程,地址是/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中创建标签来使用

<umeditor [(ngModel)]="full_source" [config]="{...}"[path]="'./assets/umeditor/'"[loadingTip]="'加载中……'"(onReady)=""(onDestroy)=""></umeditor>

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

1、去umeditor官方网站下载umeditor包,地址/website/download.html#mini

我这里使用的是php版本的utf-8版mini版包

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

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

第一个是配置文件地址。第二个是目标文件根目录,指向根目录就好了。

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

官网地址:/ueditor/#start-config

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。