froala / ember-froala-editor Goto Github PK

Need to double check the fastboot addon author guide to ensure this addon properly supports fastboot.

On IOS(iphone or ipad, any version), when i click on the froala div, it don't get focused. It only gets focused when i click Bold or italic or any other tool that involves focusing in the toolbar.

Styles don't seem to be getting added correctly into the asset tree when used alongside ember-cli-sass. Am I missing something easy here? Let me know what would be helpful to see to assist debugging.

froala-editor is shipped with three third party plugins: embedly, image_aviary and spell_checker. However, ember-froala-editor doesn't allow importing them from the configuration in ember-cli-build.js, since they're in their own directory called third_party and not in plugins.

Reading through the importing code, I also don't see a way to outsmart the importer (I already tried ../third_party/embedly without success).

@Panman8201 can we update this to V2.4.2? It contains an important update: https://www.froala.com/wysiwyg-editor/changelog.

Also add the badge to the README. Should just be a matter of getting the GitHub integration setup...

CC: @stefanneculai I would need access to the repo Settings, unless you're able to get it setup for us. Thanks

Hello!

Awesome editor!

I found one issue. When user opens the editor with already existing content passed by property in .hbs (content=userContent) - editor do not show it. From code I've investigated it occur due to the fact editor updating content only when property '_editorInitializing' is set to true, which isn't working for init load.

Please, advise

Currently, the 'froala-wysiwyg-editor' bower dependency is within the devDependencies section of the bower.json file.

This forces users of this add-on to add the 'froala-wysiwyg-editor' bower dependency to their main applications bower.json file in order to have the froala editor itself installed when running bower install from the root of their Ember-CLI application.

Should the 'froala-wysiwyg-editor' dependency be moved from devDependencies into dependencies so that it is installed automatically?

Happy to submit a PR if so.

The editor works fine when using the froala-editor component directly but does not show current content when extending from FroalaEditorComponent as suggested in

http://froala.github.io/ember-froala-editor/#/addon/concepts

Entering new content works just fine when used directly or when extending.

This would be a good option to apply the froala-editor key without needing to extend the default component. If no other changes (defaultOptions, etc.) need to be applied, this would be a "cleaner" approach. We should use the ember-get-config addon for this or the alternate container lookup method mentioned there: https://www.emberobserver.com/addons/ember-get-config

@raphaelns-developer I went through the latest testing stuff and made a few changes to the exported fillInFroalaEditor() test helper. Can you update to the latest beta and try the following in your integration tests?

import { fillInFroalaEditor } from 'ember-froala-editor/test-support';

// ... from within a test...
await fillInFroalaEditor('#selector', '<p>New HTML to "fill in".</p>');

Curious if anyone doing anything specific to make the editor draggable / resizeable or is the best option to create a wrapper div and handle everything in there and have froala resize based on that. I'm currently doing that with Summernote but the resize in particular isn't elegant.

Thanks for the addon.

When I try to install this it tries adds ember-cli-font-awesome to my package.json file, when then breaks. Shouldn't it just be using ember-font-awesome instead? How can I install this without the ember-cli-font-awesome?

Thanks,

The froala editor recently started removing all event listeners when the editor is destroyed. Since this addon adds the listeners once, when the element is inserted, they won't properly fire if the editor is re-initialized.

Related froala issues are froala/wysiwyg-editor#1458 and froala/wysiwyg-editor#1444

I'm tring to use the helper fillInFroalaEditor in my acceptance test but isn't working correctly. The helper fill in the froala instance with the text that i have passed, but the content property is not updated with the text unless i force the test to click in something else like a button to take the focus off the froala editor.

Contrary to my original belief, for fastboot support, all DOM calls should be placed in the didInsertElement() hook.

Just leaving myself a TODO / reminder.

This can be done, just need to update the upstream ember-cli-bootswatch (which is used for the docs site). Someone should contact that maintainer. 😉

EmberMN/ember-cli-bootswatch#14

I want to browse files from my server. But, by default, images are being served from froala server.

Description:

Create multiple instances of the froala-editor open up the first one and upload an image. Then delete the first editor. Try adding an image in the second editor, the popup disappears and the file explorer never opens.
http://recordit.co/veHZJUx4YC

Code Example:

