Jeditorpane som dreamweaver

Vil du trække HTML ud af en JEditorPane ?  Hvis ja hvad giver getText() ?

Eller vil du løbende mens folk taster ind i WYSWYG HTML vise den
genererede HTML uformateret i et andet text area ?

Den behøver ikke give html koden løbende, det vil måske blot forvirre brugeren (selv om, hvis den kan give det til sidst kan det vel næsten være det samme løbende, med lidt observer, eller blot keylistener ?!)

Jeg forestiller mig lidt hen ad word (bare med meget få knapper, som Bold, Italic, 2-3 tekststørrelser, centrer, højrestil, venstrestil, 2-3 farver, og hyperlink)

Når man er færdig med at skrive, redigere, skal man så kunne trykke på en knap, og teksten skal gemmes i databasen (som html), så den senere kan sendes som newsletter i html-emails :) eller beskues som preview, med formatteringerne...

Vi snakkede lidt om det i går, arne_v. Så du ved nogenlunde hvad jeg er ude efter :)

Nu er Swing ikke min stærkeste side.

Her er et lille eksempel (app ikke applet) som *IKKE* virker, men som måske kan
give lidt ideer i den rigtige retning:


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

public class HTMLEdit extends JFrame implements ActionListener {
    private JButton bold;
    private boolean inbold;
    private JButton save;
    private JEditorPane html;

    public HTMLEdit() {
        getContentPane().setLayout(new BorderLayout());
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(600, 400);
        html = new JEditorPane();
        html.setEditable(true);
        html.setContentType("text/html");
        html.setPreferredSize(new Dimension(600, 300));
        getContentPane().add(html, BorderLayout.NORTH);
        bold = new JButton("Bold");
        bold.addActionListener(this);
        getContentPane().add(bold, BorderLayout.EAST);
        save = new JButton("Save");
        save.addActionListener(this);
        getContentPane().add(save, BorderLayout.WEST);
        inbold = false;
    }

    public void actionPerformed(ActionEvent evt) {
        if(evt.getSource() == bold) {
            // nedenstående virker ikke som det skal
            StringBuffer sb = new StringBuffer(html.getText());
            if(inbold) {
                sb.insert(html.getCaretPosition(), "</b>");
            } else {
                sb.insert(html.getCaretPosition(), "<b>");
            }
            html.setText(sb.toString());
            inbold = !inbold;
        }
        if(evt.getSource() == save) {
            // her skulle gemmes i databasen
            JOptionPane.showMessageDialog(this, html.getText());
        }
    }

    public static void main(String[] args) {
        HTMLEdit f = new HTMLEdit();
        f.show();
    }
}

Man kan lave bold og andre ting i JEditorPane a'la

button.addActionListener(new javax.swing.text.StyledEditorKit.BoldAction());

Mit problem er at få html koden ud til sidst... men hvis du siger at getText() kan det, burde det jo ikke være så svært. Jeg har prøvet dit eksempel, og der vælter jo html kode ud, så vi er klart på rette vej :)

Mit eksempel ser nu ud som:


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

public class HTMLEdit extends JFrame implements ActionListener {
    private JButton bold;
    private JButton save;
    private JEditorPane html;

    public HTMLEdit() {
        getContentPane().setLayout(new BorderLayout());
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(600, 400);
        html = new JEditorPane();
        html.setEditable(true);
        html.setContentType("text/html");
        html.setPreferredSize(new Dimension(600, 300));
        getContentPane().add(html, BorderLayout.NORTH);
        bold = new JButton("Bold");
        bold.addActionListener(this);
        getContentPane().add(bold, BorderLayout.EAST);
        save = new JButton("Save");
        save.addActionListener(this);
        getContentPane().add(save, BorderLayout.WEST);
    }

    public void actionPerformed(ActionEvent evt) {
        if(evt.getSource() == bold) {
            html.setText(html.getText().replaceAll(html.getSelectedText(), "<b>" + html.getSelectedText() + "</b>"));
        }
        if(evt.getSource() == save) {
            // her skulle gemmes i databasen
            JOptionPane.showMessageDialog(this, html.getText());
        }
    }

