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,

Thanks Ken. I edited my question to try to be more clear. Redactor is installed and will be live on the pages, often already activated on a text field on the same form, but I'd like to hook into the image capabilities built into redactor and use it on input fields as well — Peck
Peck, are you wanting the images to be inserted into the main redactor editor or are you just wanting to use additional redactor instances to upload images to the server? — roj
Additional redactor instances to upload images, no text editing, just the image upload/choose modals. — Peck

roj roj · Accepted Answer · 2014-01-19T03:02:22

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.

Redactor: Image Upload Standalone?

1 Answers