2

2

Chrome 12+ has made it possible to paste images into the browser. I've written a bugmonkey script to insert images into fogbugz cases by pasting them (I haven't tested this much -- it may be ridden with bugs.) I'll include that below for those interested... (note: the data in the clipboard has to be an image.. so if you copy a bunch of text from a word document AND an image, it doesn't work, the data in the clipboard doesn't contain an image.)

What I don't have working is pasting images into wiki pages. With the code below, the image gets inserted and uploaded to the same place they do for cases (which is NOT the same as where the images go when you upload in the wiki page.) When I save the page, the image HTML gets replaced with

<img border="0" />&nbsp;

Is FogBugz stripping images that don't have URLs like the ones inserted by the wiki insert image function? If so -- I'll work on having the script upload them to the same place the wiki insert image is posting them to, but the URL includes an action token...

name:          CaseImagePaste
description:   Allows Chrome 12+ to paste an image into a html case edit and wiki page
author:        Dio, James
version:       1.0.0.2

js:

var pasteImageXhr;
function getCurrentCK() {
    if (typeof (CKEDITOR) != "undefined") {
        if (typeof (CKEDITOR.instances.sEventEdit) != "undefined") return CKEDITOR.instances.sEventEdit;
        else if (typeof (CKEDITOR.instances.sBody) != "undefined") return CKEDITOR.instances.sBody;
    }
    return null;
}
function imagePasteOnPaste(evt) {
    var imagesFound = false;
    var event = evt.originalEvent;
    if (getCurrentCK() != null) {
        var items = event.clipboardData.items;
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image/") != -1) {
                imagesFound = true;
                var blob = items[i].getAsFile();
                var fdata = new FormData();
                fdata.append("File1", blob);
                var uploadUrl;
                if (window.location.href.indexOf("pg=pgEditBug") != -1)
                    uploadUrl = window.location.origin + window.location.pathname + "?fAlaCarte=1&fPictureUpload=1&pre=preBugEventUpload";
                else if (typeof(g_ixWikiPage) != "undefined")
                    uploadUrl = window.location.origin + window.location.pathname + "?fAlaCarte=1&fPictureUpload=1&pre=preWikiUpload&sActionToken=" + g_ActionTokens.getToken("preWikiUpload") + "&ixWiki=" + g_ixWiki + "&ixWikiPage=" + g_ixWikiPage;
                pasteImageXhr.open("POST", uploadUrl);
                pasteImageXhr.send(fdata);
            }
        }
    }
    if (imagesFound) return false;
}
$(document).ready(function () {
    pasteImageXhr = new XMLHttpRequest();
    function enableImagePaste() {
        var version = window.navigator.appVersion.match(/Chrome\/(\d+)\./);
        return version && (parseInt(version[1]) >= 12)
        && (window.location.href.indexOf("pg=pgEditBug") != -1 ||
        window.location.href.indexOf("command=edit") != -1 ||
        getCurrentCK() != null);
    }
    if (enableImagePaste()) {
        function pastedImageCallback() {
            if (pasteImageXhr.readyState != 4 || pasteImageXhr.status != 200) {
                return;
            }
            var xmlRes = pasteImageXhr.responseXML;
            getCurrentCK().insertHtml(xmlRes.getElementsByTagName("sHTML")[0].firstChild.nodeValue);
        }
        pasteImageXhr.onreadystatechange = pastedImageCallback;
        function bindPasteInCK() {
            $("iframe").contents().find("body").bind('paste', imagePasteOnPaste);
        }
        if (getCurrentCK() != null) {
            bindPasteInCK();
            getCurrentCK().on("instanceReady", bindPasteInCK);
        }
        CKEDITOR.on('instanceCreated', function (e) {
            e.editor.on("instanceReady", bindPasteInCK);
        });
    }
});

I've updated the code so that it'll work any time a ckeditor is present (including new wiki pages)

flag

4 Answers

1

I have figured it out... using the correct upload URL I'm able to paste images into the wiki and the images remain.

I've updated the BugMonkey script above.

link|flag
0

What should the URL be updated to ?

link|flag
0

The script works when i open a new case and paste an image into it. When i try to paste the same image in an existing case it does not work. Nothing gets pasted. wonder why ??

link|flag
0

This doesn't seem to be working for wiki pages (at least not now). I'm using Chrome 15+ and can paste images into case pages fine (fyi: from word, paint.net, etc.) but not at all into wiki pages.

Am I missing something?

update: I found that it doesn't work on a -new- wiki page, but if I edit an existing page it does.

Hmmm, I'm wondering if when using a new page that maybe the target for the image non-existant?

link|flag
New wiki pages should work with the version I just updated to. – James Dio Jan 27 2012 at 17:57

Your Answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.