参考
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');
}
使用 @ViewChild 访问组件
效果如图: