物业' FroalaEditor'在类型' JQueryStatic'上不存在 - Angular 4

时间:2017-11-10 12:41:43

标签: jquery angular froala angular5

我正在使用Angular 4' FroalaEditor'它使用' JQuery'。

我已经成功实施了它。 现在我需要在该插件中添加自定义按钮。

我发现了以下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'],
    }
  }

}

但我有以下错误。

  

Property' FroalaEditor'在类型' JQueryStatic'。

上不存在

我发现了这个solution,但我不确定如何实现它。

有人遇到过这个问题吗?

4 个答案:

答案 0 :(得分:1)

对我有用的解决方案是添加declare var $: any;而不是import * as $ from 'jquery'; 在使用编辑器的组件中导入之后。

答案 1 :(得分:0)

在您的代码中添加:

            public class DatabaseHelper extends SQLiteOpenHelper {

                    public DatabaseHelper(Context context) {
                        super(context, "loginDB.db", null, 1);
                        getWritableDatabase();
                    }

                    @Override
                    public void onCreate(SQLiteDatabase sqLiteDatabase) {
                        String query = "create table registration (id INTEGER,Image BLOB,firstname VARCHAR,Lastname VARCHAR,DateOfBirth VARCHAR,Phone VARCHAR,Gender VARCHAR, Email VARCHAR primary key,Password VARCHAR);";
                        sqLiteDatabase.execSQL(query);
                    }

                    @Override
                    public void onUpgrade(SQLiteDatabase sqLiteDatabase, int i, int i1) {

                    }
            //method for insert data
            public boolean insertRecord(byte[] imageInByte,String fn) {
                SQLiteDatabase db = this.getWritableDatabase();
                ContentValues contentValues = new ContentValues();
                contentValues.put("Image", imageInByte);
                contentValues.put("Firstname", fn);
                db.insert("signup", null, contentValues);
                return true;
            }

       public boolean updaterecord(String fn,String ln,String unme){
                SQLiteDatabase db = this.getWritableDatabase();
                ContentValues contentValues = new ContentValues();
                contentValues.put("Firstname", fn);
                contentValues.put("Lastname", ln);
                contentValues.put("Username", unme);
                return db.update(TABLE_NAME, contentValues, "Username = ?", new String[]{(unme)}) > 0;
            }

public boolean deleterecord(String FirstName) {

            SQLiteDatabase db = this.getWritableDatabase();
            return db.delete(TABLE_NAME, "Firstname = ?", new String[]{FirstName}) > 0;
        }

             public int displayDetail(String email, String password) {
                    SQLiteDatabase db = this.getWritableDatabase();
                    Cursor cursor = db.rawQuery("select * from registration where Email='" + email + "'AND Password='" + password + "'", null);

                    return cursor.getCount();
                }

                public ArrayList displayDetails(String email, String password) {
                    SQLiteDatabase db = this.getWritableDatabase();
                    Cursor cursor = db.rawQuery("select * from registration where Email='" + email + "'AND Password='" + password + "'", null);

                    ArrayList<ModelClass> arrayList = new ArrayList();
                    ModelClass model;
                    if (cursor != null) {
                        if (cursor.getCount() > 0) {
                            while (cursor.moveToNext()) {
                                model = new Model();
                                model.setFirstname(cursor.getString(cursor.getColumnIndex("Firstname")));
                                model.setLastname(cursor.getString(cursor.getColumnIndex("Lastname")));
                                arrayList.add(model);
                            }
                        }
                    }
                    return arrayList;
                }
                }

答案 2 :(得分:0)

我和Aurelia的froala有同样的问题,我通过这样做解决了这个问题:

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

答案 3 :(得分:0)

对我来说,最高答案都无济于事,但在某个地方我得到了:

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

这终于奏效了。因此,只需包装$

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

代码没有它也可以工作,但是我在ionic 2上,每次我执行ionic:serve时都会出现错误,但在重新加载时不出现。我不知道为什么,但是现在不见了。