Pasting an image from the clipboard into the TinyMCE editor

Some time ago in our project it became necessary to paste pictures from the clipboard directly into the editor. The task turned out to be non-trivial, and had no simple solutions. In fact, an Internet search found only two ways to solve the problem - either to change the editor entirely to flash, which would result in rewriting a large part of the project, or using a Java applet. Actually, the latter will be discussed below.


To solve the problem, we used java applet Supa.

An unsigned applet will not work, so you need to sign it. Signatures are issued by certified for this business services, which require a corresponding fee. But, in order to assess the performance, I did not want to spend money like that. Therefore, the algorithm was used, spied on the site listed at the end of the article. The signature is given for 8 months, but to assess the effectiveness of the work - abound.
')
Applet Insert Code

<applet id="SupaApplet" archive="supa/Supa.jar" code="de.christophlinder.supa.SupaApplet" width="0" height="0"> <param name="imagecodec" value="png"> </param> <param name="encoding" value="base64"> </param> <param name="previewscaler" value="fit to canvas"> </param> <param name="trace" value="true"> </param> </applet> 

We set the size of the applet 0x0 px, since by default the applet displays the image from the clipboard without uploading to the server, and we need the applood to occur at the touch of a button in the editor.

TinyMCE integration

By slightly simplifying the code from the example for an applet, we get a control wrapper on JS, consisting of two functions.

  function paste() { var s = new supa(); try { var applet = document.getElementById( "SupaApplet" ); if (!s.ping(applet)) throw "SupaApplet is not loaded (yet)"; var err = applet.pasteFromClipboard(); switch (err) { case 0: break; case 1: case 2: case 3: case 4: default: return false; } } catch (e) { alert(e); throw e; } return upload(); } function upload() { var s = new supa(); var applet = document.getElementById("SupaApplet"); try { var result = s.ajax_post(applet, "supa/upload.php", "screenshot", "screenshot.jpg", { form: document.forms["form"] }); if (result.match("^OK")) { var url = result.substr(3); return url; } else return false; } catch (ex) { return false; } return false; } 

Adding a button to TinyMCE

 $(document).ready(function() { $('#editor').tinymce( { script_url : '../js/tiny_mce/tiny_mce.js', theme : "advanced", plugins : "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "search,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,image,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup", theme_advanced_buttons4 : "insert_image", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : false, setup : function(ed) { ed.addButton('insert_image', { title: 'Insert Image', image: 'images/add.png', onclick: function() { tmp = paste(); if (tmp !== false) ed.selection.setContent('img src="upload/' + tmp + '" /'); } }); } }); }); </script> 

Upload code on the server

 <?php define('FILESTORE_PATH', "../include/tcpdf/upload"); define('FILESTORE_URLPREFIX', "upload"); header('Content-Type: text/plain'); if (!$_FILES['screenshot']) { echo "ERROR: NO FILE (screenshot)"; exit; } if ($_FILES['screenshot']['error']) { echo "PHP upload error: " . $_FILES['screenshot']['error']; exit; } $filename = uniqid() . '.jpg'; $file = FILESTORE_PATH . "/" . $filename; $fh = fopen($_FILES['screenshot']['tmp_name'], "r"); if (!$fh) { echo "ERROR: could not read temporary file"; } $data = fread($fh, filesize($_FILES['screenshot']['tmp_name'])); fclose($fh); $fh = fopen($file, "w"); if (!$fh) { echo "ERROR: could not open destination file"; die(); } fwrite($fh, base64_decode($data)); fclose($fh); if (is_uploaded_file( $_FILES['screenshot']['tmp_name'])) { unlink($_FILES['screenshot']['tmp_name']); } echo "OK:" . FILESTORE_URLPREFIX . "/" . $filename; ?> 

Materials:

Supa - supa.sourceforge.net

Signature applets - here .