    public static void main(String[] args) {
        HTMLEdit f = new HTMLEdit();
        f.show();
    }
}

hvor man skal markere det man vil bold'e.

Men ja du burde kunne kalde getText() og gemme den streng i en database uden
videre bøvl.

Min Eclipse er ikke helt vild med din replaceAll

The method replaceAll(String, String) is undefined for the type String

Men som sædvanligt er du smuk. Jeg bliver bare lige nødt til at rode med det aftenen igennem, så vender jeg tibage i morgen. Håber det er ok.

Jeg skal prøve med nogen af de forprogrammerede metoder i text.StyledEditorKit, de er vist rimeligt gode. Og så vil jeg se om html koden er klar med getText().

Men mange tak indtil videre - vi fortsætter i morgen :)

replaceAll er ny i Java 1.4, så måske ...

men den er ret nem at implementere selv i ældre Java versioner

Tilfældig udgave:

  public static String replaceAll(String s, String s1, String s2) {
      StringBuffer tmp = new StringBuffer("");
      int pos = 0;
      while (pos < s.length()) {
        int ix = s.indexOf(s1, pos);
        if (ix >= 0) {
            tmp.append(s.substring(pos, ix));
            tmp.append(s2);
            pos = ix + s1.length();
        } else {
            tmp.append(s.substring(pos));
            pos = s.length();
        }
      }
      return tmp.toString();
  }

Jeg ligger lige et svar såfrem alt flasker sig imorgen.

Jeg kan ikke rigtig komme videre med det. I JEditorPane kan man få HTML koden ud, som du skriver. Men jeg roder lidt rundt i det i dette spørgamål, for det er i JTextPane at Bold/Italic osv. ligger som metoder allerede i StyleEditorKit... -Men der kan jeg ikke få HTML koden ud til sidst :( Din App er for så vidt en god begyndelse, men der er mange bugs i. Hvis du f.eks markerer et bogstav bliver alle andre forekomster af det bogstav også bold, og så videre... Jeg vil naturligvis gerne give pointsne for din indsats, men efter jeg nu har haft dette problem oppe i 4-5 spørgsmål, vil jeg meget gerne have det løst :)

Hej Arne.

Beklager at der er gået lidt tid. Jeg arbejder videre på dit forslag, men jeg har et par små spørgsmål.

1) Hvis man markerer noget og gør det bold, med din metode, bliver alle andre forekomster af det også bold.

2) Hvis man ikke har markeret noget, skal den sætte <b></b> ind og flytte ind imellem (så man skriver med bold). Det har jeg lavet sådan her:

if(evt.getSource() == bold) {
    if(html.getSelectedText() != null) {
        html.setText(html.getText().replace(html.getSelectedText(), "<b>" + html.getSelectedText() + "</b>"));
    } else {
        html.setText(html.getText() + "<b></b>");
        html.setCaretPosition(html.getCaretPosition() - 4);
    }
    html.requestFocus();
}

Men der kommer ikke <b></b> med ! Den flytter bare de fire tegn tilbage. Hvordan kan det være ?

Håber du gider hjælpe lidt her :)

Måske er du på ferie eller noget, så jeg prøver at oprette et nyt spørgsmål. Men tak for hjælpen som jeg fik her. :)

Jeg har vist bare misset din sidste kommentar.

(jeg har holdt ferie og er på rejse men har haft mulighed for at se her)

re 1)

Der må skulle testes på positionen af det der er selected.

Jeg kan godt prøve at se om jeg kan lave en løsning.

Stay tuned.

Jeg forstår ikke at <b></b> ikke kommer med når jeg kører metoden uden at noget er selected, men du ved det nok. Jeg venter med spænding

re 2)

Jeg kan huske at det eksempel drillede mig en smule.

Jeg ville nemlig gerne lave en bold toggle funktionalitet, men det kunne jeg ikke
få til at virke.

