Search code examples
javaimageswingalignmentjeditorpane

JEditorPane, alignment of images in the text

_https://i.sstatic.net/W2We5.gif

<img src=\"file:b:/smile.gif\" align=\"middle\">"

_https://i.sstatic.net/VPHzw.gif

<img src=\"file:b:/smile.gif\">

Required:
_https://i.sstatic.net/WlMhG.gif

I need to align the image in the JEditorPane and the image should not affect the height of rows. If I use align=middle - the picture is not aligned and retained influence on the height of rows.

To a solution of similar problems in html I use:

<span style=\"background-image: url('file:b:/smile.gif') 50% 50% no-repeat\"> &nbsp;&nbsp;&nbsp;&nbsp;</span>

But this method does not work in JEditorPane. How can I solve this problem?

Solution

  • To align your Images to the Middle of the JEditorPane, you can use something like this :

    editPane.setText("<html><p style = \"text-align:center;\"><img src = " + 
        "\"http://gagandeepbali.uk.to/gaganisonline/images/" + 
        "editsystemvariable2.png\" alt = \"pic\" /></p></html>\n");

    Here the text-align property can do that trick for you. And about that thing that image should not affect the size of the row, I am not sure about your intentions on that, but if I understood you right then you can provide a fixed width and height to your images in the <img> tag.

    Here I used this code, and tell me if you desire something else, other than what you find in this code. Wish I could help,

    import java.awt.*;
import javax.swing.*;

public class EditorPaneTest extends JFrame
{
    public EditorPaneTest()
    {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationByPlatform(true);        

        JEditorPane editPane = new JEditorPane();
        JScrollPane scrollPane = new JScrollPane(editPane);     

        editPane.setContentType("text/html");

        editPane.setText("<html><p style = \"text-align:center;\">Hello there, How you doing ?<img src = " + 
                                            "\"http://s018.radikal.ru/i504/1202/03/c01a2e35713f.gif" + 
                                                "\" alt = \"pic\" width = \"15\" height = \"15\" />I guess all is good!!" +
                                                        "<br />I hope this is what you wanted!! " + 
                                                                    "<img src =  \"http://s018.radikal.ru/i504/1202/03/c01a2e35713f.gif" + 
                                                "\" alt = \"pic\" width = \"15\" height = \"15\" /> Hope this works for you :-)</p></html>\n");

        add(scrollPane, BorderLayout.CENTER);
        setSize(400, 300);
        setVisible(true);
    }

    public static void main(String... args)
    {
        SwingUtilities.invokeLater(new Runnable()
        {
            public void run()
            {
                new EditorPaneTest();
            }
        });
    }
}

    And here is the output image :

    EditorPane's View

    MoreOver use this Smiley Image. I had removed the extra bottom space from the image for you.