
I modded
Taskfreak a bit to make it more convenient to use...
all the code with nice syntax highlighting:
https://gist.github.com/3949777minimal change: making description box bigger
./skins/redfreak/css/freak.css : 608
< height: 170px;
> height: 270px;
adding Wysiwyg editor for description box
...elRTE editor with additional image upload from clipboard
new file: ./upload_image.php
<?php
include '_common.php';
/* --- INIT ----------------------------------------------------------- */
include 'SimpleImage.class.php';
if (is_uploaded_file($_FILES["file"]["tmp_name"])) {
$img = new SimpleImage();
$img->load($_FILES["file"]["tmp_name"]);
$img->resizeToMaximum(450, 450);
$fn=time()."_".$_FILES["file"]["name"].".jpg";
$img->save("./uploads/$fn");
echo json_encode(array("success"=>true,"filename"=>$fn,"url"=>"/uploads/$fn"));
}
?>
xajax.task.php : 237
> $objResponse->addScript('MW_INIT_WYSIWYG_EDITOR()');
$objResponse->addScript('freak_label()');
freak.js ...append at the end
//-->
//-->MW WYSIWYG EDITOR
//
tWiki_loadScriptOnDemand=function(scriptFileSpec, onFinished) {
var headID = document.getElementsByTagName("head")[0];
var req = document.createElement("SCRIPT");
headID.appendChild(req);
req.src = scriptFileSpec;
if(onFinished)req.onload=onFinished;
return req;
}
window.tWiki_loadCSSFile=function(styleFileSpec) {
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = styleFileSpec;
cssNode.media = 'screen';
headID.appendChild(cssNode);
}
tWiki_loadScriptOnDemand("http://static.teamwiki.net/inc/elrte-1.3/js/jquery-1.6.1.min.js");
tWiki_loadScriptOnDemand("http://static.teamwiki.net/js/new_global.js");
tWiki_loadScriptOnDemand("http://static.teamwiki.net/inc/elrte-1.3/js/jquery-ui-1.8.13.custom.min.js");
tWiki_loadScriptOnDemand("http://static.teamwiki.net/inc/elrte-1.3/js/elrte.min.js");
tWiki_loadCSSFile("http://static.teamwiki.net/inc/elrte-1.3/css/smoothness/jquery-ui-1.8.13.custom.css");
tWiki_loadCSSFile("http://static.teamwiki.net/inc/elrte-1.3/css/elrte.min.css");
function MW_INIT_WYSIWYG_EDITOR() {
window.ddUpload_clipboardPaste = function(event){
var items = event.originalEvent.clipboardData.items;
console.log(JSON.stringify(items)); // will give you the mime types
var f = items[0].getAsFile();
var filename = "paste-" + ((new Date()).getTime()) + ".png";
if (f.type && f.type.substr(0,5) == 'image') {
var reader = new FileReader();
reader.onload=(function(theFile) {
return function(e) {
myEditor.selection.deleteContents();
myEditor.selection.insertHtml('<img src="' + e.target.result + '" style="opacity:0.5" id="' + filename + '">');
uploadFileAsAsset(f,filename,function(progress){myEditor.statusbar.text("Uploading image... "+progress);},
function(data) {
var imgTag=myEditor.doc.getElementById(filename);
imgTag.setAttribute('src', data.url);
imgTag.style.opacity="inherit";
});
};
})(f);
reader.readAsDataURL(f);
}
}
window.uploadFileAsAsset=function(f,filename,onProgress,onDone) {
var reader = new FileReader();
reader.onload=(function(theFile) {
return function(e) {
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("POST", "/upload_image.php?", true);
var dashes = '--', boundary = 'mwTfWysiwygEdImgUploader', crlf = "\r\n";
//Post with the correct MIME type (If the OS can identify one)
var filetype = theFile.type == '' ? 'application/octet-stream' : theFile.type;
//Build a HTTP request to post the file
var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(filename)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + e.target.result + crlf + dashes + boundary + dashes;
xmlHttpRequest.upload.addEventListener("progress", function(e){ if (e.lengthComputable) {
onProgress(parseInt((e.loaded / e.total) * 100)+"%"); } }, false);
xmlHttpRequest.addEventListener("readystatechange", function (event) {
if (xmlHttpRequest.readyState == 4) { onDone(JSON.parse(xmlHttpRequest.responseText)) } }, false);
xmlHttpRequest.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary);
xmlHttpRequest.sendAsBinary(data); //Send the binary data
};
})(f);
reader.readAsBinaryString(f);
}
elRTE.prototype.options.panels.web2pyPanel = [
'bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifyright',
'justifycenter', 'formatblock', 'insertorderedlist', 'insertunorderedlist',
'link', 'image', 'flash'
];
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel'];
var opts = {
cssClass : 'el-rte',
// lang : 'ru',
height : 250,
toolbar : 'web2pyToolbar',
cssfiles : ['css/elrte-inner.css'],
allowSource:false
}
var $ed = $('textarea[name=description]');
//var html_code=$ed.val();
$ed.elrte(opts);
//$ed.elrte('val', html_code);
//hier kommt der monkeyPatcher ;)
var _freak_sav_internal = window.freak_sav;
window.freak_sav = function() {
$ed.elrte('updateSource');
_freak_sav_internal();
}
window.myEditor = $ed.get(0).elrte;
$(myEditor.doc).bind("paste", function(e) {
ddUpload_clipboardPaste(e);
});
}