search

froala / react-froala-wysiwyg

React component for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
564 stars 129 forks source link

Usage with create-react-app #36

Closed andrewhl closed 5 years ago

andrewhl commented 7 years ago

Is it possible to use this package with React create-react-app, without ejecting?

gurnzbot commented 7 years ago

+1. I'd love to not have to eject.

walteranderson commented 7 years ago

It's definitely possible, I'm currently using this with a non-ejected react application. The module loaders that froala requires are covered by the standard configuration, so the only other thing that I had to configure was to make sure jQuery is attached to the window object. I added this bit of code to my src/index.js file and haven't had any problems:

import $ from 'jquery';
window.$ = window.jQuery = $;
stefanneculai commented 7 years ago

@andrewhl @gurnzbot it would be amazing if you could give a try to the approach @walteranderson suggested.

walteranderson commented 7 years ago

It's worth noting that because the workaround above is injecting jQuery into the window from src/index.js, that means unit testing components that use Froala will throw $ is not defined errors. Attempting to add jQuery to the window object in the test itself presents a similar problem described in #7.

As far as I can tell, there is no way of testing components that use FroalaEditor within a create-react-app configuration without ejecting and fiddling with webpack configs.

@stefanneculai I would highly suggest looking into what steps can be taken to improve integration with create-react-app configurations. Because having to explicitly manage jQuery in this context has caused many headaches.

kevinhaas commented 6 years ago

There's nothing wrong with ejecting. Don't be scared of webpack.

michaelryancaputo commented 6 years ago

This solution seems to be broken in 2.8.3 https://stackblitz.com/edit/froala-editor-test?file=index.js

michaelryancaputo commented 6 years ago

☝️ This has been fixed FYI

bkh2js commented 6 years ago

Any solution for this has been resolved? @michaelryancaputo

DadyByte commented 5 years ago

I was able to do it with create-react-app Just add this addition step in import section

window.$ = $;

srosset81 commented 5 years ago

Since this package is a simple wrapper around Froala, it's easy to copy it and import the jquery module in case you don't manage to do a global import in your configuration.

See this: https://gist.github.com/srosset81/1a9e04340ef23fb8c9f4872b38e701ee

stefanneculai commented 5 years ago

Please see https://github.com/froala/react-froala-wysiwyg#usage-with-create-react-app

nathan-charrois commented 4 years ago

Hi @stefanneculai, the content related to CRA no longer appears on that page

aguiar-tiago commented 2 years ago

Hi, does this still works with create-react-app without ejecting?