CKEditor and ElFinder.Net Connector integration.

Jun 26, 2013 at 4:55 PM
Can you suggest any idea for integration CkEditor with ElFinder.Net Connector in ASP.NET MVC applications.
I google how to do it but it most do with php.
Coordinator
Jun 26, 2013 at 11:47 PM
Edited Jun 27, 2013 at 12:00 AM
Hi, I found an information about intergation at https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor and it's not only for php, because all integration things doing on the client's side.
At first, please update Elfinder connector from source control. I found and fix some small bugs in connector when prepare answer for you.
Use the following instruction:
1) Add new action and view for your CKEditor. Or you can modify existing view. For example:
//IndexController.cs
public ActionResult CKEditor()
{
     return View();
}
You need to add a property 'filebrowserBrowseUrl' which referred to page with your elfinder file manager.
//CKEditor.cshtml
<script src="@Url.Content("~/Content/ckeditor/ckeditor.js")"></script>
<textarea name="editor1">Hello, Elfinder!</textarea>
<script>
    CKEDITOR.replace('editor1', { filebrowserBrowseUrl: '@Url.Action("Index")' }); 
</script>
2) Modify view with your elfinder configuration:
<script type="text/javascript">
        function getUrlParam(paramName) {
            var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i');
            var match = window.location.search.match(reParam);
            return (match && match.length > 1) ? match[1] : '';
        }

        $(function () {
            var funcNum = getUrlParam('CKEditorFuncNum');
            var options = {
                url: 'connector',
                lang: 'en',
                getFileCallback: function (file) {
                    var url = file.url;                    
                    if(url.slice(0, options.url.length) == options.url)
                        url = '/' + url;
                    window.opener.CKEDITOR.tools.callFunction(funcNum, url);                    
                    window.close();
                },
            };
            $('#elfinder').elfinder(options).elfinder('instance');
        });
    </script>
3) That's all. Now you can press button 'Insert Image' in CKEditor and in popup you can see button 'Browse Server', which will launch elfinder filemanager.

Of course remember about property 'IsShowOnly' in Root. If you set it to 'true' and do not set 'RootUrl', than you can not see you images beyond filemanager, because nobody can't download them.


Regards,
Evgeny Noskov
Jun 27, 2013 at 5:01 AM
Hi .

I saw that topic on wiki but i don't understand elfinder.html mean , now i got it.

Thanks you very much,