基于 wangEditor 封装的开箱即用的 angular 组件
npm i @wangeditor/editor
npm i wangeditor-for-angular或者：
yarn add @wangeditor/editor
yarn add wangeditor-for-angularangular.json
"styles": [
"src/styles.less",
"node_modules/@wangeditor/editor/dist/css/style.css"
],module.ts
import { EditorForAngularModule } from "wangeditor-for-angular";html:
<div [ngStyle]="{'border': '1px solid #ccc'}">
<div
[ngStyle]="{'border-bottom': '1px solid #ccc'}"
wang-toolbar
[mode]="mode"
[editor]="editorRef"
></div>
<div
[ngStyle]="{'height': '400px','overflow-y': 'hidden'}"
wang-editor
[(ngModel)]="valueHtml"
[mode]="mode"
[defaultConfig]="editorConfig"
[defaultHtml]="valueHtml"
(ngModelChange)="handleValueChange($event)"
(onCreated)="handleCreated($event)"
(onFocus)="handleFocus($event)"
(onBlur)="handleBlur($event)"
(onChange)="handleChange($event)"
(customPaste)="customPaste($event)"
(onDestroyed)="handleDestroyed($event)"
></div>
</div>或者
<div [ngStyle]="{'border': '1px solid #ccc'}">
<wang-toolbar
[ngStyle]="{'border-bottom': '1px solid #ccc'}"
[mode]="mode"
[editor]="editorRef"
>
</wang-toolbar>
<wang-editor
[ngStyle]="{'height': '400px','overflow-y': 'hidden'}"
[(ngModel)]="valueHtml"
[mode]="mode"
[defaultConfig]="editorConfig"
[defaultHtml]="valueHtml"
(ngModelChange)="handleValueChange($event)"
(onCreated)="handleCreated($event)"
(onFocus)="handleFocus($event)"
(onBlur)="handleBlur($event)"
(onChange)="handleChange($event)"
(customPaste)="customPaste($event)"
(onDestroyed)="handleDestroyed($event)"
>
</wang-editor>
</div>component.ts:
import { IDomEditor } from "@wangeditor/editor";
import { AlertType, Mode } from "wangeditor-for-angular";
export class AppComponent {
valueHtml = "<p>hello</p>";
mode: Mode = "default";
editorConfig = {
placeholder: "请输入内容...",
};
editorRef!: IDomEditor;
constructor() {
setTimeout(() => {
this.valueHtml = "<p>模拟 Ajax 异步设置内容</p>";
}, 2000);
}
handleCreated(editor: IDomEditor) {
console.log("created", editor);
this.editorRef = editor;
}
handleChange(editor: IDomEditor) {
console.log("change:", editor);
}
handleValueChange(value: string) {
console.log("value change:", value);
}
handleFocus(editor: IDomEditor) {
console.log("focus", editor);
}
handleBlur(editor: IDomEditor) {
console.log("blur", editor);
}
customAlert({ info, type }: { info: string; type: AlertType }) {
alert(`【customAlert】${type} - ${info}`);
}
handleDestroyed(editor: IDomEditor) {
console.log("destroyed", editor);
}
insertText() {
if (this.editorRef == null) return;
this.editorRef.insertText("hello world");
}
printHtml() {
if (this.editorRef == null) return;
console.log(this.editorRef.getHtml());
}
customPaste({ editor, event, callback }: any) {
// 自定义插入内容
editor.insertText("xxx");
callback(false); // 返回 false ，阻止默认粘贴行为
// callback(true) // 返回 true ，继续默认的粘贴行为
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent