releases: 2.1.0

- 增加 delay 延迟渲染，close #1 - 优化 cdn 加载
cipchk · Aug 28, 2018 · 70e756a · 70e756a
1 parent 28c6ad7
commit 70e756a
Show file tree

Hide file tree

Showing 45 changed files with 739 additions and 2,045 deletions.
diff --git a/README.md b/README.md
@@ -23,13 +23,13 @@ Import the `ngx-tinymce` in to your root `AppModule`.
 import { NgxTinymceModule } from 'ngx-tinymce';
 
 @NgModule({
-    imports: [
-        NgxTinymceModule.forRoot({
-            baseURL: './assets/tinymce/',
-            // or cdn
-            baseURL: '//cdn.bootcss.com/tinymce/4.7.4/'
-        })
-    ]
+  imports: [
+    NgxTinymceModule.forRoot({
+      baseURL: './assets/tinymce/',
+      // or cdn
+      baseURL: '//cdn.bootcss.com/tinymce/4.7.13/'
+    })
+  ]
 })
 export class AppModule { }
 ```
@@ -44,7 +44,7 @@ import { Component } from '@angular/core';
   template: `<tinymce [(ngModel)]="html"></tinymce>`
 })
 export class AppComponent  {
-    html = ``;
+  html = ``;
 }
 ```
 
@@ -59,6 +59,7 @@ export class AppComponent  {
 | ------- | ------------- | ----- | ----- |
 | config | `any` |  | see [configure](https://www.tinymce.com/docs/configure/integration-and-setup/) |
 | loading | `string,TemplateRef` | - | Loading status of tinymce |
+| delay | `number` | 0 | Delayed rendering, unit is 'millisecond' |
 
 ## Troubleshooting
 

diff --git a/lib/src/tinymce.component.ts b/lib/src/tinymce.component.ts
@@ -9,10 +9,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   TemplateRef,
-  Output,
-  EventEmitter,
   SimpleChanges,
-  Optional,
   NgZone,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
@@ -31,7 +28,13 @@ declare const tinymce: any;
   </div>
   `,
   preserveWhitespaces: false,
-  styles: [`:host .tinymce-selector{display:none}`],
+  styles: [
+    `
+      :host .tinymce-selector {
+        display: none;
+      }
+    `,
+  ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -47,12 +50,15 @@ export class TinymceComponent
   private value: string;
   private inited = false;
   load = true;
-  id = `_tinymce-${Math.random().toString(36).substring(2)}`;
+  id = `_tinymce-${Math.random()
+    .toString(36)
+    .substring(2)}`;
 
   private onChange: (value: string) => void;
   private onTouched: () => void;
 
-  @Input() config: any;
+  @Input()
+  config: any;
   @Input()
   set disabled(value: boolean) {
     this._disabled = value;
@@ -68,28 +74,45 @@ export class TinymceComponent
     else this._loading = value;
   }
 
+  /** 延迟初始化 */
+  @Input()
+  delay = 0;
+
   constructor(
     private defConfig: TinymceOptions,
     private ss: ScriptService,
     private cd: ChangeDetectorRef,
-    private zone: NgZone
+    private zone: NgZone,
   ) {}
 
+  private initDelay() {
+    if (this.delay > 0) {
+      setTimeout(() => this.init(), this.delay);
+    } else {
+      this.init();
+    }
+  }
+
   private init() {
     if (!window.tinymce) throw new Error('tinymce js文件加载失败');
 
+    const { defConfig, config, id } = this;
     if (this.instance) return;
 
-    if (this.defConfig.baseURL) tinymce.baseURL = this.defConfig.baseURL;
+    if (defConfig.baseURL) {
+      let url = '' + defConfig.baseURL;
+      if (url.endsWith('/')) url = url.substr(0, url.length - 1);
+      tinymce.baseURL = url;
+    }
 
-    const userOptions = Object.assign({}, this.defConfig.config, this.config);
+    const userOptions = Object.assign({}, defConfig.config, config);
 
     const options = Object.assign(
       {
-        selector: `#` + this.id,
+        selector: `#` + id,
       },
-      this.defConfig.config,
-      this.config,
+      defConfig.config,
+      config,
       {
         setup: (editor: any) => {
           this.instance = editor;
@@ -109,7 +132,10 @@ export class TinymceComponent
         },
       },
     );
