This project is read-only.

Integrating the media library with CKEditor

Topics: Writing modules
Oct 29, 2013 at 3:44 AM
I'm investigating whether it would be feasible to integrate the orchard media library with CKEditor. I haven't found much information about doing this so perhaps it's not possible?

The media library exposes a URL for browsing media at /Admin/Orchard.MediaLibrary. The tiny_mce editor adds a ?dialog=true parameter.

I tried a very naive thing and set a CKEditor option to the following:

filebrowserBrowseUrl: '/Admin/Orchard.MediaLibrary?dialog=true'

Unfortunately the dialog=true parameter is removed and the admin menu appears alongside the media browser.

Has anyone else out there tried to integrate the media library with CKEditor? Any guidance at all would be much appreciated. I'm wondering whether I'd need to fork the media library module and hack it.

The new media browser is very nice BTW, well done all.
Jan 15, 2014 at 1:03 PM
Edited Jan 15, 2014 at 1:08 PM
The Media Library integration is a bit hacky. The dialog=true is not enough. You need to embed it in a jQuery Colorbox to have the desired result. And you have to embed the library selector yourself. I think that was an hack for TinyMce.
So, it has to be a modal dialog. Very good, but CKEditor want it to be a popup, and there is no documented way in CKEditor to use a modal filebrowser. So you have to hack a bit inside CKEditor.
I have just done that, and I am doing the final touches. Tomorrow, I hope, I will publish the result on Orchard Gallery. It is called LuDC.CKEditor, and it just adds Media Library to the old, abandoned, CKEditor module. Apart from updating to CKEditor 4.3, which was a no brainer.