froala / angular-froala-wysiwyg Goto Github PK

When I am trying to implement the froala-wysiwyg in angular2 cli project . I am getting the console error.Kindly help me to resolve the issue to implement the editor.
Thanks.

I keep getting the following error when trying to test a page containing the Froala wysiwyg editor:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

I have increased the default timeout to 35000 but this has made no difference. If I remove the editor reference from my HTML my tests will work as normal (after I remove parts of tests that interact with the editor).

I have also noticed that the actions specified in the test are carried out in bursts, i.e, it will carry out some of the steps, wait several seconds, then carry out some more etc.

Is the Froala editor compatible with Protractor testing?

Where do I configure custom buttons and dropdowns? I have tried define them in the component but they need to be created before load. I noticed in another issue you said that they need to be loaded before the froala files, but how would I use my components' functions if that is the case?

I'd like to systematically apply a config to my froala editor. Imagine that you have a lot of inputs with forala editor and you don't want to apply the same configuration to each input separately.

In angular, you can create a directive and simply apply the configuration there. However, when I create a directive called froalaConfig as follow:

textarea(froalaEditor='', froalaConfig='', [formControlName]='lang.key')

And in the froalaConfig directive:

ngAfterViewInit(): void{
        this.element.nativeElement.froalaEditor({
            charCounterCount: false
        });
}

Unfortunately, this.element.nativeElement returns .froalaEditor is not a function.

How can I systematically apply a config to the editor?

Are there any reasons why the bundles-folder is missing from npm since 2.5.0?

If so, how do we have to use v2.5.0 and up with systemjs?

We were experiencing really weird behavior when initilizing dynamic html in the editor. Some DOM elements still had the .fr-dragging class for some reason so the drop behavior was really weird and wasn't responding properly.

Needed to remove all .fr-dragging classes in the html when initializing any html in the editor resolved the problem. Maybe it should be done in the froalaEditor.initialized default event ?

The editor is losing his focus after each update of the froalaModel. The insert pipe/cursor is disappearing and you have to click inside the editor to continue editing.

Version: angular2-froala-wysiwyg - 2.4.2-2

I'm using the contentChanged event to update the froalaModel.

I'm using SystemJS, when run the application I got error:

(SystemJS) Unexpected token <↵ SyntaxError: Unexpected token <↵ at eval ()↵ at Object.eval (http://localhost:3000/src/tmp/app/app.module.js:10:33)↵ at eval (http://localhost:3000/src/tmp/app/app.module.js:44:4)↵ at eval (http://localhost:3000/src/tmp/app/app.module.js:45:3)↵ at eval ()↵ Evaluating http://localhost:3000/jquery↵ Evaluating http://localhost:3000/src/tmp/app/app.module.js↵ Evaluating http://localhost:3000/src/tmp/app/main.js↵ Error loading http://localhost:3000/src/tmp/app/main.js"

I'm using Angular 2.4.3

How to integrate at.js(atwho) library with angular 2.

Hi, I'm trying to use this package in Ionic 2

Do you have any idea or tips about how to do it ?

Thanks in advance

I have done 'bower install' and 'npm install' successfully. But when I run 'npm start' I am getting this error: error TS2304: Cannot find name 'JQueryStatic'. It's in the file: froala.directives.ts.
Am I missing a step somwehere?

Upgraded to the latest version of froala editor (2.5.0). Giving me the following error i.c.m. the Angular-cli

node_modules/angular2-froala-wysiwyg/editor/editor.directive.ts (3,16): Cannot find name 'JQueryStatic'.)

I'd really appreciate if this repository would add support for both compile strategies

• just in time (jit)
• ahead of time (aot).

Later AOT is especially interesting since it reduces bundle size quiet a lot and is faster in execution. AOT requires a manifest.

I am seeing the following error when running the froala editor within a SharePoint (SPFx) context:

core.umd.js:3064 EXCEPTION: Cannot read property 'pageX' of undefined
ErrorHandler.handleError @ core.umd.js:3064
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:250
SafeSubscriber.next @ Subscriber.ts:202
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:334
Zone.runTask @ zone.js:169
ZoneTask.invoke @ zone.js:416
data.args.(anonymous function) @ zone.js:1527
arguments.(anonymous function) @ init.js:1

