You are not logged in.

#1 2007-01-03 12:29:10

nitro
Member
From: Kazakhstan
Registered: 2007-01-03
Posts: 2
Website

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: 4687
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!


Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

Offline

 

#3 2007-01-10 08:00:46

nitro
Member
From: Kazakhstan
Registered: 2007-01-03
Posts: 2
Website

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 sad

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: 4687
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 sad

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!


Greetings from Germany,

Felix Riesterer.
(-> about me and this forum <-)

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 sad so I have no chance to generate paste event and call the applet method sad. Only way I see is to catch keydown event by JS when ctrl+v is pressed, but commands in menus remain disabled. sad 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

 

Board footer

Powered by PunBB
© Copyright 2002–2008 PunBB