Thread: create buttons in a JEditorPane

Hi, (sorry for my bad english)

i am trying to develop an HTML editor with some "spezial" features.
The generated HTML Code should only contains H1, H2, H3 and P tags.

Every kind of Tag should get some special features in the editor.

for example: if users marks text as H1, on the left side of the H1 Headline a input-box should appear where the user can add some keywords for this headline.
if user writes an Paragrapch (p-tag), a button should appear where user can add some kind of media to this paragraph.

these special funktions are not changing the html code. the informatons would be sepeately stored in database.
but the input area should be directly in the editor.

i tryed it by overriding the EditorKid and the View (paintChild) methods. But i'm only able to put out some text not other elements.

public class HTMLEditor extends JFrame implements ActionListener {
 
    private HTMLDocument document;
    private JEditorPane textPane = new JEditorPane();
    /*
	...
    */
    public HTMLEditor() {
      super("HTMLEditor");
      ReportEditorKit editorKit = new ReportEditorKit();
      textPane.setEditorKit(editorKit);
      /*
	  ...
      */
    }
 
    /*
	...
    */
 
    class ReportEditorKit extends HTMLEditorKit {
      @Override
      public ViewFactory getViewFactory() {
	return new HTMLEditorKit.HTMLFactory() {
	  public View create(Element elem) {
	    Object o = elem.getAttributes().getAttribute(
			StyleConstants.NameAttribute);
	    if (o instanceof HTML.Tag) {
	      HTML.Tag kind = (HTML.Tag) o;
 
	      if (kind == HTML.Tag.P ) {
		return new ParagraphView(elem);
	      }
	      if (kind == HTML.Tag.H2 ) {
		return new BlockHeadlineView(elem);
	      }
	      /*
		 ...
	      */
	    }  
	    return super.create(elem);
	  }
	};
      }
    }
 
     /*
	...
    */
 
}
 
/* 
  ReportView moves Content 120 Pxl to the right 
  to make way for extra elements
*/
class ReportView extends javax.swing.text.html.ParagraphView {
 
  JButton test;
 
  public ReportView(Element e) {
      /*
	...
    */
  }
 
  @Override
  protected void setInsets(short top, short left, short bottom,
    short right) {super.setInsets
    (top,(short)(left+120),
    bottom,right);
  }
 
  @Override
  public void paintChild(Graphics g, Rectangle r, int n) {
    super.paintChild(g, r, n);
  }
}
 
/*
  BlockHeadlineView (H2) 
  Outputs "Headline" in front of an H2 Headline
  And should display an Test-Button ... but don't work
*/
class BlockHeadlineView extends ReportView {
 
  public BlockHeadlineView(Element e){
    super(e);
    test = new JButton("Test");
  }
  @Override
  public void paintChild(Graphics g, Rectangle r, int n) {
    super.paintChild(g, r, n);
 
    if(n == 0) {
	int numberX = r.x - getLeftInset();
	int numberY = r.y + r.height - 5;
	g.drawString("Titel", numberX, numberY);	// this works
 
	// with the following lines i tryed to display the test-button
	// but nothing workes
 
	// test.paint(g);
	// getContainer().add(test);
	// getContainer().validate();
	// getContainer().repaint();
    }
  }
}
 
/*
 ...
*/

If I understand your problem correctly, you may wish to look into using an an OverlayLayout, in which you can place a component on top of the editor pane (set opaque to false so it appears invisible), and then add/remove components to this as needed

yes,

i need something like a panel on the left side of the editor.
while writing in editor in this panel should appear buttons or something else.

for example: in most source-code editors there is a panel on the left side. while writing your code in these panels appear some marks when code is incorrect or this [+] and [-] Code Folds. these elements belongs to a part/line of the code but the dont realy manipulate the code.

I'm still a bit unclear of the behavior you want, but you can add a panel to the inset of the editor. Google "line numbers in JEditorPane" and you will see how to add line numbers...adding other drawn elements is very similar by customizing the drawing. Interacting with that element in the inset is a bit more difficult, but you could have a separate text editor that changes based upon user mouse clicks in the sidebar of the editor pane.