ngx-tinymce

简介

基于angular(v2+)的tinymce组件

使用

• 安装依赖包：tinymce 和 @twp0217/ngx-tinymce

1npm install tinymce @twp0217/ngx-tinymce --save

• 在angular-cli.json中增加tinymce配置

1"scripts": [
2  "node_modules/tinymce/tinymce.js",
3  "node_modules/tinymce/themes/modern/theme.js"
4]

• 在module导入NgxTinymceModule

1import { NgxTinymceModule } from "@twp0217/ngx-tinymce";
2
3@NgModule({
4  declarations: [
5    AppComponent
6  ],
7  imports: [
8    BrowserModule,
9    FormsModule,
10    
11    NgxTinymceModule
12  ],
13  providers: [],
14  bootstrap: [AppComponent]
15})
16export class AppModule { }

• 在模板页面使用

1<ngx-tinymce [(ngModel)]="html"></ngx-tinymce>

system.js 配置

在 map 中添加以下配置

1map: {
2  'ngx-tinymce': 'npm:ngx-tinymce/bundles/ngx-tinymce.umd.min.js'
3}

文档

属性(Attributes)

名称	类型	默认值	说明
options	TinymceOptions	{ skin_url = "assets/tinymce/skins/lightgray"; }	配置项

事件(Events)

Native

1onClick
2onDblClick
3onMouseDown
4onMouseUp
5onMouseMove
6onMouseOver
7onMouseOut
8onMouseEnter
9onMouseLeave
10onKeyDown
11onKeyPress
12onKeyUp
13onContextMenu
14onPaste

Core

1onInit
2onFocus
3onBlur
4onBeforeSetContent
5onSetContent
6onGetContent
7onPreProcess
8onPostProcess
9onNodeChange
10onUndo
11onRedo
12onChange
13onDirty
14onRemove
15onExecCommand

Paste Plugin

1onPastePreProcess
2onPastePostProcess

支持

• 如果项目对你有帮助，请点颗星:star:，谢谢。
• 如果你对项目有想法、问题、BUG，欢迎讨论。