I modded Taskfreak a bit to make it more convenient to use...


all the code with nice syntax highlighting:
https://gist.github.com/3949777


minimal 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: ./SimpleImage.class.php


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);
      });
      
}