Redactor: Image Upload Standalone?

Question

We're using redactor as the editor in our CMS and users are very comfortable with the image select/upload functionality in it.

Usually redactor is activated by calling the redactor method on the needed text field, and this is great. What I would like to do is the use the image drag and drop upload/select outside of a redactored text field as well. I would like to use it on all the places on this site where the user is selecting an image.

Has anyone had success directly hooking into this functionality?

Thanks,

Answer 1

Ok, I think this is what you are looking to do:

$('image-upload-tag').redactor({
    allowedTags: ['img'],  // We only want images
    buttons: ['image'],  // Only display the image button in the toolbar
    placeholder: "Drop images here…",  // Just to give some user info
    focusCallback: function() {
        // This stops the caret from being visable, it’s not necessary
        // but stops it looking like the user should be able to type.
        this.getEditor().css('color', 'transparent');
    },
    keydownCallback: function(e) {
        // Loose focus everytime a key is pressed.
        this.getEditor().blur();
    }
});

Basically, set up the redactor area as you normally would. I’ve set some limitations on the allowed tags and the buttons to display in the toolbar. As not to confuse the end-user I’ve added the placeholder & made the blinking caret transparent. You should probably do the transparent bit in css rather than in here.

The keydownCallback is the function that actually prevents any text from being added. It’s quite simple really; just removes the focus away from the element anytime a key is pressed. this.getEditor returns the editable Redactor area & so blur() can be applied. This still allows for other actions (keybinding, image drops etc) to work normally.

Let me know if that’s not what you were looking.