core.umd.js:3069 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ core.umd.js:3069
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:250
SafeSubscriber.next @ Subscriber.ts:202
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:334
Zone.runTask @ zone.js:169
ZoneTask.invoke @ zone.js:416
data.args.(anonymous function) @ zone.js:1527
arguments.(anonymous function) @ init.js:1

core.umd.js:3070 TypeError: Cannot read property 'pageX' of undefined
at i (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:149:3933), :17:5549)
at ZoneDelegate.invokeTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :363:31)
at Object.onInvokeTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:18:48), :3971:41)
at ZoneDelegate.invokeTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :362:36)
at Zone.runTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :166:47)
at ZoneTask.invoke (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :416:38)
at data.args.(anonymous function) (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :1527:25)
at arguments.(anonymous function) (https://static.sharepointonline.com/bld/_layouts/15/16.0.6309.1206/init.js:1:95300)
ErrorHandler.handleError @ core.umd.js:3070
next @ core.umd.js:8041
schedulerFn @ core.umd.js:3689
SafeSubscriber.__tryOrUnsub @ Subscriber.ts:250
SafeSubscriber.next @ Subscriber.ts:202
Subscriber._next @ Subscriber.ts:135
Subscriber.next @ Subscriber.ts:95
Subject.next @ Subject.ts:61
EventEmitter.emit @ core.umd.js:3675
NgZone.triggerError @ core.umd.js:4040
onHandleError @ core.umd.js:4001
ZoneDelegate.handleError @ zone.js:334
Zone.runTask @ zone.js:169
ZoneTask.invoke @ zone.js:416
data.args.(anonymous function) @ zone.js:1527
arguments.(anonymous function) @ init.js:1

Subscriber.ts:253 Uncaught TypeError: Cannot read property 'pageX' of undefined
at i (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:149:3933), :17:5549)
at ZoneDelegate.invokeTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :363:31)
at Object.onInvokeTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:18:48), :3971:41)
at ZoneDelegate.invokeTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :362:36)
at Zone.runTask (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :166:47)
at ZoneTask.invoke (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :416:38)
at data.args.(anonymous function) (eval at (https://????.sharepoint.com/sites/Development/SiteAssets/????/requirements-form.bundle_849135b793670aa75ed843f6802f94d7.js:2:14506), :1527:25)
at arguments.(anonymous function) (https://static.sharepointonline.com/bld/_layouts/15/16.0.6309.1206/init.js:1:95300)
> i @ froala_editor.pkgd.min.js:17
ZoneDelegate.invokeTask @ zone.js:363
onInvokeTask @ core.umd.js:3971
ZoneDelegate.invokeTask @ zone.js:362
Zone.runTask @ zone.js:166
ZoneTask.invoke @ zone.js:416
data.args.(anonymous function) @ zone.js:1527
arguments.(anonymous function) @ init.js:1

Could you please provide instructions on how to license for this type of project (we have purchased a version).

release 2.4.1 is not installable through npm in reason of the original package having an typo which was changed with the latest version. Consider releasing an version 2.3.4 with a deprecated warning?

angular2-froala-wyswiyg now is angular2-froala-wysiwyg

npm ERR! notarget No compatible version found: angular2-froala-wyswiyg@^2.4.1
npm ERR! notarget Valid install targets:
npm ERR! notarget 2.3.4-rc.1

Hi,

I'm trying to use your wysiwyg, I used your tutorial for angular-cli but I'getting this error :
$ is not defined

When I type in the browser's console $('xx') it works while I have :
declare var $:any;
else $ is undefined

angular-cli.json :

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "admin"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
	"assets/fonts/roboto.css",
	"../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css",
	  "../node_modules/font-awesome/css/font-awesome.css",
	  "../node_modules/froala-editor/css/froala_editor.pkgd.min.css"
      ],
      "scripts": [
	"../node_modules/jquery/dist/jquery.min.js",
  	"../node_modules/froala-editor/js/froala_editor.pkgd.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [
	"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

In template :
<div [froalaEditor]>Hello, Froala!</div>

And in the bootstreap module I made the import with forRoot()

I used @angular/cli 1.0.0-rc.2 and rc.4

Have you some ideas?

Thanks

I closed it whithout solution, sorry but I used another WYSIWYG

Expected behavior.

Characters should be counted correctly on suggestive text of Andriod/IOS keyboards

Actual behavior.

Character count is not counted with the suggestive text until a key is pressed from the keyboard(Andriod/IOS mobile devices), along with accepting the input even the maximum characters exceeded.

Steps to reproduce the problem.

1.Launch the app
2.Go to the Froal Editor page
3.Use the suggestive text on top of the keyboard(Andriod/IOS) to type.

Note : This issue is already fixed as an enhancement for wysiwyg-editior, and hence haven't released , can I have the same some Angular2, with a release .

The buttons in the Froala editor are too wide when loaded into a SharePoint context (as all buttons have a min-width of 6em set by SP styles). Therefore, would suggest adding the following:

.fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn {
  min-width: initial;
}

Could anyone help me how to integrate the plugin using AngularJS2. I tried, defining the plugin when the view is entered and declared the dropdown in froalaEditor options.

Something looks like this 👍

public options: any = { 
    placeholderText: 'You can enter only 2048 characters !!',
    charCounterCount: true,
    charCounterMax: 2048,
    imagePaste:false,
    imagePasteProcess: false,
    toolbarButtons: ['bold', 'italic', 'formatBlock', 'my_dropdown']
}

ionViewDidEnter(){
  
    $.FroalaEditor.DefineIcon('my_dropdown', {NAME: 'cog'});
    $.FroalaEditor.RegisterCommand('my_dropdown', {
      title: 'Advanced options',
      type: 'dropdown',
      focus: false,
      undo: false,
      refreshAfterCallback: true,
      options: {
        'v1': 'Option 1',
        'v2': 'Option 2'
      },
      callback: function (cmd, val) {
        console.log (val);
      },
      // Callback on refresh.
      refresh: function ($btn) {
        console.log ('do refresh');
      },
      // Callback on dropdown show.
      refreshOnShow: function ($btn, $dropdown) {
        console.log ('do refresh when show');
      }
    });
    

}

It doesnt help me out. Please suggest if any ways.

Hi,

I got this error in by project:

ERROR in [default] lib/froala.directives.ts:193:17
Function declarations are not allowed inside blocks in strict mode when targeting 'ES3' or 'ES5'. Class definitions are automatically in strict mode

Can anyone help me?

The documentation mentions only the use of model based form ([(froalaModel)]="editorContent"), what about formControlName?

Hi,
I try to use this directives with angular universal starter but it didn't work. Here is the repo:
[(https://github.com/angular/universal-starter)]

and my error is

$ is not defined

Is it a bug or did I use it in wrong way?

in the mobile version of froala-editor, i found there are some issue while i am printing words in editor text-area with the toolbar. the toolbar cut half of words while i am printing, if my explanation is unclear, i have attached the issue image

jQuery is bad enough as a standalone library and it's hugely frowned upon to use along with angular, you should really consider dropping it and go with vanilla JS. This would lead to a higher usage of the editor because people like me won't be put off by the jQuery dependency.

I have use your code,

took example how it should be use here
https://www.froala.com/wysiwyg-editor/docs/sdks/nodejs/image-server-upload#complete-example

But when i'm trying to use the editro and load the image there i receive next error

TypeError: Cannot read property 'on' of undefined
at new Multipart (/var/www/html/flexi/flexi-universal/node_modules/busboy/lib/types/multipart.js:106:5)
at Multipart (/var/www/html/flexi/flexi-universal/node_modules/busboy/lib/types/multipart.js:26:12)
at Busboy.parseHeaders (/var/www/html/flexi/flexi-universal/node_modules/busboy/lib/main.js:71:22)
at new Busboy (/var/www/html/flexi/flexi-universal/node_modules/busboy/lib/main.js:22:10)
at Object.upload (/var/www/html/flexi/flexi-universal/node_modules/wysiwyg-editor-node-sdk/lib/utils/disk.management.js:49:18)
at Object.upload (/var/www/html/flexi/flexi-universal/node_modules/wysiwyg-editor-node-sdk/lib/image.js:44:18)
at /var/www/html/flexi/flexi-universal/dist/server/index.js:45926:28
at Layer.handle [as handle_request] (/var/www/html/flexi/flexi-universal/node_modules/express/lib/router/layer.js:95:5)
at next (/var/www/html/flexi/flexi-universal/node_modules/express/lib/router/route.js:131:13)
at Form. (/var/www/html/flexi/flexi-universal/node_modules/connect-multiparty/index.js:103:9)
undefined

My code where i'm trying to use it (node_modules/wysiwyg-editor-node-sdk/lib/utils/disk.management.js)

try {
    var busboy = new Busboy({ headers: req.headers });
  } catch(e) {
    return callback(e);
  }

  function sendResponse() {
    callback(null, {link: link});
  }

  // Handle file arrival.
  busboy.on('file', function(fieldname, file, filename, encoding, mimetype) {
...

I want to create a custom image button, but I use this:

$.FroalaEditor.DefineIcon('imageInfo', {NAME: 'info'});

get an error:

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

Thanks for your help.

I want to use this binding with this repo, but it does not work.
Could you please help me

This seems to be because of this code, which only permits one-time setup:

   // froalaModel directive as input: store initial editor content                                                                                                                                                                                                                                                                                                                                                                     
    @Input() set froalaModel(content: string) {                                                                                                                                                                                                                                                                                                                                                                                         

      if (!this._gotContent) {                                                                                                                                                                                                                                                                                                                                                                                                          
        this._initContent = content;                                                                                                                                                                                                                                                                                                                                                                                                    
        this._gotContent = true;                                                                                                                                                                                                                                                                                                                                                                                                        
      }                                                                                                                                                                                                                                                                                                                                                                                                                            
    }      

I changed it to this, which seems to work:

   // froalaModel directive as input: store initial editor content                                                                                                                                                                                                                                                                                                                                                                     
    @Input() set froalaModel(content: string) {                                                                                                                                                                                                                                                                                                                                                                                         

      if (!this._gotContent) {                                                                                                                                                                                                                                                                                                                                                                                                          
        this._initContent = content;                                                                                                                                                                                                                                                                                                                                                                                                    
        this._gotContent = true;                                                                                                                                                                                                                                                                                                                                                                                                        
      } else {                                                                                                                                                                                                                                                                                                                                                                                                                          
          this._$element.froalaEditor('html.set', content || '', true);        // HERE                                                                                                                                                                                                                                                                                                                                                         
      }                                                                                                                                                                                                                                                                                                                                                                                                                                 
    }      

I use these options after I've included "../node_modules/froala-editor/js/languages/sv.js" file in angular-cli.json's scripts array:

  public options: any = {
    language: 'se',
    tooltips: true
  };

And then I pass it to the editor:

<div [froalaEditor]="options" [(froalaModel)]="model"></div>

However The language is still english as no tooltips are showing when I hover the buttons.

Am I missing something or is there a bug here?

The examples on the website are via jQuery, how do you add custom buttons using Angular 2?

Hi, good day.

How would you install using webpack?

unusual delay while uploading image

I have the following:

However, if I save the item, the data is not saved to that fields (non-Froala fields work fine).

It would be great if this component supported ngModel directly. I want to have a form which includes a Froala editor, and a "submit" button which is only enabled if the form is dirty. This currently doesn't seem possible, even if you use the <input [ngModel]="froalaContent"> hack.

Typing in that input will cause the submit button to become enabled, but typing in Froala will not.

The doc doesn't mention how to configure SystemJS with the new structure... We used to have a bundle folder with an umd file. It's not clear which file has to be included in the System.config

Wouldn't it make sense to make this a real npm installable ngModule for Angular 2 to simplify usage.

app.module.ts

import { FroalaEditorModule } from froala-editor;

@NgModule({
  imports: [
    FroalaEditor.forRoot()
  ]
})

And than be able to use directives as described.

Not yet sure if forRoot is required.

I also would appreciate if the froala editor is included into the module and js files must not be included into index.html. I have too ideas for this:

• integrate through import
• import lazy load the the editor from cdn

I think it is really inconvenient adding the editor at several points

I'm use project Angular 2 and project Express JS. But I when I change options like this:
public options: Object = {
imageUploadURL: 'http://localhost:5000/post/image'
}
and my server side I have function from call POST/IMAGE:
saveImage: function (req, res) {
console.log('=======>>>>>')
FroalaEditor.Image.upload(req, '/uploads/', function (err, data) {
// Return data.
if (err) {
return res.send(JSON.stringify(err));
}
res.send(data);
console.log(data)
});
}
My problem is can't load image in Froala edtior normally but Image was added in server.

Expected behavior.

Being able to select text and set the cursor where clicked in the editor box.

Actual behavior.

Can't select any text, besides using CTRL+A, can't put the cursor where I want to. It will always be place at the start of the text

Steps to reproduce the problem.

(Describe the steps to reproduce the problem here)

OS.

Windows 8.1

Browser.

(Browser name an version here)
, IE Edge, IE11, FF 50.1.0

I'm using Froala with jQuery in an Angular 2 project, in Chrome everything works perfectly fine, but in IE and FF that isn't the case. I don't know if it has anything to do with ShadowDom or so.

But what I did is, I created a directive, that create the editor when clicked on an element that uses that directive. This is the init code of Froala, I'm using.

jQuery(this.wysiwyg.element).froalaEditor({
        key: key,
        useClasses: true,
        toolbarContainer: '#toolbarContainer',
        toolbarButtons: toolbar,
        toolbarButtonsMD: toolbar,
        toolbarButtonsSM: toolbar,
        toolbarButtonsXS: toolbar,
        htmlRemoveTags: ['script', 'base'],
        toolbarSticky: false,
        linkEditButtons: ['linkEdit', 'linkRemove'],
        linkInsertButtons: ['linkBack'],
        linkMultipleStyles: false,
        linkText: true,
        linkAlwaysBlank: true,
        keepFormatOnDelete: true,
        placeholderText: ''
});

When the editor isn't used anymore, i just do jQuery(this.wysiwyg.element).froalaEditor('destroy');

It's kinda strange that this all works without any problem in Chrome, but not in FF and IE Edge / IE11, could you guys maybe have some suggestions?

Thanks for your help! Our team loves the Froala editor but we need to add our own color picker with input so the user can specify the hex code. Other that popping a new modal up, do you guys have a way to call into a new toolbar with custom HTML inside of it? Just like how you're doing the color picker now?

Thanks again.

Hi,

Just tried adding images (drag and drop or quick insert) with the latest version of ng2 froala and particular images get auto-rotated 90 degrees. I confirmed that the affected images appear correctly angled in windows 10 icon preview, and other apps like paint, gimp, windows photo viewer, so I think it's safe to call this a bug with froala.

Note: my photo library has images that may have been previously rotated / saved using windows photo viewer's rotate button. I don't know if that rotate feature is storing some metadata that isn't being handled correctly. Just a thought. Not sure what else could cause this odd behavior in froala.

Any help appreciated. If you need sample files please provide a way to send privately.

Regards,

S. Arora

I do have problems getting the lib workable with the latest version of angular. Could you please bring it to a state there this is simple and add to the latest version of ng2 with angular-cli and add docs accordingly.

Following the sample implementation the following snippet causes
Uncaught Error: Unexpected value 'FroalaEditorDirective' declared by the module 'AppModule'(…):

app.module.ts:
import { FroalaEditorDirective, FroalaViewDirective } from '../../node_modules/angular2-froala-wysiwyg/lib/froala.directives';

@NgModule({ imports: [ ... ], declarations: [ AppComponent, HomeComponent, ..., FroalaEditorDirective, FroalaViewDirective ], providers: [ ApiService, XmlService, LoggingService, WebSocketService ], bootstrap: [AppComponent] })

I am currently trying to implement angular2-froala-wysiwyg in our angular2 electron application.
Unfortunately we got the error this._$element.froalaEditor is not a function as soon as I try to initialise the editor.

Before I was able to implement everything in our ionic2 app without any problems.

In my opinion, everthing should be defined correctly. Here you can see the console output for froala and jquery:

Those are the current dependencies of this project:

    "@angular/common": "^2.4.5",
    "@angular/compiler": "^2.4.5",
    "@angular/core": "^2.4.5",
    "@angular/flex-layout": "^2.0.0-beta.1",
    "@angular/forms": "^2.4.5",
    "@angular/http": "^2.4.5",
    "@angular/material": "^2.0.0-beta.1",
    "@angular/platform-browser": "^2.4.5",
    "@angular/platform-browser-dynamic": "^2.4.5",
    "@angular/router": "^3.4.5",
    "@angular/upgrade": "^2.4.5",
    "@bbit/ng2-bbit": "^1.1.0",
    "@bbit/ng2-bbit-electron": "^0.1.0",
    "angular2-froala-wysiwyg": "^2.4.2-2",
    "angular2-google-maps": "^0.17.0",
    "angular2-in-memory-web-api": "0.0.21",
    "basscss": "^8.0.3",
    "core-js": "^2.4.1",
    "es6-shim": "^0.35.3",
    "esprima": "^3.1.3",
    "font-awesome": "^4.7.0",
    "froala-editor": "^2.4.2",
    "google-libphonenumber": "^2.0.9",
    "homedir": "^0.6.0",
    "immutable": "^3.8.1",
    "jquery": "3.0.0",
    "jquery.scrollto": "^2.1.2",
    "jsoneditor": "^5.5.11",
    "lodash": "^4.17.4",
    "material-design-icons-iconfont": "^3.0.3",
    "material-design-lite": "^1.3.0",
    "mdi": "^1.8.36",
    "mkdirp": "^0.5.1",
    "moment": "^2.17.1",
    "mousetrap": "^1.6.0",
    "node-machine-id": "^1.1.4",
    "paho-client": "^1.0.1",
    "pouchdb": "^6.1.1",
    "qrious": "^2.2.0",
    "reflect-metadata": "^0.1.9",
    "request": "^2.78.0",
    "rxjs": "^5.1.0",
    "source-map": "^0.5.6",
    "static-eval": "^1.1.1",
    "systemjs": "^0.20.5",
    "systemjs-plugin-json": "^0.2.2",
    "webcomponents.js": "^0.7.23",
    "zone.js": "^0.7.6"

I tried to downgrade jQuery to >=1.11.0 because I saw that this was an issue in some React-projects without any success.

Does anyone have an idea how to fix this problem?

Thank you in advance!

how to get the all return value of editor,the function that"editor.selection.get()"only get the value of one selected row of editor

solved

How to listen to changes in the Editor instance?

After every keyUp event I want to log the editor content to the console. What is the best way to do this? Using (ngModelChange)="onChange($event) is not working for me.

<div [froalaEditor]='options' [(froalaModel)]="editorContent"
(ngModelChange)="onChange($event)"
></div>

onChange(content) {
    console.log('content', content);
  }

I just tried to use froala editor on an image with angular 2 as described in the readme.md

However I'm getting the error on console c.replace is not a function:

TypeError: c.replace is not a function
    at Object.p [as html] (froala_editor.min.js:8)
    at b.z (froala_editor.min.js:8)
    at HTMLImageElement.<anonymous> (froala_editor.min.js:7)
    at Function.each (jquery.js:365)
    at jQuery.fn.init.each (jquery.js:137)
    at jQuery.fn.init.a.fn.froalaEditor (froala_editor.min.js:7)
    at HTMLImageElement.<anonymous> (froala.directives.ts:115)
    at HTMLImageElement.dispatch (jquery.js:4737)
    at HTMLImageElement.elemData.handle (jquery.js:4549)
    at Object.trigger (jquery.js:7807)

component.html

<img [froalaEditor] [(froalaModel)]="imgObj"/>

component.ts

public imgObj: Object = {
  src: 'path/to/image.jpg'
};

using through npm "froala-editor": "^2.4.0", "angular2-froala-wyswiyg": "^2.3.4-rc.1" which both are latest.

Hi Guys,

I see that you're latest version still runs on RC.4. When are you planning to update to Angular 2.0.0