💃🏽 👩🏽‍🌾 🔪 クリップボードからTinyMCEエディターに画像を貼り付けます 👨‍🔬 👩‍❤️‍👨 🎬

しばらく前、私たちのプロジェクトでは、クリップボードから直接画像をエディターに貼り付ける必要がありました。タスクは重要であることが判明し、簡単な解決策はありませんでした。実際、インターネット上で問題を解決する方法は2つしか見つかりませんでした。エディター全体をフラッシュに変更すると、ほとんどのプロジェクトが書き換えられます。またはJavaアプレットです。実際、後者については以下で説明します。

この問題を解決するために、JavaアプレットSupaを使用しました。

アプレットは署名なしでは機能しないため、署名する必要があります。署名は、これに対応する料金が必要な認定サービスによって発行されます。しかし、パフォーマンスを評価するために、どういうわけかお金を使いたくありませんでした。したがって、このアルゴリズムが使用され、記事の最後に示されたサイトで覗かれました。署名は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での統合

アプレットの例のコードをわずかに単純化して、2つの関数で構成される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

アプレットの署名はこちらです。

クリップボードからTinyMCEエディターに画像を貼り付けます

More articles: