You are not logged in.
#1 2007-01-03 12:29:10
Easy image insertion
Hi!
Our company develops University ERP system and we have chosen TinyMCE as content editing tool. It works well with MS Word (Copy&Paste) but image pasting doesn’t work and I clearly understand why it doesn’t work.
Is there way to do following steps at once (CTRL+V) using TinyMCE?
• Get clipboard image and save it as file
• Submit it to server script and get image URL
• Insert URL into TinyMCE as IMG tag
Is it possible?
Are there any plugins that can do it?
Thanks!
Bolat Basheyev.
Offline
#2 2007-01-03 12:50:45
- Felix Riesterer
- Administrator
- From: Germany
- Registered: 2005-12-30
- Posts: 4601
- Website
Re: Easy image insertion
Hi!
nitro wrote:
Is there way to do following steps at once (CTRL+V) using TinyMCE?
• Get clipboard image and save it as file
You would need to have an image path so Javascript can use a fileupload (e.g. in a hidden frame). But since CTRL+V doesn't neccessarily provide a path (Word stores the image internally!) there is no way to ensure that this information is given in every case. This in turn makes it impossible to accomplish your goal.
Greetings and a Happy New Year!
Offline
#3 2007-01-10 08:00:46
Re: Easy image insertion
WE DID IT!!!
We wrote simple signed applet that have access to clipboard (JRE 1.5 plugin required, but anyways):
1. JavaScript code invokes applet's method getClipboardImageURL()
2. Applet copies clipboard image as BufferedImage and stores it as JPEG (using JPEGEncoder)
3. Applet forwards this image to some server script like "uploader"
4. Server script returns URL of uploaded image (like "getImage?id=5")
5. JavaScript code inserts URL into HTML
Just press Ctrl+V!
Thats all!
Applet code:
Code:
public class PasteImageApplet extends JApplet{
Clipboard clipboard;
Toolkit toolkit;
public String getClipboardImageURL(String server){
String url = "";
try{
DataFlavor dataFlavor = DataFlavor.imageFlavor;
System.out.println(dataFlavor.getDefaultRepresentationClass());
Object object = null;
try{
object = clipboard.getContents(null).getTransferData(dataFlavor);
}catch (Exception e){
JOptionPane.showMessageDialog(null, "No image found.");
return "";
}
BufferedImage img = (BufferedImage) object;
BufferedImage bimg = null;
int w = img.getWidth(null);
int h = img.getHeight(null);
bimg = new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB);
ImageIcon ii = new ImageIcon(img);
ImageObserver is = ii.getImageObserver();
bimg.getGraphics().setColor(new Color(255, 255, 255));
bimg.getGraphics().fillRect(0, 0, w, h);
bimg.getGraphics().drawImage(ii.getImage(), 0, 0, is);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(stream);
jpeg.encode(bimg);
URL u = new URL(server+"/uploader?");
URLConnection con = u.openConnection();
String boundary = "-----------------------------7d637a1aa100de";
con.setRequestProperty("method", "POST");
con.setRequestProperty("Content-Type", "multipart/form-data; boundary=\""+boundary+"\"");
con.setDoOutput(true);
con.getOutputStream().write(((String)
"--"+boundary+"\r\n "+
"Content-Disposition: form-data; name=\"img\"; filename=\"filename\"\r\n"+
"Content-Type: image/jpeg\r\n "+
"Content-Transfer-Encoding: base64\r\n\r\n" +
Base64.encode(stream.toByteArray())).getBytes());
con.connect();
InputStream inputStream = con.getInputStream();
byte [] urlBytes = new byte [inputStream.available()];
inputStream.read(urlBytes);
url = new String(urlBytes);
url = "/getImage?id="+url;
System.out.println(url);
} catch (Exception exc){
if (ShowExceptions.ShowExceptions)
exc.printStackTrace();
}
return url;
}
public void init() {
add(new JLabel("applet started"));
toolkit = Toolkit.getDefaultToolkit();
clipboard = toolkit.getSystemClipboard();
}We tried to insert whole copied text from ms word with formatted text and images.
There is some problem, all images and formulas stored as serialized OLE objects ![]()
Last edited by nitro (2007-01-10 08:09:21)
Bolat Basheyev.
Offline
#4 2007-01-10 16:30:24
- Felix Riesterer
- Administrator
- From: Germany
- Registered: 2005-12-30
- Posts: 4601
- Website
Re: Easy image insertion
nitro wrote:
WE DID IT!!!
We wrote simple signed applet that have access to clipboard (JRE 1.5 plugin required, but anyways):
1. JavaScript code invokes applet's method getClipboardImageURL()
2. Applet copies clipboard image as BufferedImage and stores it as JPEG (using JPEGEncoder)
3. Applet forwards this image to some server script like "uploader"
4. Server script returns URL of uploaded image (like "getImage?id=5")
5. JavaScript code inserts URL into HTML
Just press Ctrl+V!
Thats all!
This is simply unbelievable! You are magicians! I'm totally impressed! I never thought that such a thing was possible...
nitro wrote:
We tried to insert whole copied text from ms word with formatted text and images.
There is some problem, all images and formulas stored as serialized OLE objects
What a pity! But anyway, this is still absolutely unbelievable! Isn't there a way to unserialize these OLE objects? MS Word needs to be able to extract this information, too... and nut just for saving a file as an HTML document!
Offline
#5 2008-10-22 18:37:33
- flox
- Member
- Registered: 2008-10-21
- Posts: 3
Re: Easy image insertion
Hi,
How integrate applet to my tiny?
Offline
#6 2009-11-26 16:54:10
- Khamyl
- Member
- Registered: 2009-11-26
- Posts: 2
Re: Easy image insertion
OK.. I successfully got the applet working with JS, but then I realised that IE ignores paste event when image is in the clipboard (when text is there it is ok). What is more, it disables paste functionality in edit menu and context menu
so I have no chance to generate paste event and call the applet method
. Only way I see is to catch keydown event by JS when ctrl+v is pressed, but commands in menus remain disabled.
any ideas how to call the applet method on paste in IE if image is in the clipboard?
THANKS for any replay..
Last edited by Khamyl (2009-11-26 17:00:01)
Offline
#7 2009-12-03 06:21:45
- mjh_ca
- Member
- Registered: 2008-05-04
- Posts: 15
Re: Easy image insertion
nitro wrote:
WE DID IT!!!
Hi Nitro, would you consider open sourcing this applet? Sounds like an impressive achievement that I'm sure others would appreciate access to as well!
Offline
#8 2010-04-22 10:45:30
- iQuarK
- Member
- Registered: 2010-04-22
- Posts: 1
Re: Easy image insertion
I've added some lines to catch images from desktop:
Code:
public String getClipboardImageURL(String server){
String url = "";
try{
DataFlavor dataFlavor = DataFlavor.imageFlavor;
if(clipboard.getAvailableDataFlavors()[0].isFlavorJavaFileListType()) {
dataFlavor = DataFlavor.javaFileListFlavor;
}
Object object = null;
try{
object = clipboard.getContents(null).getTransferData(dataFlavor);
}catch (Exception e){
JOptionPane.showMessageDialog(null, "No image found.");
return "Error: No image found.";
}
BufferedImage img = null;
BufferedImage bimg = null;
if(clipboard.getAvailableDataFlavors()[0].isFlavorJavaFileListType()) {
List ficheros = (List)object;
// I get the first of all files, is for don't complicate the example
img = ImageIO.read(((File)ficheros.get(0)));
} else {
if(clipboard.getAvailableDataFlavors()[0].isMimeTypeEqual(DataFlavor.imageFlavor)){
img = (BufferedImage) object;
}
}
// if img isn't an image, it will be null
if(img!=null) {
int w = img.getWidth(null);
int h = img.getHeight(null);
bimg = new BufferedImage(w,h,BufferedImage.TYPE_INT_RGB);
ImageIcon ii = new ImageIcon(img);
ImageObserver is = ii.getImageObserver();
bimg.getGraphics().setColor(new Color(255, 255, 255));
bimg.getGraphics().fillRect(0, 0, w, h);
bimg.getGraphics().drawImage(ii.getImage(), 0, 0, is);
ByteArrayOutputStream stream = new ByteArrayOutputStream();
JPEGImageEncoder jpeg = JPEGCodec.createJPEGEncoder(stream);
jpeg.encode(bimg);
URL u = new URL(server+"/upload.php?");
URLConnection con = u.openConnection();
String boundary = "-----------------------------7d637a1aa100de";
con.setRequestProperty("method", "POST");
con.setRequestProperty("Content-Type", "multipart/form-data; boundary=\""+boundary+"\"");
con.setDoOutput(true);
con.getOutputStream().write(((String)
"--"+boundary+"\r\n"+
"Content-Disposition: form-data; name=\"img\"; filename=\""+filename+"\"\r\n"+
"Content-Type: image/jpeg\r\n"+
"Content-Transfer-Encoding: base64\r\n\r\n" +
Base64.encode(stream.toByteArray()));
con.connect();
InputStream inputStream = con.getInputStream();
byte [] urlBytes = new byte [inputStream.available()];
inputStream.read(urlBytes);
url = new String(urlBytes);
url = "/getImage?id="+url;
}
} catch (Exception exc){
if (ShowExceptions.ShowExceptions)
exc.printStackTrace();
}
return url;
}will you need add either FilePermission and AWTPermission to access to the clipboard.
Last edited by iQuarK (2010-04-23 10:43:04)
Offline
#9 2010-07-06 12:34:59
- awo-it
- Member
- Registered: 2010-07-06
- Posts: 1
Re: Easy image insertion
Hello,
sounds great. Searching long for such an solution.
But i'm beginner with Tinymce & joomla.
So my question is:
Where and howto insert this code?
Hope on help
Best Regards
Andreas
Offline
© 2003-2010