How to upload and insert an image

This [b]is[/b] [color=#ff0000]a[/color] [size=3]demo[/size] :).

Code behind

Quite a few people have asked how to upload and insert images into the editor so I've decided to make this little demo with the ImageShack API.

All that's really needed to insert an image is to call wysiwygEditorInsertHtml() or even just insert() on an editor instance. insert() accepts BBCode if using the BBCode plugin, otherwise it accepts HTML.

Setup the editor & upload form

<script>
$(function() {
    $("textarea").sceditor({
		format: 'bbcode',
        style: '/minified/themes/content/default.min.css',
    });

    // Save this editor instance so the iframe can access it
    window.sceditorInstance = $("textarea").sceditor("instance");
});
</script>

<textarea></textarea>

<form action="https://www.imageshack.us/redirect_api.php" method="post" enctype="multipart/form-data" target="upload">
    <p><label>Image: <input type="file" name="media" /></label></p>

    <p><label>Resize Image? <input type="checkbox" name="optimage" id="optimage" value="1" checked onclick="optsize.disabled=!this.checked"></label></p>

    <p><label>Size: <select name="optsize" id="optsize">
        <option value="resample">optimize without resizing</option>
        <option value="100x100">100x75 (avatar)</option>
        <option value="150x150">150x112 (thumbnail)</option>
        <option value="320x320">320x240 (for websites and email)</option>
        <option value="640x640">640x480 (for message boards)</option>
        <option value="800x800">800x600 (15-inch monitor)</option>
        <option value="1024x1024">1024x768 (17-inch monitor)</option>
        <option value="1280x1280">1280x1024 (19-inch monitor)</option>
        <option value="1600x1600">1600x1200 (21-inch monitor)</option>
    </select></label></p>

    <input type="hidden" name="key" value="DEVELOPER_KEY_HERE" />
    <input type="hidden" name="rembar" value="yes" />
    <input type="hidden" name="error_url" value="https://example.com/imageshack-example.html" />
    <input type="hidden" name="success_url" value="https://example.com/imageshack-example.html?url=%u&server=%s&bucket=%b&filename=%i" />

    <p><input type="submit" value="Upload" /></p>
</form>
<iframe style="visibility: hidden; height: 0; width: 0" id="upload" name="upload"></iframe>

imageshack-example.html - Page redirected to by the ImageShack API. This will insert the HTML or show the error message.

imageshack-example.html

<script>
// Query strnig parser source: http://stevenbenner.com/2010/03/javascript-regex-trick-parse-a-query-string-into-an-object/
var queryString = {};
window.location.search.replace(
    new RegExp("([^?=&]+)(=([^&]*))?", "g"),
    function($0, $1, $2, $3) { queryString[$1] = $3; }
);

if(queryString.url)
{
    var img_url = "https://" +
        queryString.server + ".imageshack.us/img" +
        queryString.server + "/" +
        queryString.bucket + "/" + queryString.filename;

    var html = "<a href=\"" + queryString.url + "\">" +
            "<img src=\"" + img_url + "\" alt=\"Uploaded Image\" />" +
        "</a<";

    // This called wysiwygEditorInsertHtml on the parent windows
    // SCEditor instance
    parent.window.sceditorInstance.wysiwygEditorInsertHtml(html);
}
else if(queryString.message)
    alert(queryString.message);

</script>

When upload form is submitted, it will upload the image to ImageShack via the iframe. Once uploaded ImageShack will then redirect within the iframe to the imageshack-example.html file which will handle inserting the image or showing the error.