Orchard 1.7 Front-End Inline Editing feature team

Topics: Announcements
Coordinator
Nov 6, 2012 at 8:09 PM

This thread is to discuss a front-end inline editing feature for Orchard 1.7.

Nov 7, 2012 at 12:40 PM

If this is implemented, may I ask to keep it optional?

A mailing packet that we were using also switched to inline editing. Editing is now 100% easier but we also lost the ability to more advanced things.

Coordinator
Nov 8, 2012 at 4:32 AM

The current experience will still be there. inline is just to make it easier and faster to make small edits.

Dec 28, 2012 at 6:47 AM

CKEditor 4.0

http://nightly.ckeditor.com/12-12-27-08-51/standard/samples/inlineall.html

And there's an alternative to CKFinder named KCFinder.

http://kcfinder.sunhater.com/demos/standalone

Would be nice to see fully integrated in Orchard

Dec 28, 2012 at 5:01 PM

@Skrypt, wow, that CKEditor (the 1st link) inline editing looks amazing. it would be awesome if we could have something like this in orchard? 

To the core Orchard team, wasn't Nick working on inline editing a few months ago? I think it was for the 1.4 or 1.5 release. What happened with that effort? Is it something that we should pick up where Nick left off, or are we starting from scratch again for 1.7? 

If we want to have inline editing working with TinyMce i'd be willing to work on that. I'm not sure if it's possible in as awesome a manner as that CKEditor link. Do we want to try to have the feature be agnostic to which WYSIWYG editor someone is using (TinyMce/TinyMceDeluxe/CKEditor/Markdown)? 

Coordinator
Dec 28, 2012 at 8:49 PM

Yes, Nick was working on that and he never finished it, I think.

Dec 28, 2012 at 8:57 PM

I just like to add : do not forget that there is more to edit than just blocks of images / text ;)

Like keep it open enough so we can provide our own inline editors for our custom fields / parts.

Dec 28, 2012 at 10:51 PM

I've thought a bit about this. Maybe we could limit us to the body part at this point, but to be super cool inline editing you should be able to inline edit all parts. Since the inline editing can't know about the parts each content part therefore has to output some appropriate editor for themselves.

What I'm wondering here is whether the same shape used to edit the content item in the admin should be used (meaning we could use the admin editor) with some additional styles or if there should be a dedicated front-end editor. To configure the editors for inline editing some scripts, styles and stuff would probably be required so even if we use the admin editor something more would have to be passed to the view. I guess.

Dec 29, 2012 at 2:22 AM
Edited Dec 29, 2012 at 2:47 AM

This should be a dedicated front-end editor. It's basically some JSON object posting from client to server side (Maybe done using SignalR).

The admin should be kept like it is since form POST is also less expensive for client browsers.

It's a feature that we should be able to turn ON/OFF on the website level.

For those who wants to use the inline editing in their own module/widgets the editor should only be added to dependencies of those modules.

For those who still want to use TinyMCE then this feature would not be available... and that's why it needs to be only a dedicated front-end editor.

Because else Orchard would become strongly tied to CKEditor and Orchard should be kept extensible as much possible.

Developer
Dec 29, 2012 at 8:19 AM

I did start on this yes with Sipke. We got a concept working but will need to revisit the implementation. The code is at http://orchardinlineediting.codeplex.com

Dec 29, 2012 at 6:39 PM

Looked at the module. It's nice to see that the concept is working. Though, I think it would be cleaner if the inline editor was using this kind of editing. 

<div contenteditable="true">content here</div>

With TinyMce or CKEditor loaded on top of the editable region. Else, if you load the entire editor in the page ; it kind of break the purpose of seeing the content as it will be displayed when you edit it.

Dec 29, 2012 at 8:39 PM

I have been using CKEditor previous versions with asp.net. It is a solid product, but are it's internal really uptodate with css 3 and html 5  ???

There is also the Editor inside Kendo UI which has a GPL license....

Dec 29, 2012 at 11:44 PM

