{"issue":{"milestone":null,"user":{"id":156036,"login":"danshryock","url":"https://api.github.com/users/danshryock","avatar_url":"https://secure.gravatar.com/avatar/17dad443f8de6e869664f9da8f1ba9f4?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"17dad443f8de6e869664f9da8f1ba9f4"},"title":"Image paste support for google chrome on wiki pages (working code attached)","created_at":"2011-12-01T16:16:33Z","labels":[],"updated_at":"2011-12-17T14:11:56Z","state":"open","id":2416340,"html_url":"https://github.com/a-ono/redmine_ckeditor/issues/11","closed_at":null,"pull_request":{"patch_url":null,"html_url":null,"diff_url":null},"body":"Below is a script that I have put in place to enable pasting images into wiki pages using google chrome.\r\n\r\nIt listens for paste, uploads the image as an attachment, parses the response html for the url, then inserts an image tag into the editor.\r\n\r\nI am not familiar with redmine / rails, so I integrated it in to my install via the theme.js for the skin I am using.\r\n\r\nI thought it'd be nice if you could integrate this into the default plugin.\r\n\r\n```javascript\r\n//mime helpers\r\nfunction mimeBoundary() { return \"MULTIPARTMIME--------------\" + (new Date).getTime(); }\r\nfunction buildMultipartMimeMessage(elements, boundary) {\r\n\tvar CRLF = \"\\r\\n\";\r\n\tvar parts = elements.map(function(element) {\r\n\t\tif (element.type == \"file\") {\r\n\t\t\treturn (\r\n\t\t\t\t'Content-Disposition: form-data; ' +\r\n\t\t\t\t'name=\"' + element.name + '\"; ' +\r\n\t\t\t\t'filename=\"'+ element.filename + '\"' + CRLF +\r\n\t\t\t\t\"Content-Type: \" + (element.contentType || \"application/octet-stream\") +\r\n\t\t\t\tCRLF + CRLF +\r\n\t\t\t\telement.value + CRLF\r\n\t\t\t);\r\n\t\t} else {\r\n\t\t\treturn (\r\n\t\t\t\t'Content-Disposition: form-data; ' +\r\n\t\t\t\t'name=\"' + element.name + '\"' + CRLF + CRLF +\r\n\t\t\t\telement.value + CRLF\r\n\t\t\t);\r\n\t\t}\r\n\t});\r\n\t\r\n\treturn (\r\n\t\t\"--\" + boundary + CRLF +\r\n\t\tparts.join(\"--\" + boundary + CRLF) +\r\n\t\t\"--\" + boundary + \"--\" + CRLF\r\n\t);\r\n}\r\n\r\nEvent.observe(document, \"dom:loaded\", function() {\r\n\tvar isChrome12 = (parseInt( ( window.navigator.appVersion.match(/Chrome\\/(\\d+)\\./) || [0] )[1]) >= 12)\r\n\tvar isWikiEdit = window.location.href.indexOf(\"/wiki\") != -1 && window.location.href.indexOf(\"/edit\") != -1;\r\n\tif(isChrome12 && isWikiEdit) {\r\n\t\t//patch chrome to support send as binary...\r\n\t\tXMLHttpRequest.prototype.sendAsBinary = XMLHttpRequest.prototype.sendAsBinary || function(datastr) {\r\n\t\t\tvar ui8a = new Uint8Array(datastr.length);\r\n\t\t\tfor (var i = 0; i < datastr.length; i++)\r\n\t\t\t\tui8a[i] = (datastr.charCodeAt(i) & 0xff);\r\n\t\t\tthis.send(ui8a.buffer);\r\n\t\t}\r\n\t\t\r\n\t\tCKEDITOR.on('instanceCreated', function (e) { e.editor.on(\"instanceReady\", function(e){ BindEditorPaste(e.editor) }); });\r\n\t}\r\n\t\t\r\n});\r\n\r\nfunction BindEditorPaste(editor){\r\n\tvar clipboardFilename = null;\r\n\tvar xhr = new XMLHttpRequest();\r\n\txhr.onreadystatechange = function(){\r\n\t\tif (xhr.readyState != 4 || xhr.status != 200)\r\n\t\t\treturn;\r\n\r\n\t\tvar responseHtml = xhr.responseText || \"\";\r\n\t\t\r\n\t\t//try to find the domain rooted url to the image so we can insert it\r\n\t\tvar match = new RegExp(\"href=\\\"(.*)/\"+clipboardFilename.replace(\".\",\"\\\\.\")).exec(responseHtml);\r\n\t\tif(match != null){\r\n\t\t\teditor.insertHtml(\"<img src='\"+match[1]+\"/\"+clipboardFilename+\"' alt='\"+clipboardFilename+\"' title='\"+clipboardFilename+\"' />\");\r\n\t\t} else {\r\n\t\t\teditor.insertHtml(\"<img src='\"+clipboardFilename+\"' alt='\"+clipboardFilename+\"' title='\"+clipboardFilename+\"' />\");\r\n\t\t}\r\n\t}\r\n\t\r\n\teditor.document.$.addEventListener(\"paste\",function(evt) {\r\n\t\tvar found = false;\r\n\t\tvar items = (evt.originalEvent || evt).clipboardData.items;\r\n\t\tfor (var i = 0; i < items.length; i++) {\r\n\t\t\tif (items[i].type.indexOf(\"image/\") == -1)\r\n\t\t\t\tcontinue;\r\n\t\t\r\n\t\t\tfound = true;\r\n\t\r\n\t\t\tvar authenticity_token = $$('[name=\"authenticity_token\"]')[0].value;\r\n\t\t\tvar uploadUrl = window.location.href.replace(\"/edit\",\"/add_attachment\");\r\n\t\t\tvar description = \"from clipboard\";\r\n\t\t\tclipboardFilename = \"clipboard-\"+(new Date()).getTime()+\".png\";\r\n\t\r\n\t\t\t//use manual mime messages instead of using formdata because formdata doesn't support filename yet...\r\n\t\t\tvar reader = new FileReader();\r\n\t\t\treader.onload = function(){\r\n\t\t\t\tvar formFields = [\r\n\t\t\t\t\t{name:\"attachments[1][file]\",type:\"file\",contentType:\"image/png\",filename:clipboardFilename,value: reader.result},\r\n\t\t\t\t\t{name:\"attachments[1][description]\",value: description},\r\n\t\t\t\t\t{name:\"authenticity_token\",value:authenticity_token},\r\n\t\t\t\t\t{name:\"commit\",value:\"Add\"}\r\n\t\t\t\t];\r\n\t\t\t\t\r\n\t\t\t\tvar boundary = mimeBoundary()\r\n\t\t\t\txhr.open(\"POST\", uploadUrl);\r\n\t\t\t\txhr.setRequestHeader(\"Content-Type\", \"multipart/form-data; boundary=\" + boundary);\r\n\t\t\t\txhr.sendAsBinary(buildMultipartMimeMessage(formFields,boundary));\r\n\t\t\t};\r\n\t\t\treader.readAsBinaryString(items[i].getAsFile());\r\n\t\t\t/*\r\n\t\t\tvar formData = new FormData();\r\n\t\t\tformData.append(\"attachments[1][file]\", items[i].getAsFile(), clipboardFilename);\r\n\t\t\tformData.append(\"attachments[1][description]\", description);\r\n\t\t\tformData.append(\"authenticity_token\",authenticity_token)\r\n\t\t\tformData.append(\"commit\",\"Add\");\r\n\t\t\txhr.open(\"POST\", uploadUrl);\r\n\t\t\txhr.send(formData);\r\n\t\t\t*/\r\n\t\t}\r\n\t\r\n\t\tif (found) return false;\r\n\t});\r\n}\r\n```","number":11,"url":"https://api.github.com/repos/a-ono/redmine_ckeditor/issues/11","comments":8,"assignee":null},"comment":{"user":{"id":393286,"login":"cforce","url":"https://api.github.com/users/cforce","avatar_url":"https://secure.gravatar.com/avatar/6e8891e4cf614d35fee0b45aa4be4c25?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"6e8891e4cf614d35fee0b45aa4be4c25"},"created_at":"2011-12-17T14:11:47Z","updated_at":"2011-12-17T14:11:47Z","id":3189517,"body":"My theme code is working fine with regular jquery, but as ssons as i add the image paste support for chrome i run into the problem. Which line i shall remove, in don't exactly understand what the cause is? . ","url":"https://api.github.com/repos/a-ono/redmine_ckeditor/issues/comments/3189517"},"action":"created"}