Using froala in modern environment

[JSteunou]

Hi,

seems you guys did a great job with this editor, but whereas it has modular architecture, it is not usable out of the box with modern tool chain (npm + webpack at least).

1. the package.json lake main entry (so one have to require('froala-editor/js/froala_editor.min');)
2. froala as references (or at least one) to global jQuery whereas it as UMD header oO (so it just crash for those not exporting jQuery as global)
3. no documentation with CJS or ES6 examples.

[JSteunou]

@stefanneculai I must insist because for us it's not an enhancement but a bug. I have to change the minified version of froala to make it work. I'm not against your business plan, we are planning to buy oem license, but at least with open-source I could have submit a PR.

[jwhitmarsh]

@JSteunou did you get anywhere with this? Once you've required froala is it then accessible in the global window object, so we can do things like FroalaEditor.DefineIcon?

[JSteunou]

Nope. There really is a bug. Did you try to work with tools like webpack or rollup, either with CJS or ES6 require / import?

So I'm saying it again, please flag it like a bug and either fix it or help us help you to fix it.

[jwhitmarsh]

@JSteunou just to be clear, i'm not a maintainer with Froala.

For your info, I got it working using ProvidePlugin and manually attaching jquery to the window object (but I think that can be improved using the expose loader)

    plugins: [
        new webpack.ProvidePlugin({
        'jQuery': 'jquery',
        '$': 'jquery',
        'window.jQuery': 'jquery'
      }),
      ...
    ],

and in app.js

window.$ = require('jquery');

[JSteunou]

Yeah I cheated too, but really not a big fan.

How should I feel if a client tell me that a form in my app do not work on his mobile and I tell him it's not a bug as it works through is desktop.

Same here.

[stefanneculai]

@JSteunou @jwhitmarsh For now the editor needs jQuery. It is on our plan to remove the jQuery dependency over the next period. For now for importing with webpack, please use the plugin provider as they describe in their docs: https://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

An example for es6 will come shortly.

[JSteunou]

@stefanneculai but we should not have the be forced to shim! You already did 75% of the job adding an UMD loader with jQuery imported as dependency, there is just one and only one remaining call to a global jQuery in your code. Just use the imported jquery instance and that bug is fixed or allow me to PR and I'll do it for you.

[stefanneculai]

That global usage of jQuery inside the code has been fixed and isn't there anymore in v2.4.1.

[JSteunou]

Hooo my bad I completely did not see this release!

Then no need to shim for jQuery anymore!

[JSteunou]

@stefanneculai just tested and indeed it works now.

Just need to add a main entry in your package.json so one can simply do require('froala-editor') instead of require('froala-editor/js/froala_editor.min') without using webpack alias (yeah see you coming @jwhitmarsh ;) ).

[Panman82]

In regards to access to the un-minified source, I wonder if you could do something like Font Awesome 5, where they must use GitHub API's to add paying customers to their private repo. That way users of froala-editor can help debug the problem and submit PR's. Just an idea.

[stefanneculai]

@Panman8201 please see: #447 (comment).

[stefanneculai]

@JSteunou it's updated on npm now as.

[ryanotella]

To get Froala working on webpack, the React installation instructions actually work great.

import * as $ from 'jquery';

// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';

// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';

// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';

$('[data-component=richtext-field]').froalaEditor();

[arambert]

In my case I needed to import froala-editor like this:

import editor from 'froala-editor/js/froala_editor.pkgd.min'
editor(null, require('jquery'))

This test at the beginning of the froala_editor.pkgd.min file:
"object"==typeof module&&module.exports
makes the import (or require) return a function that has to be called to insert the plugin into jquery.
I had to call it with require('jquery') as 2nd argument because otherwise the 'require' call inside the function raises 'require is undefined'...

I hope this will help some of you !

[jamesmoss]

Following on from @arambert's comment above, if you're using webpack, it will use the AMD module definition in Froala instead of the CJS one as it's defined first and the code he provided won't work.

Adding this to your webpack config will ignore the AMD loader for just this file:

module: {
  rules: [
    {
      test: '/froala_editor\\.pkgd\\.min/',
      parser: { amd: false }
    }
  ]
}