I think tinyMCE is still catching up for supporting HTML 5 through extensions.
CKEditor 3.6.1 is the first release to try to support HTML 5.
CKEditor 4 is using HTML 5 features (contenteditable) and support HTML 5.
The KendoUI editor is supporting HTML 5 but no language pack out of the box.

Dec 30, 2012 at 11:05 AM

The contenteditable would be a nice solution for html content. However if there should be inline editing for stuff like fields and other parts more work are required. These editors could be dropdown lists, checkboxes or whatever, and I think it wouldbe sweet to be able to change those as well. Or should inline editing be limited to body part?

Dec 30, 2012 at 7:25 PM

There's a lot more work involved in making everything inline editable but the first step should be to make HTML parts, inline editable. Remember though that if it's inline editable that it should also try to keep the visual aspect intact on the page. So, for example, if you try to change the date of a blog post, you could double click the date and it would make a date picker pop-up over the actual date zone (instead of the CKEditor) and then you could change the date of this specific blog post. I'm actually writing this because in the actual concept they are making date and other thing editable together wich is wrong since you could want to put the date of your blog post on top of the blog post and the editor in the end of the blog post...

What I'm trying to say is that an inline editor should not be using modal pop-up's that load's an entire form to edit every content ... else it would be the same than to use the actual admin forms on a separate browser tab. We don't want that changes makes the page reload with a complete form post. Just small AJAX posts to the WebApi.

"Inline" equivalent to "In place"...

@JLedel I don't know what is the limit of this but if it needs to be out for release 1.7 ; I would say : "time". And also what @bertrandleroy will dictate !

Dec 30, 2012 at 9:19 PM

@Skrypt I agree with you about the inline = in place part. if a field with a dropdown editor is clicked the text goes away and the dropdown list replaces the text. Hit save and the new text goes there. Another example is tags for some content, just click next to the tags and you can add or delete. The key point with what I'm trying to say is that we should keep this in mind so we don't design a solution that only works for html blocks (body part). As for the time aspect I'd rather ship cool inline-editing with 1.8 than some crappy thing with 1.7 that needs to be re-done.

Jan 8, 2013 at 3:09 PM

If you really want top visual editing on the front-end you should really use http://aloha-editor.org/

Check out their inline content editing: 

http://aloha-editor.org/demos/3col/

http://aloha-editor.org/demos/960-fluid-demo/

 

and it is all open source with a huge team of contributors behind it.

That will make Orchard really a top CMS! Front-end content editing is really a must have feature.

Jan 8, 2013 at 7:40 PM

The below look like great solution

http://vitalets.github.com/x-editable/

http://vitalets.github.com/x-editable/demo.html

Jan 8, 2013 at 11:12 PM

@ylan That's how I'd like fields and stuff to be edited (except for maybe text fields)! Combine that with the inline-editor of the current Html editor and we're good to go in my opinion!

Developer
Jan 9, 2013 at 12:27 PM

Thanks for the links and suggestions. We're definitely going to have a look at those.

Jan 10, 2013 at 4:49 AM
Edited Jan 10, 2013 at 5:29 AM

Another suggestion would be to use backbone.js on this projet (or something similar like knockout.js) instead of the fluid-project framework wich looks a little bigger. Backbone is a library, not a framework, and plays well with others. Like this one : http://d3js.org/

http://todomvc.com/

Also keep in mind that knockout.js doesn't have url routing but backbone is. Though there is 

https://github.com/mtrpcic/pathjs
http://millermedeiros.github.com/crossroads.js/

Also knockout.js is a MVVM design patern and backbone.js is a MVC design patern.

http://kmalakoff.github.com/knockback/ is a project that seems to bring the magic together.

Jan 14, 2013 at 3:45 AM

What about supporting markdown as well as HTML?

Also, what about the idea of previewing and publishing changes in-line as well?

Developer
Jan 14, 2013 at 7:05 AM

In case of an input field that uses the markdown flavor, we should probably render a markdown editor.
As for publishing in-line, we have to discuss the design still, but I imagine we could have some sort of tool bar at the top or bottom of the page, which contains a cancel draft / publish button.