{{#if showFroala}}
{{froala-editor options=exampleOptions toolbarInline=true}}
{{/if}}

<button {{action (mut showFroala) false}}>DELETE ONE</button>

{{froala-editor options=exampleOptions toolbarInline=true}}

Notes

What seems to be going on is that when deleting the first section, the destroy method gets called that deletes all the event handlers. ( in froala_editor.js --> FE.prototype.destroy )

Because of the element nesting and Froala's changes to the DOM after initialization, getting the HTML directly from the DOM can be a bit tricky. Add a helper to abstract this away into a tidy function call. But what to name the helper... 🤔 (open to suggestions)

Need to review. https://travis-ci.org/froala/ember-froala-editor/jobs/228693041

Just a TODO.

Backstory, I have to support an old ember project for a bit longer so I haven't had a chance to update my local node env.

Ditto. Need to research on npm dep vs bower dep in an ember addon. (Ember's direction is to move to npm deps over bower.)

I think this could be achieved by checking $.FE.DEFAULTS for an existing key when building the options object for initialization. Usage ex:

{{froala-editor 
    content=myContent
    key='abc'
    toolbarButtons=(array 'bold' 'italic''strikeThrough')
}}

With the release of ember 2.4.2, I think it's now possible to just use options all-around, instead of having a defaultOptions when extending the component. Research if this will work properly with different options values, ex; options=someProp vs options=(hash foo="bar")

This goes along the lines of embers "data down, actions up" philosophy and future direction. (This probably should have been done from the beginning since it would have removed the need for a lot of state checking.) Example usage in this case:

{{froala-editor
    content=myContent
    on-contentChanged-getHtml=(action (mut myContent))
}}

I'm getting the following error when trying to deploy application to Heroku using the standard build pack.

BroccoliMergeTrees: Expected Broccoli node, got undefined for inputNodes[0]
TypeError: BroccoliMergeTrees: Expected Broccoli node, got undefined for inputNodes[0]
    at BroccoliMergeTrees.Plugin (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/broccoli-plugin/index.js:23:13)
    at new BroccoliMergeTrees (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/ember-froala-editor/node_modules/broccoli-merge-trees/index.js:16:10)
    at Class.treeForVendor (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/ember-froala-editor/index.js:49:12)
    at Class.superWrapper [as treeForVendor] (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/core-object/lib/assign-properties.js:34:20)
    at Class._treeFor (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/ember-cli/lib/models/addon.js:517:33)
    at Class.treeFor (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/ember-cli/lib/models/addon.js:477:21)
    at project.addoError running: ember build --environment production 2>&1ns.map
.addon (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/ember-cli/lib/broccoli/ember-app.js:525:20)
    at Array.map (native)
    at EmberApp.addonTreesFor (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/ember-cli/lib/broccoli/ember-app.js:523:30)
    at EmberApp._processedVendorTree (/tmp/build_65839bf19840f998ff0c9b06481c5c99/node_modules/ember-cli/lib/broccoli/ember-app.js:960:29)

Version 2.4.2 which does not use broccoli-merge-trees deploys without issues.

Application environment

DEBUG: -------------------------------
DEBUG: Ember             : 2.12.0-beta.2
DEBUG: Ember Data        : 2.12.0-beta.4
DEBUG: jQuery            : 3.1.1
DEBUG: Ember Simple Auth : 1.2.0
DEBUG: -------------------------------

Let me know what other information I could provide to resolve this.

I'm writing automated tests for my app. When I need to fill a regular input, I write this:

fill_in(session, fillable_field("Title"), with: "Awesome Post")

This will search for inputs or textareas with a placeholder "Awesome Post" or with a label with the same text.

<label for="post-title">Title</label>
<input id="post-title">

<input id="post-title" placeholder="Titlte">

I can't make labels work with a Froala editor, so I'm relying on placeholders to write my tests using my own helper to find Froala.

fill_in(session, Froala.field("Title"), with: "Awesome Post")

The issue is when I'm editing a post, because the HTML element with the placeholder text is not attached to the DOM, so I can't search using the text. So, when I'm editing, I need to search for the content

fill_in(session, Froala.field("Awesome Post"), with: "Great Post")

For me, the best solution would be having labels working properly. I guess the lack of working labels can be an accessibility issue. But, alternatively, having the placeholder text as data attribute while it's not visible would help.

If you view the froala example documentation, clicking on the "z" in "initialize" will initialise the editor, focus the editor and place the cursor after the 'z' character.

On the other hand, if you visit Ember Froala' s hide-on-blur and click anywhere on "Click here for an example", the editor isn't focused immediately and it requires a second click. This also ruins the user experience for hide-on-blur, as the editor only successfully hides if the user does perform the second click.

It seems like the gh-pages Website is now redirecting to a custom domain. I'm unsure if this is intended... Originally it used the typical GitHub subdomain: http://froala.github.io/ember-froala-editor/ Now it's trying to go to http://www.emberwysiwygeditor.com/, which breaks the asset links and ember router.

@stefanneculai can you confirm if this is intended? I'm guessing it was changed in the repo Settings.

Trying to extend the component causes it to not render. Here is an example.

While $element.froalaEditor( this.get('_options') ); run it just doesn't do anything.

Ex:

{{forala-editor myContent myOptions}}
{{froala-content myContent}}

As per the docs, any event for the froala editor listed here

https://www.froala.com/wysiwyg-editor/docs/events#initialized

can be used via ember by using an 'on' prefix. I'm working with this package right now in the following manner:

{{froala-editor params=froalaEditor.params value=model.html on-initialized=(action "integrate") focus=(action "froalaFocus")}}

My froalaFocus action is firing fine when the editor is focused on, but the initialized action (i.e. integrate) never fires. What am I missing?

https://ember-learn.github.io/ember-cli-addon-docs/

This is very much similar to the previous contentBindingEvent option.

http://froala.github.io/ember-froala-editor/#/components/froala-editor?section=attributes

Need to add in the latest versions of ember.

i am trying to upload image to my server. Image was uploaded successfully

but i get an error

btw this is my froala options

let options = {
      heightMin: 400,
      imageUploadParam: 'file[]',
      imageUploadParams: {image: new Image().toString()},
      imageUploadURL: `${ENV.IMAGE_API}/upload`,
    };

    if (!_.isEmpty(user)) {
      options = Object.assign(options, {
        requestHeaders: {
          Authorization: user['token']
        }
      });
    }

can anyone solve this.. sorry for my bad english :(

Currently the ember {{froala-editor}} component attaches event listeners to the DOM. Due to how/when the Froala Editor fires events, this causes weird "mis-fires" for the ember actions. This became apparent during testing. Look into using the Froala Editors events.on method to create action callbacks instead.

One large issue with this change is that it appears event objects are not passed to the handler. This would effectively cause a breaking change in the public API for Event Actions. And due to how releases are aligned with actual Froala Editor versions, it would not be possible to release a new major version separate from the Froala Editor. Please post here if you rely on the event object and/or have a large number of "Event Action" handlers.

something strange here.. the content is apended both on editor and below editor...

I've found this to be problematic since the Froala Editor doesn't support it in the first place. Instead of watching for option changes, provide a method to re-init the editor manually.

Just a few things that could be changed once we can support Ember 2.5+. Maybe we could follow Ember's versions with support.?. (eg; Addon version 2.5.x requires Ember.js 2.5.x)

• Replace Object.assign() with Ember.assign() (added in Ember 2.5) and remove the Babel polyfil requirement
• Combine the options and defaultOptions properties, will work properly with the release of Ember 2.4.2
• Move to ember-font-awesome 2.x which has some Ember 2.x changes but requires Ember 2.3

Hide on-blur with binding does not working on Ember 2.9.0 and below

{{froala-editor content=myValue update=(action (mut myValue)) options=(hash initOnClick=true) on-blur=(froala-method "reinit")}}

Hi,

Is there an ETA on when the latest couple of commits (for Ember 2.8 support) will be bundled into a new release? We're in the process of upgrading our app to 2.8 and now froala is throwing all kinds of errors which are blocking our efforts.

Thanks!

Hey, I couldn't find an answer for this on the Froala site.

I'm using this Ember addon. I purchased a license but can't find any documentation on whether the single-domain license includes localhost. Can you please advise?

The ember-try release test scenario is failing due to an issue with npm. Created this ticket to monitor the progress of the issue and make everyone aware of why the 2.8.1 build is failing.

https://travis-ci.org/froala/ember-froala-editor/jobs/371554340#L2933
emberjs/ember.js#16580

When deploying to production, I get the following error when pressing backspace. This causes none of the text to save.

Uncaught SyntaxError: Invalid regular expression: /([�-􏰀-�‍]+)$/: Range out of order in character class
at new RegExp ()

This just started in 2.6.6

{{froala-editor content=object.description update=(action (mut object.description)) on-blur=(froala-method "reinit") options=(hash initOnClick=true)}}

When I manually change content to null or false the editor disappear.

Change

this.set('object.description', false)

init value is null and its working but after change editor disappear without error.