Commit 06d1bcfd authored by dmacfarlane's avatar dmacfarlane
Browse files

fire 'change' event for tinymce

parent 27b3724a

src/app/demo-tinymce/demo-tinymce.component.ts

+7 −9
Original line number Diff line number Diff line
@@ -22,7 +22,7 @@ declare var tinymce: any; 
    </div>`

})

export class DemoTinymceComponent {

  @Input() htmlContent;

  @Input() htmlContent:string;

  @ViewChild(MentionDirective) mention: MentionDirective;

  public items:string[] = COMMON_NAMES;

  constructor(private _elementRef: ElementRef, private _zone: NgZone) {}
@@ -43,17 +43,15 @@ export class DemoTinymceComponent { 
    );

  }

  tinySetup(ed) {

    let comp = this;

    let mention = this.mention;

    ed.on('keydown', function(e) {

    ed.on('init', (args) => {

      this.mention.setIframe(ed.iframeElement);

    });

    ed.on('keydown', (e) => {

      let frame = <any>window.frames[ed.iframeElement.id];

      let contentEditable = frame.contentDocument.getElementById('tinymce');

      comp._zone.run(() => {

        comp.mention.keyHandler(e, contentEditable);

      });

      this._zone.run(() => {

        this.mention.keyHandler(e, contentEditable);

      });

    ed.on('init', function(args) {

      mention.setIframe(ed.iframeElement);

    });

  }

}

src/mention/mention.directive.ts

+12 −3
Original line number Diff line number Diff line
@@ -151,6 +151,7 @@ export class MentionDirective implements OnChanges { 
    this.stopSearch();

  }



  // @param nativeElement is the alternative text element in an iframe scenario

  keyHandler(event: any, nativeElement: HTMLInputElement = this._element.nativeElement) {

    let val: string = getValue(nativeElement);

    let pos = getCaretPosition(nativeElement, this.iframe);
@@ -215,9 +216,17 @@ export class MentionDirective implements OnChanges { 
            insertValue(nativeElement, this.startPos, pos, text, this.iframe);

            // fire input event so angular bindings are updated

            if ("createEvent" in document) {

              var evt = document.createEvent("HTMLEvents");

              evt.initEvent("input", false, true);

              nativeElement.dispatchEvent(evt);

              let evt = document.createEvent("HTMLEvents");

              if (this.iframe) {

                // a 'change' event is required to trigger tinymce updates

                evt.initEvent("change", true, false);

              }

              else {

                evt.initEvent("input", true, false);

              }

              // this seems backwards, but fire the event from this elements nativeElement (not the 

              // one provided that may be in an iframe, as it won't be propogate)

              this._element.nativeElement.dispatchEvent(evt);

            }

            this.startPos = -1;

            this.stopSearch();