Jun 14, 2013 at 5:26 PM
Is this still targeted for 1.7? Also, when is the projected date for release for 1.7? I'm really looking forward to the workflow module. :)
Developer
Jun 15, 2013 at 8:41 AM
1.7 is targeted for the next week or two. Still some bugs to fix.

Inline editing is still a work in progress, its moving but not as fast as one would like.
Jun 17, 2013 at 12:02 AM
Where is the development for inline editing occurring exactly and who is leading the effort? I'd love to put some time and hours into this.
Developer
Jun 17, 2013 at 10:16 AM
Edited Jun 17, 2013 at 10:16 AM
I am currently the one working on it.

Project is here.. https://orchardinlineediting.codeplex.com

Documentation is here:.. https://orchardinlineediting.codeplex.com/documentation

More than welcome to join in
Jun 17, 2013 at 12:23 PM

Excellent information! Where exactly is the code at at the moment? What is the most helpful thing that I can do right now?

Developer
Jun 17, 2013 at 1:11 PM
The code is in the repository on codeplex, you just need to clone it to Orchard.InlineEditing

hg clone https://hg.codeplex.com/orchardinlineediting Orchard.InlineEditing

from there you can use it.

First thing is to download it and try an get it working.

Things outstanding off the top of my head:
  1. apply inline editable to alternates
  2. test fields work
  3. more examples.
Jun 17, 2013 at 1:54 PM
Thanks for the information Jetski. I wish I had the ability to help with coding, it's just not my area of expertise. I really like the idea of inline editing, thanks for your work on it.
Jun 26, 2013 at 2:25 AM
Hi there. I found time to get the code and start playing with it. Looks like I got it working for title and html body with your wonderful examples and documentation, The tinymce editor for the body seems to only work in IE 10 and not in chrome and firefox. Is that a known issue? Should I be trying something different?


Jul 31, 2013 at 3:39 PM
Is this still in the works? I'd really like to implement this on form-created content items to where authorized users can modify some fields on the front-end.
Developer
Jul 31, 2013 at 5:45 PM
Hey, The code still works. You jsut need to create tempaltes in your view. check out my examples within my theme.

https://github.com/Jetski5822/orchard-forum-theme/tree/master/Views/EditorTemplates
Aug 8, 2013 at 2:31 PM
Edited Aug 8, 2013 at 2:48 PM
I followed your example @ https://orchardinlineediting.codeplex.com/documentation and could not get it to work. Module enabled, I basically duplicated your example of making the title modifiable on the front-end.
  1. Module enabled.
  2. CSHTML copied and created in Theme/Views/EditorTemplates/Parts.Title.InlineEdit.cshtml
  3. Modified placement.info to read
<Match DisplayType="Detail">
    <Place PartsTitleInlineEdit="Inline:1" />
  </Match>
Am I missing anything else? This should make my title part editable anywhere on the site right?
Developer
Aug 9, 2013 at 10:08 AM
Edited Aug 9, 2013 at 10:08 AM
It looks like Mardown got confused when I posed my example.

try...
<Match DisplayType="Detail">
    <Place Parts_Title_InlineEdit="Inline:1" />
</Match>
Aug 12, 2013 at 5:10 PM
Still didn't work. Not sure what else could be wrong, I followed the example to the letter.
Aug 12, 2013 at 11:14 PM
Can you zip up your orchard folder and upload it somewhere? I have it working on my side following the online instructions.


Developer
Aug 18, 2013 at 8:41 AM
Hey CoreComps.

How are you finding it?

I have been thinking of making a dedicated module that provides templates out of the box... i.e. Orchard.InlineEditing.Templates or something like that. This means that uses would then have this out of the box rather than having the add stuff to their theme.

Do you have any suggestions or things you would like to change?

Also I am thinking of moving the project to GitHub as that is primarily where I do most of my work these days.
Aug 21, 2013 at 2:50 PM
Sorry for not replying, work has me pinned down. I am in the process of transitioning to Wordpress for my work site (still use Orchard for my personal page), so I likely won't need to use this feature for Orchard. My belief is that a feature as useful as inline editing should be tied to fields within Content Types/Definitions, which would mean a greater adoption rate for users who aren't programmers. For example, if you add a Text field, you should have a simple checkbox to "Allow Inline Editing" for that field. Anyone with a basic understanding of CMSs and/or web design could work with that and leverage a very powerful function. Since I wasn't able to get it to work I am not sure what has been done already, or how it works within Orchard. I wish you guys luck with the project and hope it continues to grow.
Aug 25, 2013 at 3:02 PM
Jetski5822 wrote:
Hey CoreComps.