-    if (userOptions.auto_focus) options.auto_focus = this.id;
+    if (userOptions.auto_focus) {
+      options.auto_focus = id;
+    }
+
     tinymce.init(options);
 
     this.load = false;
@@ -141,24 +167,23 @@ export class TinymceComponent
   ngAfterViewInit(): void {
     // 已经存在对象无须进入懒加载模式
     if (window.tinymce) {
-      this.init();
+      this.initDelay();
       return;
     }
 
-    const baseURL = this.defConfig && this.defConfig.baseURL;
-    const fileName = this.defConfig && this.defConfig.fileName;
+    const { defConfig } = this;
+    const baseURL = defConfig && defConfig.baseURL;
+    const fileName = defConfig && defConfig.fileName;
     this.ss
       .load((baseURL || './assets/tinymce/') + (fileName || 'tinymce.min.js'))
       .getChangeEmitter()
-      .subscribe(res => {
-        this.init();
-      });
+      .subscribe(() => this.initDelay());
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (this.inited && changes.config) {
       this.destroy();
-      this.init();
+      this.initDelay();
     }
   }
 
@@ -169,7 +194,7 @@ export class TinymceComponent
   // reuse-tab: http://ng-alain.com/components/reuse-tab#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F
   _onReuseInit() {
     this.destroy();
-    this.init();
+    this.initDelay();
   }
 
   writeValue(value: string): void {

diff --git a/lib/src/tinymce.options.ts b/lib/src/tinymce.options.ts
@@ -5,6 +5,6 @@ export class TinymceOptions {
   fileName ? = 'tinymce.min.js';
   /** 默认配置项，对全局 Tinymce 有效 */
   config?: any;
-
-  [key: string]: any;
+  /** 延迟加载（单位：毫秒），默认：`0` */
+  delay?: number;
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-tinymce",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "main": "./bundles/tinymce.umd.js",
   "module": "./esm5/tinymce.js",
   "es2015": "./esm2015/tinymce.js",
@@ -22,17 +22,12 @@
     "release:next": "bash ./build.sh && cd publish && npm publish --access public --tag next",
     "release": "bash ./build.sh && cd publish && npm publish --access public"
   },
-  "peerDependencies": {
+  "devDependencies": {
     "@angular/core": "^6.0.0",
     "@angular/common": "^6.0.0",
-    "@angular/forms": "^6.0.0"
-  },
-  "devDependencies": {
+    "@angular/forms": "^6.0.0",
     "@angular/animations": "^6.0.0",
-    "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
-    "@angular/core": "^6.0.0",
-    "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
@@ -41,8 +36,8 @@
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26",
     "ngx-highlight-js": "^2.0.3",
-    "@angular-devkit/build-angular": "~0.6.0",
-    "@angular/cli": "~6.0.0",
+    "@angular-devkit/build-angular": "^0.6.0",
+    "@angular/cli": "^6.0.0",
     "@angular/compiler-cli": "^6.0.0",
     "@angular/language-service": "^6.0.0",
     "@types/jasmine": "~2.8.6",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -26,7 +26,9 @@ import { OtherComponent } from './other/other.component';
       ],
       { useHash: true },
     ),
-    NgxTinymceModule.forRoot({}),
+    NgxTinymceModule.forRoot({
+      baseURL: '//cdn.bootcss.com/tinymce/4.7.13/',
+    }),
   ],
   providers: [],
   bootstrap: [AppComponent],