Search code examples
c#asp.netimagedirectoryfckeditor

Fckeditor To Upload Images From Specific Folder


I am working with fckeditor and it installed successfully in the project.

I've a requirement where I've got to upload images from specific folder in the project say 'Images' and did so. But there is one issue. If I upload files from specific folder, it gets uploaded but whenever I upload images from another source like from C drive or others, even they also show up.

I would like to restrict the images to be uploaded from specific folder, not from any other source. Is it possible to do it in the editor or any plugin? Below is a snapshot that is happening right now:

https://s32.postimg.org/fe0cnewxh/demo.png

By the way, it is a web application and using ASP.NET C#.


Solution

  • I was able to resolve the issue. I just added the following code to disable the drag and drop option in the ckeditor:

    CKEDITOR.plugins.add('dropoff', {
    init: function (editor) {
    
        function regectDrop(event) {
            event.data.preventDefault(true);
        };
    
        editor.on('contentDom', function () {
            editor.document.on('drop', regectDrop);
         });
       }
    });
    

    In the plugin folder, I created a new folder 'dropoff' and a new js file to include the above code. Then finally in the config.js file, added the below:

     config.extraPlugins = 'dropoff';
    

    By the way, I am handling the image upload externally and including them with the ckeditor JavaScript API and jQuery in the editor like the below:

     var editor = CKEDITOR.instances.<%=aboutTextBox.ClientID %>;
     var html = "<img src='" + $(this).attr("imgsrc") + "' />";
    
     var newElement = CKEDITOR.dom.element.createFromHtml(html, editor.document);
     editor.insertElement(newElement);
    

    I did the above as I was not interested to include images from any other source except a specific folder.