How are you finding it?

I have been thinking of making a dedicated module that provides templates out of the box... i.e. Orchard.InlineEditing.Templates or something like that. This means that uses would then have this out of the box rather than having the add stuff to their theme.

Do you have any suggestions or things you would like to change?

Also I am thinking of moving the project to GitHub as that is primarily where I do most of my work these days
Jetski5822 - First it's a brilliant module so please don't take this the wrong way. The hard part appears to be done by you which is associating the updated content to content item and storing it to the database. It's a better editing experience that would make this a worth while module.

Having a set templates to support at minimum the out of the box content types from orchard would be valuable. Right now, while I can edit from the front page, it's not exactly inline....it opens a text box and disrupts the layout or view of the page and adds an area for an edit/save button. Now, I still haven't looked into it and maybe it is all in how the css is styled and some minor js changes but this is kind of what I expected when I hear inline edit:

http://www.tinymce.com/tryit/inline.php

Another alternative might be something like the WYSIWYG popup option that this page shows: http://vitalets.github.io/x-editable/demo.html

Finally, maybe the all integrated approach is all wrong and maybe the focus should be purely on a framework by exposing a set of rest services that allows authenticated users to post updates to content by content ID and field. Then theme designers could implement what ever editor they want as long as they post the content of that update to the appropriate url. To that point, the theme could add a field to content types of your choice exposing the service interface framework for easier use.

Example:

http://mysite.com/editor/content-id/field-name/
http://mysite.com/editor/cid-1451/body/

Any html posted to the url above will update the body field of the content ID 1451.

Lots of options and easy for me to be critical since I'm not the developer nor a smart enough developer to do much of it myself. On the other hand, I'm super excited to provide ideas and give guidance on how I and others would use it.
May 27 at 1:48 PM
Is this still in production? Maybe included in the next release?

If anyone could show me the latest version, I would like to take a look and maybe fix some bugs if needed?
Developer
May 27 at 5:48 PM
I have just migrated the module to Github

https://github.com/Jetski5822/Orchard.InlineEditing

