1

I have an applet that uses Java Graphics library to allow users to draw lines and shapes, which will be embedded into TinyMCE editor as a Plugin. I am unsure of how to insert the user's drawn image as an image onto the editor.

Any help or reference most appreciated!

Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
XinYi Chua
  • 281
  • 1
  • 6
  • 17

2 Answers2

1

I do not believe that what you aim to do would be possible short of the (trusted) applet saving an image to disk and prompting the user to then upload it to the CMS.

Andrew Thompson
  • 168,117
  • 40
  • 217
  • 433
  • ..That is if I understand the question, which I'm not sure I do. Does TinyMCE have a way to easily insert base 64 encoded (image as string) images? – Andrew Thompson Jun 21 '12 at 14:17
  • yes, it is possible to insert a base 64 encoded image, but I'm not sure how to extract the base 64 encoded image from the Java applet to insert it into the Tinymce editor. – XinYi Chua Jun 22 '12 at 04:09
  • @Andrew: It is possible to insert it as base64 into tinymce using css. – Thariama Jun 22 '12 at 08:44
  • @Thariama Then perhaps the answer can be found via [convert image to base64 string using java](http://stackoverflow.com/questions/2781545/convert-image-to-base64-string-using-java) – Andrew Thompson Jun 22 '12 at 08:57
  • i think the problem will be that XinYi Chua will need to transfer the image to the server first (the image won't be usable otherwise in another context) – Thariama Jun 22 '12 at 09:19
  • @Thariama I'm not sure how this all fits together. It seems TinyMCE lives in a web page, and so does an applet, but I'm not sure if the OP means they are on the **same** page. If they are on the same page, the applet can communicate directly with JS, & thereby (by limited understanding of TinyMCE) be able to 'pass the encoded string' to it (possibly via a custom script/function in the page). But to underline, while I am familiar with many possibilities regarding applets, I had not heard of TinyMCE before this question. – Andrew Thompson Jun 22 '12 at 09:46
  • this tinymce forum thread (3 posts) might be of interest: http://www.tinymce.com/forum/viewtopic.php?id=23243 – Thariama Jun 22 '12 at 09:49
  • @Thariama Yes, though there are some caveats and limitations, it seems it might be possible. I think it is up to the OP to clarify exactly how TinyMCE and the applet are combined (e.g. same web page, different frames of one web page..) before we can progress this further. – Andrew Thompson Jun 22 '12 at 10:03
  • Hi Andrew and Thariama , thanks alot for the info, I will take a good look at the references you guys have provided first before getting back. – XinYi Chua Jun 22 '12 at 11:27
  • @AndrewThompson the Applet will be in a form of a plugin button on the tinymce editor, which will present itself as a popup box onclick of the button, so I would like user to draw on the popup box and pass a base 64 image string to the Tinymce to insert. My qn originally was how to pass the base 64 image string to the Tinymce editor from the applet. Hope it clarifies. – XinYi Chua Jun 22 '12 at 11:33
  • I am not sure if @Thariama was notified of your comment (but mine should do the trick). Given your clarified spec. (which should be edited into your question), I can really only help to the point of the applet calling a script in the original page. The rest is outside my area of expertise. – Andrew Thompson Jun 22 '12 at 11:36
0

You can upload your images to a webserver and enter an image tag refering to that images into the editor using the code plugin (the "html"-button).

Update:

You need to create the base64 encoded string and call the following tinymce command:

Example: For your system you will need to fit the base64-encoded string into the variable my_image_base64_string.

var my_image_base64_string = 'R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7';

tinymce.activeEditor.execCommand('insertHTML', false, '<img src="data:image/gif;base64,' + my_image_base64_string + '" width="16" height="14">');
Thariama
  • 50,002
  • 13
  • 138
  • 166
  • Hi, could you elaborate more? How can I enter an image tag? I'm unsure how to capture the image from the applet. Thanks! – XinYi Chua Jun 21 '12 at 03:11
  • Hi thanks for replying, but what I hope to achieve is to insert an image (after the drawn image is captured) straightaway from the applet by the user on the fly. – XinYi Chua Jun 22 '12 at 04:07
  • hmm, where are the images that get created stored? – Thariama Jun 22 '12 at 08:43
  • the image can be stored at the user's computer, or best immediately transferred into the Tinymce editor without storing. – XinYi Chua Jun 22 '12 at 09:18
  • this won't work. looks like you need to transfer the image to the server and make it accesible over the web. then you are able to insert it as href or background image into the tinymce editor in any context – Thariama Jun 22 '12 at 09:20
  • Hi yes, I understand that will be the final goal to get the base 64 string to the tinymce editor as shown in the update. Currently I manage to generate the base 64 image string from the Java application, but I have some problem transferring it over to the javascript side when the applet's JButton is clicked. Is there anyway to catch when the applet button is clicked from the javascript side, in order to produce the base 64 string? – XinYi Chua Jun 23 '12 at 12:15
  • i am not very familiar with java applets (last time is used them during student time) – Thariama Jun 25 '12 at 10:50
  • Its okay, actually what was needed was from javascript call a public method from the applet with a String return type that did the trick ;) – XinYi Chua Jul 02 '12 at 05:12