angular6 使用 UMeditor

最新推荐文章于 2024-05-22 09:47:41 发布

Zero L

最新推荐文章于 2024-05-22 09:47:41 发布

阅读量1.4k

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/sinat_38930182/article/details/90232650

版权

angular 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

参考

angular6 使用 ngx-umeditor
https://github.com/cipchk/ngx-umeditor

具体步骤

1、安装

npm install ngx-umeditor --save

把 UMeditorModule 模块导入到项目中。

import { UMeditorModule } from 'ngx-umeditor';

@NgModule({
	declarations: [AppComponent],
    imports: [
	    BrowserModule,
	    /** 导入 ngx-umeditor 模块 **/
	    UMeditorModule.forRoot(),
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2、使用

<nz-tab nzTitle="产品介绍">
	<umeditor [config]="{initialFrameHeight:250}" 
			  [path]="'../../../assets/umeditor/'" 
			  [loadingTip]="'加载中……'"
	          [(ngModel)]="addObj.introduction" 
	          name="full_source" 
	          #full></umeditor>
</nz-tab>

名称	类型	默认值	描述
config	Object		前端配置项说明，见 http://fex.baidu.com/ueditor/
path	string	./assets/umeditor/	umeditor代码根目录路径，以 / 结尾。
loadingTip	string	加载中…	初始化提示文本。
onReady	Function		编辑器准备就绪后会触发该事件
onDestroy	Function		编辑器组件销毁后会触发该事件

3、关于懒加载

懒加载在未到 wdinow.UM 时会启动，如果你在 index.html 已经使用加载过，懒加载流程将会失效。

加载语言注意点：
懒加载会自动识别并引用，否则，需要自行在 < head> 加入语言版本脚本。

访问umeditor实例对象

  full_source = '';
  @ViewChild('full') full: UMeditorComponent;
  focus: boolean | string;

  addListenerFocus() {
    // 事件监听
    this.full.addListener('focus', () => {
      this.focus = `fire focus in ${new Date().getTime()}`;
    });
  }
  removeListenerFocus() {
    // 事件移除
    this.full.removeListener('focus');
  }