calling ProcessPageEditImageSelect

[Joe]

Hi,

I´m using CKEditor as an inline editor on the front-end. Now I need to call the ProcessPageEditImageSelect dialog when the CKEditor image button is pressed, just like  when using the editor in the back-end. (Right now the standard CKEditor image dialog comes up.)

Does anyone know how to integrate ProcessPageEditImageSelect here? Thank you!

[ryan]

That module is meant for admin use only and I don't think it's something that could be used on the front-end as it performs checks to make sure that the page is editable, etc. It is also capable of generating new images based on your selections (for resizing) so it particularly safe from a front-end standpoint either. 

[Joe]

Thank you Ryan!

I suppose if you say so, it really cannot be done. So I will stop trying to implement things this way then.

I´m not sure if in my adaptation would be a security risk, since I will only allow logged-in site editors to access this function on the front-end. What I´m trying to implement is inline front-page editing to make the editing experience simpler for not so computer-savvy users. I suppose I will try to find some "hybrid solution" then, where they get sent to the back-end for adding images, maybe an adapted and simplified back-end page.

Btw, happy New Year!

[Soma]

Why Not simply use the great Fredi module for front end editing? Or use edit links that point to the edit page in pw and append &modal=1 and use some lightbox iframe script. Much less hassle and dead simple.

[Joe]

Thank you, Soma!

Yes, the Fredi module is nice. The reason I didn´t just use it is that I would like to have inline WYSIWYG on-the-page editing for logged-in editors like in this example. I might use Fredi to handle image insertion now, as this doesn´t seem to work via the CKEditor, as Ryan has pointed out. But the "&modal=1 solution" looks very interesting too!

[ryan]

I suppose if you say so, it really cannot be done. So I will stop trying to implement things this way then.

 

I´m not sure if in my adaptation would be a security risk, since I will only allow logged-in site editors to access this function on the front-end.

In that case, it can be done. The security aspect was really the main thing that would prevent one from wanting to use this on the front-end, as it's a module meant for people that have access to edit pages. Not that I've tried it, but if the security aspect is not applicable then it should be possible to get it to work on the front-end. 

[Joe]

In that case, it can be done. The security aspect was really the main thing that would prevent one from wanting to use this on the front-end, as it's a module meant for people that have access to edit pages. Not that I've tried it, but if the security aspect is not applicable then it should be possible to get it to work on the front-end. 

Great, but here I really  don´t know how to call that module from the front end, I´ve tried but could not get it to work so far. Actually the module to create links (ProcessPageEditLink I believe) would have to be called in the same way too.

If I could get these two modules working in this context I would have full inline WYSIWYG editing on the front page for logged-in users. I think that would be very attractive for a lot of people. (I´m specifically talking about small website owners whose computer skills are frequently limited to surfing, checking their mail and writing Word-documents ;-)

Right now I got everything working, except I have to send users to the back-end for inserting images and links. Come to think of it, I might also want to make the image upload function accessible from the front end to make inline editing even more seamless.

The page content could then be managed completely from the front-end. One would only go to the back-end to create pages, move them around and adjust other settings.

Edited January 4, 2014 by Joe

[ryan]

As for how to make the ProcessPageEditImageSelect module accessible from the front-end, you'd need to open it in a modal window from your editor. Both our TinyMCE and CKEditor modules are already configured to do this, using jQuery UI modals. Note the properties passed to the ProcessPageEditImageSelect window (as GET variables) from TinyMCE or CKEditor in the admin. You'd need to duplicate those properties in your own usage (if not already using TinyMCE or CKE). Without looking at the code here, I believe it includes things like the page ID and image selection (if one already selected). Note that the ImageSelect module does nothing more than populate some fields in its own screen. You'll see these fields on the screen you see after selecting an image: filename, width, height, and whether it's linked to larger version. It's the TinyMCE or CKEditor plugins that do the rest of the work, pulling those values out of that modal window (with javascript) and inserting them into the editor. So those plugins are also good to look at, and I'd imagine they could be used on the front-end like they are used on the back-end.  The ProcessPageEditLink module works exactly the same way. 

[Joe]

Thank you for these pointers, Ryan.

Yes, I´m trying to do it with CKEditor (although if I felt that it could be done better with another editor I would use that - I will not need a lot of functionality, as I obviously have to limit the options to protect page integrity, so basically the editor just needs to work well and provide clean markup, it does not need to have a huge amount of features.)

So I´ll get busy trying to implement this...