The module is still in production, but I haven't looked at it for a while. Let me know if you have any questions.
Sep 7 at 4:29 AM
Hi!
I am looking for an Inline Editing Module for a customer of mine. Tried the Module from Jetski, but it didn't worked in my case. Once I installed the module (moved it to the Modules folder) I got an Exception:
Zeile 61:         // Load the log4net thread with additional properties if they are available
Zeile 62:         protected internal void AddExtendedThreadInfo() {
Zeile 63:             if (_shellSettings.Value != null) {
Zeile 64:                 ThreadContext.Properties["Tenant"] = _shellSettings.Value.Name;
Zeile 65:             }
[InvalidOperationException: ValueFactory hat versucht, auf die Value-Eigenschaft dieser Instanz zuzugreifen.]
   System.Lazy`1.CreateValue() +416
   System.Lazy`1.LazyInitValue() +152
   System.Lazy`1.get_Value() +75
   Orchard.Logging.OrchardLog4netLogger.AddExtendedThreadInfo() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\OrchardLog4netLogger.cs:63
   Orchard.Logging.OrchardLog4netLogger.WarnFormat(Exception exception, String format, Object[] args) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\OrchardLog4netLogger.cs:336
   Orchard.Logging.CastleLogger.Log(LogLevel level, Exception exception, String format, Object[] args) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\CastleLogger.cs:61
   Orchard.Logging.LoggingExtensions.FilteredLog(ILogger logger, LogLevel level, Exception exception, String format, Object[] objects) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\LoggingExtensions.cs:71
   Orchard.Logging.LoggingExtensions.Warning(ILogger logger, String format, Object[] args) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\LoggingExtensions.cs:44
   Orchard.Environment.Extensions.ExtensionLoaderCoordinator.ProcessExtension(ExtensionLoadingContext context, ExtensionDescriptor extension) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\Extensions\ExtensionLoaderCoordinator.cs:146
   Orchard.Environment.Extensions.ExtensionLoaderCoordinator.SetupExtensions() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\Extensions\ExtensionLoaderCoordinator.cs:70
   Orchard.Environment.DefaultOrchardHost.SetupExtensions() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\DefaultOrchardHost.cs:189
   Orchard.Environment.DefaultOrchardHost.BuildCurrent() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\DefaultOrchardHost.cs:104
   Orchard.Environment.DefaultOrchardHost.GetShellContext(ShellSettings shellSettings) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\DefaultOrchardHost.cs:65
   Orchard.Logging.OrchardLog4netLogger.LoadSettings() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\OrchardLog4netLogger.cs:53
   System.Lazy`1.CreateValue() +180
   System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() +22
   System.Lazy`1.get_Value() +11212537
   Orchard.Logging.OrchardLog4netLogger.AddExtendedThreadInfo() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\OrchardLog4netLogger.cs:63
   Orchard.Logging.OrchardLog4netLogger.WarnFormat(Exception exception, String format, Object[] args) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\OrchardLog4netLogger.cs:336
   Orchard.Logging.CastleLogger.Log(LogLevel level, Exception exception, String format, Object[] args) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\CastleLogger.cs:61
   Orchard.Logging.LoggingExtensions.FilteredLog(ILogger logger, LogLevel level, Exception exception, String format, Object[] objects) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\LoggingExtensions.cs:71
   Orchard.Logging.LoggingExtensions.Warning(ILogger logger, String format, Object[] args) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Logging\LoggingExtensions.cs:44
   Orchard.Environment.Extensions.ExtensionLoaderCoordinator.ProcessExtension(ExtensionLoadingContext context, ExtensionDescriptor extension) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\Extensions\ExtensionLoaderCoordinator.cs:146
   Orchard.Environment.Extensions.ExtensionLoaderCoordinator.SetupExtensions() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\Extensions\ExtensionLoaderCoordinator.cs:70
   Orchard.Environment.DefaultOrchardHost.SetupExtensions() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\DefaultOrchardHost.cs:189
   Orchard.Environment.DefaultOrchardHost.BuildCurrent() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\DefaultOrchardHost.cs:104
   Orchard.Environment.DefaultOrchardHost.BeginRequest() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\DefaultOrchardHost.cs:229
   Orchard.Environment.DefaultOrchardHost.Orchard.Environment.IOrchardHost.BeginRequest() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard\Environment\DefaultOrchardHost.cs:80
   Orchard.Web.MvcApplication.HostBeginRequest(HttpApplication application, IOrchardHost host) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard.Web\Global.asax.cs:38
   Orchard.WarmupStarter.Starter`1.OnBeginRequest(HttpApplication application) in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard.WarmupStarter\Starter.cs:68
   Orchard.Web.MvcApplication.Application_BeginRequest() in c:\DEV\Orchard Projects\wenigzell 1.8.1 dev\src\Orchard.Web\Global.asax.cs:29

[TargetInvocationException: Ein Aufrufziel hat einen Ausnahmefehler verursacht.]
   System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, Signature sig, Boolean constructor) +0
   System.Reflection.RuntimeMethodInfo.UnsafeInvokeInternal(Object obj, Object[] parameters, Object[] arguments) +192
   System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture) +155
   System.Reflection.MethodBase.Invoke(Object obj, Object[] parameters) +19
   System.Web.Util.ArglessEventHandlerProxy.Callback(Object sender, EventArgs e) +56
   System.Web.SyncEventExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +136
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +69
I have no idea whats wrong and there is no entry in the logfile. When I removed the folder, everything works fine.

So I keep digging and found another module: https://github.com/matiasmolleja/Orchard.InlineEditing

