This project is read-only.

How to customize the "Add Widget" Area

Topics: Customizing Orchard
Jan 28, 2016 at 8:21 PM
Edited Jan 28, 2016 at 8:25 PM

I am very new to the use of Orchard. I installed Web Matrix 3 and added Orchard CMS to it.
My question is :
For example -
When i am trying to add a Widget - "Add Widget" Page - How can i edit this page to work a little differently?
If i want to add an option to be able to drag an image inside the html editor and then upon "saving" for it to show up on the position i dragged it to ( inside the editor )
How or Where can i do that?

Thanks in advance!
Feb 5, 2016 at 11:07 PM
It sounds like you are looking to change something about the HTML editor (TinyMCE by default), not so much the "Add Widget" page itself (but please correct me if I'm wrong).

To customize the HTML editor (TinyMCE), you would first need to override the Body editor shape template for the Html flavor. This shape template exists in the TinyMce module's Views folder, so you could simply copy that over. Then you'll need to modify this TinyMCE such that it accepts and handles dropped images. This involves handling some JavaScript event maybe, or at the very least configuring some URL that will handle the upload. This URL should point to a custom controller action from where you would use the media library services provided by the Orchard.MediaLibrary module.

When working on this customization, you'll want to work with the full source Orchard solution, because then you'll be able to discover how things such as the media library services are used by checking out the source code of that module.

A good example of how to customize TinyMCE is this module: