Update froala to v2

[macrozone]

Use froala v2 for orion with imageManager-support

• image upload
• image browsing
• image delete
• file upload to orion instead of froala
• sync with upstream
• restrict delete to admins only (same applies to orion:filesystem)
• add tags to orion:filesystem and use them in the imageManager
• help users to find out which images are used somewhere (we would need to track dependencies on orion-filesystem for this)
• ..

If you want to test it now, you can use this package: panter:orion-froala2

[ecuanaso]

Hey, macrozone. I was able to upgrade to v2, there's still some bugs I have to iron out though. Right now, I'm working on integrating my server to to show images from the images I upload to the filesystem show on the image-manager.
The image-manager right now shows images from the froala server ->
http://s25.postimg.org/enn1ncnpb/Screen_Shot_2015_10_05_at_8_56_18_AM.png

[macrozone]

I am able to upload the images to orion-filesystem (with vsivsi:orion-file-collection) without any problems so far.

to show images in the image manager i would use https://www.froala.com/wysiwyg-editor/docs/options#imageManagerLoadURL

and would define a server-sider-route that uses the orion.filesystem.collection to return the required json. Unfortunatly there seems to be no api where you could directly return the array of images available, so we need this workaround with old-fashioned rest-calls.

[ecuanaso]

"define a server-sider-route that uses the orion.filesystem.collection to return the required json."
Would I define a server side route with iron router or do I have to add another package?

Is there an example on how to define the server side routes and the make old fashioned rest calls? Sorry I'm still learning requests/responses..

[macrozone]

iron:router has support for server routes: http://iron-meteor.github.io/iron-router/#server-routing

in this case, Restivus would also be a nice and easy choice: https://github.com/kahmali/meteor-restivus

[ecuanaso]

Hey macrozone, any progress so far? Stuck on anything?

[macrozone]

no, had no time to work on that yet. But I asked the froala team, if there is a api where you can return a javascript-array or object instead of calling a rest-interface, but there is no such api yet.

[macrozone]

ok, made it work 👍 See my updated pull request.

[ecuanaso]

Awesome! I've been playing around with it all morning..
This might be a question more towards Froala guys, but I have a question if it's possible to also display pdfs inside the image-manager? I have an orion collection called Docs, where I use as a pdf housing section.
http://s25.postimg.org/j5f6xoem7/Screen_Shot_2015_12_06_at_2_29_20_PM.png

This is what I changed so far in the froala_server.js file. Added 'file-attribute' to the uploader option. But does't seem to work, any clue what I did wrong?

Api.addRoute('froala/images/', {
get() {
return orion.filesystem.collection.find({
uploader: {$in: ['image-attribute', 'file-attribute', 'froala']}
}).map(function(image){
return {
thumb: image.url,
url: image.url,
tag: "froala" // TODO: add tags to filesystem
}
});
},

[macrozone]

to display pdfs you would need to have thumbnails of the pdf.

https://github.com/CollectionFS/Meteor-CollectionFS has a feature that enables you to store multiple versions of one file, e.g. scaled-down thumbnails. You then could convert the pdf file to a image file and store it as a thumb.

But it would also require additional changes on froala, because pdfs are not images and can not be handled equally. The editor would insert an img-tag and try to load the pdf in it. this would fail.

Maybe you can explain your use case?

[ecuanaso]

My use case is my company wants to use the docs collection,
http://s25.postimg.org/j5f6xoem7/Screen_Shot_2015_12_06_at_2_29_20_PM.png
To upload PDFs so they can then reference these pdfs inside things like pages. So they'd like to not only write content in the editor but also place in recently uploaded pdfs from the docs collection. Not sure that makes sense?
I see that the image-manager has 'tags', maybe we can create a documents/pdfs tag?

[ecuanaso]

Hello Marco,

Have you had styling issues when using froala v2 and materialize? I've had
to add in a bunch of new css to my project to fix certain structure issues
with froala v2 on materialize.
I haven't had that problem with Bootstrap and Froala v2.
Let me know , thanks.

On Sat, Dec 5, 2015 at 6:36 PM, Marco Wettstein [email protected]
wrote:

hey, check it out: #355

2015-12-03 16:41 GMT+01:00 david castillo [email protected]:

Hey macrozone, any progress so far? Stuck on anything?

—
Reply to this email directly or view it on GitHub
#355 (comment).

—
Reply to this email directly or view it on GitHub
#355 (comment).

[macrozone]

I did not try materialize yet, so I can't tell. Maybe you can share your css-patches.

[ecuanaso]

Here what I've got so far. If you have some that I dont have , please share as well. Thanks.
https://gist.github.com/ecuanaso/d92cc9fbdacafc7ec2e4

[krishaamer]

Would love to use Froala 2 for a site I'm building now. What's the status of this merge? Github still says "This branch has conflicts that must be resolved"

[nicolaslopezj]

It seems like it's not ready. Not all the items are marked.

Is this ready @macrozone?

[macrozone]

Hi there, its like the state above.

In addition to just update froala2 I implemented support for the imageManager of froala2. There is room to improve this like stated above, but I think this should be scope of another PR.

The PR is not up to date with latest froala2 and orion, but this should be a minor thing to fix. (I do not use it currently in a project, so i did not continue to work on this PR).

I can try to update it with the latest versions this weekend, but feel free to fork and try out the update.

[nicolaslopezj]

I think it's a better idea if you create a package macrozone:orion-froala2 and we deprecate orionjs:froala

[ecuanaso]

Hello there macrozone & nicolaslopezj! Good to see you guys again.

Hey, I've been trying to connect the upload file from froala v2 onto my own server, however I haven't had alot of success.
here's an image of the upload file button on froala v2

And here's the code that I have so far. As you see I've used the restivus template from the image manager to try to re-create the same functionality. However with upload file it has to be a post request.
Here's what I have so far. Maybe we can work together on this to come up wtih a solution? Thanks.

froala.js
https://gist.github.com/ecuanaso/36809fced21fb180fdafcb0381d714fd

froala-server.js
https://gist.github.com/ecuanaso/c05665eb641f65cdf4e44d6a79fc12db