It looks really promising to me. Still a few problems, but with a few changes I adopted it to my needs (My fork: https://github.com/benschi11/Orchard.InlineEditing). Inline edit for Titlepart, Bodypart and Widgets are working in case you haven't some custom overrides for one of these parts. The problem in my case is, that the module renders its own shape for the titlepart. So I have to found a solution for that.
Developer
Sep 7 at 7:59 AM
Edited Sep 7 at 7:59 AM
Whoah, never seen that error!!... I just upgraded the module for 4.5.1 - like 5 minutes ago - but am having issues with TinyMCE.

The Goal of the two modules are different from what I can see. The Idea behind my one was that you would not need to change any internal code in order for you to create inline editable shapes. The system is built on convention, i.e. you just create a file called "Parts.Common.Body.InlineEdit.cshtml" in your theme, add the necessary inline editable cruft to it and you are good to go, same applies to any shape. The smallest about on code in that example would be
@using (Html.InlineEdit(this)) {
    @Display.Body_Editor(viewModel)
}
The module would then wire everything else up, obviously there would be some shapes out of the box that would just work for you.

The goal of the other module it seems would be to provide only what the controller is capable of, the controller dictates what shapes the editor can use. Which in your instance works, and the module its self is neat, but for me is way to limiting.
Developer
Sep 7 at 4:55 PM
Edited Sep 7 at 4:55 PM
Okay, so I pushed a bunch of updates this morning. It is based on the tip of the 1.x branch.

TinyMCE is working nicely, and so is the default editor. Markdown is plugged in, but needs some work.
Sep 10 at 1:42 AM
Hi!

Sorry for my late reply. Work is keeping me bussy - so i didn't have time to try it again. But thank you for your checkin.
Your Module is now working partially (I think it is only some missing *.js Files from TinyMCE - will check that later) and I really understand you know. Your solution is much generic than the other module - and I like it. But I also like the look and feel from the other module (nice TopBar, you can edit multiple things and save with one click). Maybe I am able to combine that - but I am not sure whats the best way. Create a own module that depends on yours or make the whole staff inside the Theme?!?

Any suggestions?

Thanks
Developer
Sep 10 at 7:23 AM

The top bar givens a nice context and my initial start had that.

What do you see being on it? Saving options?

- create a draft... Or publish
- publish button if it is a draft
- view version X

What else?

Sep 10 at 2:47 PM
Edited Sep 15 at 9:57 PM
Hi!

I'm not sure if you should able to create new ContentItems on the FrontEnd. In my case I prefer edit the already published content. I really like the workflow of the other module in this case.

Let me try to explain:
  1. The User comes to the site and logged in. Then the TopBar appears, but he can't edit anything.
    Image
  2. He must enable the EditorMode. This mode enables all the editable content (like in your module the "Edit"-Wrapper for each Part does).
    Image
  3. With a click on the editable content he can edit it. All changed Parts are counted but not send to the server. By clicking the "Save"-Button all changed content send to the server and gets updated. With cancel the old content gets restored and nothing changed in the database.
    Image
Edit: Pictures in better Quality: Here

I will think about additional Buttons on the bar, but for now thats only my needs.
Sep 11 at 8:37 AM
Hi,
I'm glad you like my little module!.
Yes, I know it's limiting and not extensible. This is because I'm not very good in understanding how everything works in orchard, shame on me :(
And yes , it provides a good user experience. This is because I started deciding the user experience I wanted without worrying too much about how I can achieve it in server side code (Not the orchard way of doing things).
I'd like to see an inline editing module for orchard with a solid an extensible foundation, being at the same time pleasant and productive for the end user.

Nick, if you think I can be of any help on that, please let me know :)
Sep 15 at 10:28 PM
Edited Sep 15 at 10:49 PM
Hi,
I tried to integrate the Module from Nick into my project and after some effort (including a short study into knockout :) ) I got almost what I need. Titlepart and Bodypart is now editable with InlineEditing (TinyMce).
I created new *.js Files in my theme and uses the "editorPrepared" and "getContent" events from the knockout Viewmodel to achieve my goals.

I really like this Module!!

Unfortunately I run into my next problem (with I solved with a kind of hack for the first time :)) - the medialibrary.

