TinyMCE संपादक में क्लिपबोर्ड से एक छवि पेस्ट करें

कुछ समय पहले, हमारी परियोजना पर, सीधे क्लिपबोर्ड से चित्रों को संपादक में पेस्ट करना आवश्यक हो गया। यह कार्य गैर-तुच्छ था, और इसका कोई सरल समाधान नहीं था। वास्तव में, समस्या को हल करने के केवल दो तरीके इंटरनेट पर पाए गए थे: या तो पूरे संपादक को फ्लैश में बदल दें, जिससे अधिकांश प्रोजेक्ट, या जावा एप्लेट का पुनर्लेखन होगा। असल में, बाद में नीचे चर्चा की जाएगी।


समस्या को हल करने के लिए, हमने जावा एपलेट सुप का उपयोग किया।

एक एप्लेट हस्ताक्षर के बिना काम नहीं करेगा; तदनुसार, उस पर हस्ताक्षर किए जाने चाहिए। हस्ताक्षर प्रमाणित सेवाओं द्वारा जारी किए जाते हैं जिनके लिए इसके लिए संबंधित शुल्क की आवश्यकता होती है। लेकिन, प्रदर्शन का आकलन करने के लिए, मैं किसी भी तरह पैसा खर्च नहीं करना चाहता था। इसलिए, एल्गोरिथ्म का उपयोग किया गया था, लेख के अंत में इंगित साइट पर झाँका गया। 8 महीने के लिए एक हस्ताक्षर दिया जाता है, लेकिन कार्य कुशलता का मूल्यांकन करने के लिए पर्याप्त है।

एक एप्लेट सम्मिलित करने के लिए कोड

<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> 

हमने एप्लेट का आकार 0x0 px पर सेट किया है, क्योंकि एप्लेट डिफ़ॉल्ट रूप से सर्वर से अपडेट के बिना क्लिपबोर्ड से छवि प्रदर्शित करता है, और हमें संपादक में बटन पर क्लिक करके अपडेट होने की आवश्यकता है।

TinyMCE में एकीकरण

एप्लेट के लिए उदाहरण से कोड को थोड़ा सरल करने पर, हमें JS पर एक नियंत्रण आवरण मिलता है, जिसमें दो कार्य शामिल होते हैं।

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

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> 

सर्वर अपलोड कोड

 <?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; ?> 

सामग्री:

Supa - supa.sourceforge.net

एप्लेट्स के हस्ताक्षर यहाँ हैं ।