Jeg tror at det er samme grund.

html.setText(html.getText().concat("<b></b>"));

virker heller ikke ?! Det er da sært

Jeg har fundet ud af hvad der er galt (sådan da).

String ny = html.getText() + "<b></b>";
System.out.println(ny);

giver:
<html>
  <head>

  </head>
  <body>
    <p style="margin-top: 0">
      cbcbvcbcv
    </p>
  </body>
</html>
<b></b>

De bliver puttet ind efter alt den øvrige html kode, og caret'en flytter 4 tilbage. Så den gør hvad jeg beder den om. Det skal bare ind, der hvor man er...

Jeg håber stadig du er der (for mig) på et eller andet tidspunkt i morgen eller overmorgen, for jeg er ved at gå ud af mit gode skind. Men den med at den udskifter alle instancer af den markerede tekst må kunne fikses med:

int start = html.getSelectionStart();
int slut = html.getSelectionEnd();

et eller andet...

Jeg laved det her i går aftes:

import java.awt.*;
import java.awt.event.*;

import javax.swing.*;

public class HTMLEdit extends JFrame implements ActionListener {
    private JButton bold;
    private JButton save;
    private JEditorPane html;

    public HTMLEdit() {
        getContentPane().setLayout(new BorderLayout());
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(600, 400);
        html = new JEditorPane();
        html.setEditable(true);
        html.setContentType("text/html");
        html.setPreferredSize(new Dimension(600, 300));
        getContentPane().add(html, BorderLayout.NORTH);
        bold = new JButton("Bold");
        bold.addActionListener(this);
        getContentPane().add(bold, BorderLayout.EAST);
        save = new JButton("Save");
        save.addActionListener(this);
        getContentPane().add(save, BorderLayout.WEST);
    }

    public void actionPerformed(ActionEvent evt) {
        if(evt.getSource() == bold) {
            html.replaceSelection("####B####" + html.getSelectedText() + "####/B####");
            html.setText(html.getText().replaceAll("####B####", "<b>"));
            html.setText(html.getText().replaceAll("####/B####", "</b>"));
        }
        if(evt.getSource() == save) {
            // her skulle gemmes i databasen
            JOptionPane.showMessageDialog(this, html.getText());
        }
    }

    public static void main(String[] args) {
        HTMLEdit f = new HTMLEdit();
        f.show();
    }
}

Lidt klodset men nu får det kun boldet det markerede ikke alle
andre forekomster af det samme.

Jeg tror at det kan gøres pænere, men jeg har været igennem næsten alt uden held !

Du skal have mange tak for dine anstrengelser, det er en sjov måde du har fundet på der... men på en eller anden måde har jeg fået det til at virke med JTextPane og StyledEditorKit. Du kan prøve den her, hvis du har lyst:

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.text.html.HTMLEditorKit;

public class EditEx {
    private static javax.swing.JTextPane textPane;
   
    public static void main( String[] args ) {
        textPane = new javax.swing.JTextPane();
        textPane.setEditorKit(new HTMLEditorKit());
        javax.swing.JButton button1 = new javax.swing.JButton("Bold");
        javax.swing.JButton button2 = new javax.swing.JButton("Save");

        button1.addActionListener(new javax.swing.text.StyledEditorKit.BoldAction() );
        button1.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent arg0) {
                focus();
            }
        });
        button2.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {
                skrivLort();
                focus();
            }
        });

        javax.swing.JFrame frame = new javax.swing.JFrame();
        frame.getContentPane().add(textPane,java.awt.BorderLayout.NORTH);
        frame.getContentPane().add(button1,java.awt.BorderLayout.WEST);
        frame.getContentPane().add(button2,java.awt.BorderLayout.EAST);
        frame.pack();
        frame.show();
    }
    public static void skrivLort() {
        System.out.println(textPane.getText());
    }
    public static void focus() {
        textPane.requestFocus();
    }
}

men tak for din altid smukke hjælp :)