The Medialibrary does not work from outside the Adminpanel because the tinymce plugin builds the url like that:
 var adminIndex = location.href.toLowerCase().indexOf("/admin/");
 if (adminIndex === -1) return;
 var url = location.href.substr(0, adminIndex) + "/Admin/Orchard.MediaLibrary?dialog=true";
My hack at the moment is (and only works if orchard is installed on a toplevel-domain):
 var adminIndex = location.href.toLowerCase().indexOf("/admin/");
 if (adminIndex === -1) adminIndex = window.location.origin.length;
 var url = location.href.substr(0, adminIndex) + "/Admin/Orchard.MediaLibrary?dialog=true";
Do anyone has suggestions to make this work (a lot cleaner)?

Edit:
I think I found a solution myself. Replaced the three lines of code with:
var url = ed.documentBaseUrl + "/Admin/Orchard.MediaLibrary?dialog=true";
Edit2:
Interesting - a Plus got replaced by + :/
Developer
Sep 15 at 10:48 PM
Hey Benschi11,

Glad you like the module, that btw is not Knockout :) - just regular JS and some jQuery... I hope you havent run in to too many issues. I have some things I want to add to make it a little slicker, but all in time.

RE: Media - I have had the same conundrum when building the Forum module, how do you insert media from outside of the admin!?. Honestly I don't have an answer at the moment.

The idea I had was to maybe provide a Front End implementation for the Media Library... That way, you just say I want the adminmedialibrary or the frontendmedialibrary.... not sure, @Sebastien, what do you think?

N
Sep 15 at 10:57 PM
Yeah, right. I mixed things up (knockout was because of the project from mmolleja).

I am sure, but with the change from my last post in the medialibrary plugin it is working for me.

I may also found a little bug in your js. If I Edit an BodyPart - cancel it and re-edit it, the editor doesn't show up. I think you need to remove the editor in the onCanceling event from this element.

I do this in my js:
    $inlineedit.bind(inlineedit.events.onCancelling, function (event, shape, shapeEditor) {
        var editorFieldId = $(shapeEditor).find(".tinymce").attr("id");
        tinymce.get(editorFieldId).remove();
    });
Developer
Sep 15 at 11:08 PM
Good call... we should always un-initialize the editor on cancel. Is the shapeEditor the right object to use? (I don't remember which is which) - I will take a look at the code tomorrow and see if I can wire this up for you.

Any hey! let me know if you find anything else! N

Sep 15 at 11:50 PM
Edited Sep 16 at 12:18 AM
Hi!

I also changed the "retrieveContent" - Event a little bit. Now it uses the right editor even if you lose focus and press save (now I can trigger the initEditor and the save-process from one place - like a toolbar).

TinyMce has also the possibility to check if an item is dirty. I use this now only for "don't copy the values" but we should think about using it for "not sending this part to the controller". Maybe we can use a attribute in $inlineedit, that can be set during the event - like "$inlineedit.needsUpdate=false;" or something like that. But I am not very into in JS design patterns and stuff - so maybe you got something more elegant.
  $inlineedit.bind(inlineedit.events.retrieveContent, function (event, scope, shapeEditor) {
        console.log('Processing Content: TinyMce Editor');

        if (tinymce != undefined) {
            console.log('Processing Content: TinyMce Editor triggering save');
            var editorFieldId = $(shapeEditor).find(".tinymce").attr("id");
            var editor = tinymce.get(editorFieldId);
            if (editor.isDirty()) {
                var afterContent = editor.save();
                $('#' + editor.id).parent('form').children('textarea').val(afterContent);
            }

            console.log('Processing Content: TinyMce Editor triggering saved');
        }

        console.log('Processed Content: TinyMce Editor');
    });
If you need help or wanna talk about the module feel free to add me on skype (same name as my nickname).

Thanks!
Developer
Sep 20 at 10:38 AM
Hey,

Was just going to start to take a look at what you have done, have you pushed all your updates?

Have you made any more updates?

N
Sep 20 at 11:14 AM
Hi Nick,
My last changes in github are in branch 0.8.3.
The module in the gallery is up to date.
Let me know if I can help :)

Matías