Inline Editor

[Sinmok]

InlineEditor 0.0.3

A simple, inline editor that allows you to edit text based content directly in pages themselves.

Only use this to experiment. Please do NOT use this on live sites.

0.0.3 Updates

• Refactored process module
• Editor now shows result sent by server rather than a generic message

New in 0.0.2

• Editing repeaters work (actually always did from the beginning)
• All editor bar colours are now configurable through the admin panel
• All editable areas are now given a dashed border
• Few other fixes!

Module page:

http://modules.processwire.com/modules/inline-editor/

GitHub page:

https://github.com/Sinmok/InlineEditor-for-ProcessWire

Credits:

Big thank you to apeisa for Fredi - whos Module inspired me to make this. It also provided a solid foundation on how to make my own module

Ryan - For the whole CMS and the HelloWorld module which taught me how to hook on to page::render!

Screenshots:

[thetuningspoon]

This is great! I'm happy to see this functionality being developed in ProcessWire. I'm not sure how much I would use it, but I'm sure some clients would find it a useful and friendly alternative to using the backend.

I haven't tried either yet, but how is this similar to/different from the Fredi module?

[Sinmok]

This is great! I'm happy to see this functionality being developed in ProcessWire. I'm not sure how much I would use it, but I'm sure some clients would find it a useful and friendly alternative to using the backend.

I haven't tried either yet, but how is this similar to/different from the Fredi module?

Thanks. In terms of similarity with Fredi, the main point is that they are both tools for editing content on the front end. Fredi is also an exceptional tool which I still use myself. Choose whatever best meets your requirements!

In my opinion, the advantages to both are as follows:

InlineEditor

Advantages

• Extremely quick - no buttons to press and nothing special to do. Click an element to edit, click off once you're done. Page auto saves. That's it. This makes it perfect for sites that are mostly text based and for quick editing.
• You don't need to remember what field corresponds to which element on a site. Just click what you want to edit!
• Know exactly how your page will look before it is even saved - no nasty surprises!
• Utilizes modern technologies in browsers

Fredi

Advantages

• Works with all fields (I think?)
• Much, much better tested
• Literally pulls in the back-end editor to the front end in an iframe, making the save result fool proof
• Doesn't require the jQuery library
• Edit more than one field per-submit request
• Has a cooler and easier to remember name

[thetuningspoon]

Great, thanks for the low-down!

[Sinmok]

Module updated to 0.0.2. See OP for details.

[apeisa]

Sinmok, this looks very cool, gotta test this soon! Nice comparison with Fredi too

[Sinmok]

Thanks, I'm curious to know if anyone else has had any luck getting this to work with a project. I've only been able to test it on one project along with the default PW profile.

Anyway, time to try and figure out how to make images editable 

BTW - is there any way to determine how many times your module has been downloaded or viewed? I'm just interested to see how interested people are in different modules.

[mindplay.dk]

This is awesome - I've been thinking about doing that for a while.

So many great contributions - ProcessWire is destined for greatness!

[mindplay.dk]

Anyway, time to try and figure out how to make images editable

Consider referencing (or possibly even integrating with) apeisa's Fredi module - some datatypes do not lend themselves well to in-place editing, and I think that includes images?

If you want things like drag-and-drop uploading and drag-to-resize on img elements, I think you have your work cut out for you - probably simpler to allow datatypes that can't be edited in-place to be edited in a pop-up? Also consider that, whenever you rebuild the editor for a particular datatype, you may lose access to any enhancements made for that datatype's regular editor.

[kongondo]

Sinmok. Looks nice. Will test this later..

Btw, small typo on module's requirements on your GitHub page

The latest version of ProcessWire, currently 2.1.3. The same PHP requirements as ProcessWire apply

Cheers

[Sinmok]

Sinmok. Looks nice. Will test this later..

Btw, small typo on module's requirements on your GitHub page

 

Cheers

Thanks, fixed

I've finally managed to get images updateable. Currently only works for single Image fields but I believe I'll be able to adapt it for the multiple images field.

I'll push the update onto Github tomorrow morning after I've fleshed things out.

[kongondo]

Cool! Can't wait to test with images!

[pwFoo]

Tested InlineEditor to maintain a data table. Nive module, but doesn't work with ckeditor for me. Can't modify text and the page loading time was terrible.

I removed  ckeditor.js and dropzone.min.js to prevent loading and all works fine and fast!

Maybe ckeditor and dropzone should be optional to improve speed for simple text fields?

[ryan]

Any rich text editor is going to add a lot of overhead. I would probably limit your rich text editors to the admin rather than inline. Though there may be some combination of factors in your case that increases the overhead? What is dropzone.min.js? 

[pwFoo]

Hi Ryan.

a quote from the module page:

New in 0.0.4
Experiemental image uploader using dropzone.js. This is currently only tested for use with singular image fields

I don't need a inline rich text editor (most of the overhead!) or image uploading in the frontend. My use case is simple text edit. 

So I'll remove those stuff from the module and use it without.

CKeditor is default enabled in the Inline Editor module. Haven't found a configuration to disable dropzone (image upload) or ckeditor.

[Sinmok]

Hey,

Didn't realise anyone was actually using this, and tbh I've not had the chance to update it in months.

Adding an option to remove CKEditor + dropzone is a very good idea and when I eventually get round to to it, I'll add it in.

Glad you're finding it of use though

Cheers.

[pwFoo]

Hi Sinmok,

thanks. Make it optional would be really nice

Great module! I like it!

[gebeer]

Thank you, Sinmok, for this module.

I'm playing with it in my new Foundation 5 Profile and it seems to work nicely with text. Haven't tried with images yet.

I might be using this on a live site for a client.

Haven't looked at the module code yet. Does it check whether page is editable before loading required code/assets?

I am not sure, so I prepended the code in my template with "if($page->editable())", so it looks like

if($page->editable()) $inline = $modules->get("InlineEditor");
if($page->editable()) echo $inline->setupField("headline|title");
if($page->editable()) echo $inline->scripts();

Is this necessary at all?

Thanks

gerhard

[Sinmok]

After quickly scanning through my own code (it's been a while..) I can safety say that the methods setupDiv and scripts do in fact check if the page is editable before returning anything. You should be fine using it without.

[gebeer]

Great, thank you!

[statestreet]

I've just been testing this module out and it's exactly what I need for this internal site I'm working on. I'd been getting some concerns from co-workers that the PW admin was a lot "heavier" than just writing in Google Docs, and Inline Editor will obliterate that concern.

However, it looks like saving isn't working in ProcessWire 2.5: I click off a field, it says it saved, but no save actually took place (reloading the page reverts to the old version). Any ideas on where to look first?