locked
Fckeditor Drag and Drop Option RRS feed

  • Question

  • User-698989805 posted

    Hello friends! I've installed Fckeditor 3.6.6.2 in a project and it works fine. I can drag a picture and drop in the editor. But I am expecting to include the following feature in the editor:

    Is it actually possible to do or any way specifically for putting the images in the editor? I would expect some suggestions or ideas from the experts. Thanks.

    Thursday, July 7, 2016 9:37 AM

Answers

  • User-698989805 posted

    Hello! I was able to resolve the issue in a different way. 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';

    I am handled 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 8, 2016 7:28 PM

All replies

  • User36583972 posted

    Hi TechView,

    From your description, you can refer the following links. They may be helpful for you.

    A drag and drop Image upload plugin for CKEditor:

    https://github.com/chriskiehl/Dropler

    FCKEditor file upload config:

    https://www.drupal.org/node/207624

    Best Regards,

    Yohann Lu

    Friday, July 8, 2016 6:46 AM
  • User-698989805 posted

    Hello Yohann Lu! Thanks for the solution though it is not the expected one. By the way, I am trying to accomplish another task. I've a requirement where I've to upload images from a specific folder say 'Images' in the project and got it work. But another issue is when I upload image from another source like C drive or desktop, it shows up in the project. I like to restrict the image upload only from the 'Images' folder in the project, not from in any other source. Is it possible to do in the fckeditor or any other way? Hoping to have your valuable suggestion. Thanks.

    Friday, July 8, 2016 4:43 PM
  • User475983607 posted

    TechView

    I like to restrict the image upload only from the 'Images' folder in the project, not from in any other source. Is it possible to do in the fckeditor or any other way?

    It is not possible for a web page to restrict the source file path on the client.  Besides, how could you possibly know where the project folder exists on the client's machine?

    Friday, July 8, 2016 5:05 PM
  • User-698989805 posted
    Hello mgebhard! Thanks for the reply and yes, it is not possible to do anything on client side. But could I restrict something on server-side like if the images are not from the specific folder, then the content will show up except the images? I've been thinking about it for a while but will it be an appropriate one? Now suppose, I am running the project from localhost and upload any images from PC in the editor, it gets displayed. This is the issue.
    Friday, July 8, 2016 5:54 PM
  • User475983607 posted

    But could I restrict something on server-side like if the images are not from the specific folder, then the content will show up except the images?

    I'm pretty sure the file path is not part of the file upload.  Only the file name is submitted to the server. 

    Now suppose, I am running the project from localhost and upload any images from PC in the editor, it gets displayed. This is the issue.

    I'm not sure what problem you are describing or trying to solve.

    Friday, July 8, 2016 7:00 PM
  • User-698989805 posted

    Hello! I was able to resolve the issue in a different way. 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';

    I am handled 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 8, 2016 7:28 PM