ngx-ueditor
Angular2.x for Baidu UEditor(UMeditor)
Demo
Live Demo
特性
- 懒加载 ueditor.all.js 文件。
- 支持ueditor事件监听与移除
- 支持语言切换
- 支持ueditor实例对象直接访问。
- 支持二次开发。
使用
1、安装
npm install ngx-ueditor --save
把 UEditorModule
模块导入到你项目中。
import { UEditorModule } from 'ngx-ueditor';
@NgModule({
imports: [
BrowserModule,
UEditorModule.forRoot({
path: 'assets/ueditor/',
options: {
themePath: '/assets/ueditor/themes/'
}
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
2、使用
<ueditor [(ngModel)]="full_source"
[config]="{...}"
[loadingTip]="'加载中……'"
(onReady)=""
(onDestroy)=""
(onContentChange)=""></ueditor>
名称 |
类型 |
默认值 |
描述 |
config |
Object |
|
前端配置项说明,见官网 |
loadingTip |
string |
加载中... |
初始化提示文本。 |
onPreReady |
Function |
|
编辑器准备就绪之前会触发该事件,并会传递 UEditorComponent 当前实例对象,可用于后续操作(比如:二次开发前的准备)。 |
onReady |
Function |
|
编辑器准备就绪后会触发该事件,并会传递 UEditorComponent 当前实例对象,可用于后续操作。 |
onDestroy |
Function |
|
编辑器组件销毁后会触发该事件 |
onContentChange |
Function |
|
编辑器内容发生改变时会触发该事件 |
3、关于懒加载
懒加载在未到 wdinow.UE
时会启动,如果你在 index.html
已经使用 <script src="ueditor.all.js"></script>
加载过,懒加载流程将会失效。
加载语言注意点
懒加载会自动识别并引用,否则,需要自行在 <head>
加入语言版本脚本。
访问ueditor实例对象
首先,需要给组件定义一下模板变量:
<ueditor [(ngModel)]="full_source" #full></ueditor>
使用 @ViewChild
访问组件,并使用 this.full.Instance
访问ueditor实例对象。
export class DemoComponent {
@ViewChild('full') full: UEditorComponent;
constructor(private el: ElementRef) {}
getAllHtml() {
alert(this.full.Instance.getAllHtml())
}
}
事件
虽说上节也可以直接注册ueditor事件,但当组件被销毁时可能会引发内存泄露。所以不建议直接在ueditor实例中这么做。组件本身提供 addListener
和 removeListener
来帮你处理。
this.full.addListener('focus', () => {
this.focus = `fire focus in ${new Date().getTime()}`;
});
this.full.removeListener('focus');
二次开发
onPreReady
onPreReady
是指在UEditor创建前会触发;因此,可以利用这个事件做一些针对二次开发的准备工作。比如,针对本实例创建自定义一个按钮:
<ueditor [(ngModel)]="custom_source" (onPreReady)="onPreReady($event)" [config]="custom"></ueditor>
onPreReady(comp: UEditorComponent) {
UE.registerUI('button', function(editor, uiName) {
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
var btn = new UE.ui.Button({
name: uiName,
title: uiName,
cssRules: 'background-position: -500px 0;',
onclick: function() {
editor.execCommand(uiName);
}
});
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
return btn;
}, 5, comp.id);
}
Hook
hook调用会在UE加载完成后,UEditor初始化前调用,而且这个整个APP中只会调用一次,通过这个勾子可以做全局性的二次开发。
UEditorModule.forRoot({
path: 'assets/ueditor/',
options: {
themePath: '/assets/ueditor/themes/'
},
hook: (UE: any): void => {
UE.registerUI('button', function(editor, uiName) {
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
var btn = new UE.ui.Button({
name: uiName,
title: uiName,
cssRules: 'background-position: -500px 0;',
onclick: function() {
editor.execCommand(uiName);
}
});
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
return btn;
});
}
})
表单非空校验
组件加入 required
当编辑器为空时会处于 ng-invalid
状态,具体体验见Live Demo。
组件接口
interface UEditorComponent {
get Instance(): any;
setLanguage(lang: 'zh-cn' | 'en') {}
addListener(eventName: 'destroy' | 'reset' | 'focus' | 'langReady' | 'beforeExecCommand' | 'afterExecCommand' | 'firstBeforeExecCommand' | 'beforeGetContent' | 'afterGetContent' | 'getAllHtml' | 'beforeSetContent' | 'afterSetContent' | 'selectionchange' | 'beforeSelectionChange' | 'afterSelectionChange',
fn: Function): void {}
removeListener(eventName: 'destroy' | 'reset' | 'focus' | 'langReady' | 'beforeExecCommand' | 'afterExecCommand' | 'firstBeforeExecCommand' | 'beforeGetContent' | 'afterGetContent' | 'getAllHtml' | 'beforeSetContent' | 'afterSetContent' | 'selectionchange' | 'beforeSelectionChange' | 'afterSelectionChange'): void {}
}
Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
License
The MIT License (see the LICENSE file for the full text)