CODEWITHSUNDEEP
jqueryangularfroalaangular5
Sangwin Gawande
Sangwin Gawande

Reputation: 8156

Property 'FroalaEditor' does not exist on type 'JQueryStatic' - Angular 4

I am using Angular 4 'FroalaEditor' which uses 'JQuery'.

I have implemented it successfully. Now I need to add custom buttons in that plugin.

I found following solution

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-froala-editor',
  templateUrl: './froala-editor.component.html',
  styleUrls: ['./froala-editor.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FroalaEditorComponent implements OnInit {
  options;
  constructor() { }

  ngOnInit(){
    $.FroalaEditor.DefineIcon('alert', {NAME: 'info'});
    $.FroalaEditor.RegisterCommand('alert', {
      title: 'Hello',
      focus: false,
      undo: false,
      refreshAfterCallback: false,
      callback: function () {
        alert('Hello!');
      }
    });

    this.options={
      toolbarButtons: ['bold', 'italic', 'underline', 'paragraphFormat','alert', '|', 'insertLink', 'insertImage', 'specialCharacters', 'color', '|', 'align', 'formatOL', 'formatUL', '|', 'undo', 'redo', 'clearFormatting', 'print'],
    }
  }

}

But I am having following error.

Property 'FroalaEditor' does not exist on type 'JQueryStatic'.

I found this solution, but I'm not sure how to implement it.

Have anyone faced this issue?

Upvotes: 4

Views: 3287

Answers (4)

Flummiboy
Flummiboy

Reputation: 592

For me none of the upper answers helped, but somewhere I got this:

(<any>$('div#froala')).froalaEditor('html.get');

which did finally work. So just wrap the $

(<any>$).FroalaEditor.DefineIcon('alert', {NAME: 'info'});

The code did work without it, but I'am on ionic 2 and the error came up everytime when I did ionic:serve but not on reload. I have no clue why, but now it is gone.

Upvotes: 0

skappler
skappler

Reputation: 763

The solution that worked for me was to add declare var $: any; instead of import * as $ from 'jquery'; right after the imports in the component using the Editor.

Upvotes: 4

Pizzy
Pizzy

Reputation: 60

I had the same issue with froala on Aurelia and I solved it by doing like this:

$['FroalaEditor'].DefineIcon('alert', {NAME: 'info'});

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58523

Add this in your code :

interface JQueryStatic {
    FroalaEditor: any;
}

Upvotes: 0

Related Questions