HTMLEditor下标和上标文

时间:2017-01-29 11:07:00

标签: javafx

我一直在尝试在HTMLEditor中显示下标和上标文本。 sub和sup模式有两个按钮。用户在文本字段中键入(sub / sup)文本并按下OK按钮,该按钮允许在HTMLEditor中将文本字段文本呈现为sub或sup。代码如下:

  import java.util.List;
  import java.util.regex.Pattern;
  import javafx.application.*;
  import javafx.collections.FXCollections;
  import javafx.event.*;
  import javafx.geometry.Orientation;
  import javafx.scene.*;
  import javafx.scene.control.*;
  import javafx.scene.image.*;
  import javafx.scene.web.HTMLEditor;
  import javafx.stage.Stage;

  public class HTMLEditorCustomizationSample extends Application {
// limits the fonts a user can select from in the html editor.
private static final List<String> limitedFonts = FXCollections.observableArrayList("Arial", "Times New Roman", "Courier New", "Comic Sans MS");

String sup = " ⁺⁻⁼⁽⁾⁰¹²³⁴⁵⁶⁷⁸⁹ᴬᵃᴭᵆᵄᵅᶛᴮᵇᶜᶝᴰᵈᶞᴱᵉᴲᵊᵋᶟᵌᶠᴳᵍᶢˠʰᴴʱᴵⁱᶦᶤᶧᶥʲᴶᶨᶡᴷᵏˡᴸᶫᶪᶩᴹᵐᶬᴺⁿᶰᶮᶯᵑᴼᵒᵓᵔᵕᶱᴽᴾᵖᶲʳᴿʴʵʶˢᶳᶴᵀᵗᶵᵁᵘᶸᵙᶶᶣᵚᶭᶷᵛⱽᶹᶺʷᵂˣʸᶻᶼᶽᶾꝰᵜᵝᵞᵟᶿᵠᵡᵸჼˤⵯ";
String supchars = " +−=()0123456789AaÆᴂɐɑɒBbcɕDdðEeƎəɛɜɜfGgɡɣhHɦIiɪɨᵻɩjJʝɟKklLʟᶅɭMmɱNnɴɲɳŋOoɔᴖᴗɵȢPpɸrRɹɻʁsʂʃTtƫUuᴜᴝʉɥɯɰʊvVʋʌwWxyzʐʑʒꝯᴥβγδθφχнნʕⵡ";

String subchars=" +−=()0123456789aeəhijklmnoprstuvxβγρφχ";
String sub=" ₊₋₌₍₎₀₁₂₃₄₅₆₇₈₉ₐₑₔₕᵢⱼₖₗₘₙₒₚᵣₛₜᵤᵥₓᵦᵧᵨᵩᵪ";

char[] csup = sup.toCharArray();
char[] characters = supchars.toCharArray();
char[] csub = sub.toCharArray();
char[] character = subchars.toCharArray();

public static void main(String[] args) {

    launch(args);
}

@Override
public void start(Stage stage) {
    // create a new html editor and show it before we start modifying it.
    final HTMLEditor htmlEditor = new HTMLEditor();
    stage.setScene(new Scene(htmlEditor));
    stage.show();

    // hide controls we don't need.
    hideImageNodesMatching(htmlEditor, Pattern.compile(".*(Cut|Copy|Paste).*"), 0);
    Node seperator = htmlEditor.lookup(".separator");
    seperator.setVisible(false);
    seperator.setManaged(false);

    // modify font selections.
    int i = 0;
    for (Node candidate : (htmlEditor.lookupAll("MenuButton"))) {
        // fonts are selected by the second menu in the htmlEditor.
        if (candidate instanceof MenuButton && i == 1) {
            // limit the font selections to our predefined list.
            MenuButton menuButton = (MenuButton) candidate;
            List<MenuItem> removalList = FXCollections.observableArrayList();
            final List<MenuItem> fontSelections = menuButton.getItems();
            for (MenuItem item : fontSelections) {
                if (!limitedFonts.contains(item.getText())) {
                    removalList.add(item);
                }
            }
            fontSelections.removeAll(removalList);
            // Select a font from out limited font selection.
            // Selection done in Platform.runLater because if you try to do
            // the selection immediately, it won't take place.
            Platform.runLater(new Runnable() {
                @Override
                public void run() {
                    boolean fontSelected = false;
                    for (final MenuItem item : fontSelections) {
                        if ("Comic Sans MS".equals(item.getText())) {
                            if (item instanceof RadioMenuItem) {
                                ((RadioMenuItem) item).setSelected(true);
                                fontSelected = true;
                            }
                        }
                    }
                    if (!fontSelected && fontSelections.size() > 0 && fontSelections.get(0) instanceof RadioMenuItem) {
                        ((RadioMenuItem) fontSelections.get(0)).setSelected(true);
                    }
                }
            });
        }
        i++;
    }
    // add a custom button to the top toolbar.
    Node node = htmlEditor.lookup(".top-toolbar");
    if (node instanceof ToolBar) {
        ToolBar bar = (ToolBar) node;
        ToggleButton supButton = new ToggleButton("x²");
        ToggleButton subButton = new ToggleButton("x₂");
        TextField txt = new TextField();
        Button okBtn = new Button("OK");
        Button clrBtn = new Button("CLEAR");
        ToggleGroup group = new ToggleGroup();
        supButton.setToggleGroup(group);
        subButton.setToggleGroup(group);
        Separator v1=new Separator();
        v1.setOrientation(Orientation.VERTICAL);
        Separator v2=new Separator();
        v2.setOrientation(Orientation.VERTICAL);

        txt.setDisable(true);
        okBtn.setDisable(true);;
        clrBtn.setDisable(true);


        bar.getItems().add(v1);
        bar.getItems().add(supButton);
        bar.getItems().add(subButton);
        bar.getItems().add(v2);
        bar.getItems().add(txt);
        bar.getItems().add(okBtn);
        bar.getItems().add(clrBtn);

        okBtn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                System.out.println(htmlEditor.getHtmlText());
                if (supButton.isSelected()) {
                    txt.setPromptText(" Enter the superscript text ");
                    String text = htmlEditor.getHtmlText().replaceAll("</p></body></html>", "");
                    text = text.replaceAll("<html dir=\"ltr\"><head></head><body contenteditable=\"true\"><p>", "");
                    System.out.println(text);
                   text="<p>"+text + "<sup>"+ txt.getText()+"</sup></p>";
                   System.out.println(text);
                    htmlEditor.setHtmlText(text);
                }
                else if (subButton.isSelected()) {
                    txt.setPromptText(" Enter the superscript text ");
                    String text = htmlEditor.getHtmlText().replaceAll("</p></body></html>", "");
                    text = text.replaceAll("<html dir=\"ltr\"><head></head><body contenteditable=\"true\"><p>", "");
                    System.out.println(text);
                    text=text + "<sub>"+ txt.getText()+"</sup></p>";

                    System.out.println(text);
                    htmlEditor.setHtmlText(text);
                }
            }
        });
        clrBtn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                txt.clear();
            }
        });
        supButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                if (supButton.isSelected()) {
                    txt.setPromptText(" Enter the superscript text ");
                    txt.setDisable(false);
                    okBtn.setDisable(false);;
                    clrBtn.setDisable(false);
                }
            }
        });
        subButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                if (subButton.isSelected()) {
                    txt.setPromptText(" Enter the subscript text ");
                    txt.setDisable(false);
                    okBtn.setDisable(false);;
                    clrBtn.setDisable(false);
                }
            }
        });
    }
}
private String convertSupText(String dsup) {
    char[] cdsup = dsup.toCharArray();
    String data="";
    for (int i = 0; i < cdsup.length; i++) {
        for (int j = 0; j < characters.length; j++) {
            if (cdsup[i] == characters[j]) {
                data = data + csup[j];
            }
        }
    }
    return data;
}

 private String convertSubText(String dsup) {
    char[] cdsup = dsup.toCharArray();
    String data="";
    for (int i = 0; i < cdsup.length; i++) {
        for (int j = 0; j < character.length; j++) {
            if (cdsup[i] == character[j]) {
                data = data + csub[j];
            }
        }
    }
    return data;
}

// hide buttons containing nodes whose image url matches a given name pattern.
public void hideImageNodesMatching(Node node, Pattern imageNamePattern, int depth) {
    if (node instanceof ImageView) {
        ImageView imageView = (ImageView) node;
        String url = imageView.getImage().impl_getUrl();
        if (url != null && imageNamePattern.matcher(url).matches()) {
            Node button = imageView.getParent().getParent();
            button.setVisible(false);
            button.setManaged(false);
        }
    }
    if (node instanceof Parent) {
        for (Node child : ((Parent) node).getChildrenUnmodifiable()) {
            hideImageNodesMatching(child, imageNamePattern, depth + 1);
        }
    }
}
  }

问题是在添加下标或上标文本后,光标仍然保持下标或上标模式,每次添加文本时它都会换行。enter image description here

2 个答案:

答案 0 :(得分:0)

@Manoj我认为您的问题是,您不知道HTMLeditor对您在文本字段中输入的任何文本(又名WebPage)所做的事情。好的是,它将您的<sub>标记应用于您输入的下一个文本(添加 1 并在 12 中键入正常的2个结果):

<html dir="ltr"><head></head><body contenteditable="true"><p><br><sup>1</sup></p></body></html>
<html dir="ltr"><head></head><body contenteditable="true"><p><br><sup>1<font size="2">1</font></sup></p></body></html>

我查看了文件(HTMLEditor&gt; HTMLEditorSkin&gt; WebPage&gt; twkExecuteCommand),最后在dll中执行粗体/斜体等命令(jfxwebkit)。我的知识超出了这里。我认为没有任何解决方案不会涉及重写整个HTMLEditor +本地库。

(仅在答案bc注释长度中包括此内容)

答案 1 :(得分:0)

这么认为。我已经完成了使用webview和html编辑器的工作。它现在工作正常。代码如下:

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Orientation;
import javafx.scene.Node;
import javafx.scene.control.Alert;
import javafx.scene.control.Separator;
import javafx.scene.control.Button;
import javafx.scene.control.ToolBar;
import javafx.scene.control.Tooltip;
import javafx.scene.web.HTMLEditor;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

public class FXMLDocumentController implements Initializable {

@FXML
private HTMLEditor HE;
@FXML
private WebView WV;

WebEngine webEngine;
Button supButton;
Button subButton;
Tooltip sup;
Tooltip sub;
Alert info= new Alert(Alert.AlertType.INFORMATION);;

@Override
public void initialize(URL url, ResourceBundle rb) {
    // TODO
    webEngine = WV.getEngine();
    supButton = new Button("x²");
    subButton = new Button("x₂");
    supButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                 info.setTitle("SUCCESS");
        info.setHeaderText("Information");
        info.setContentText("Use <sup>Text to to superscripted</sup> to use superscript fuction.\n Press Preview button to preview the changes");
        info.showAndWait();
            }});
    subButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                 info.setTitle("SUCCESS");
        info.setHeaderText("Information");
        info.setContentText("Use <sub>Text to to subscripted</sub> to use subscript fuction.\n Press Preview button to preview the changes");
        info.showAndWait();
            }});
    sup = new Tooltip();
    sub = new Tooltip();
    sup.setText(" Use <sup>Text to to superscripted</sup> to use superscript fuction.\n Press Preview button to preview the changes ");
    sub.setText(" Use <sub>Text to to subscripted</sub> to use subscript fuction.\n Press Preview button to preview the changes ");
    Node node = HE.lookup(".top-toolbar");
    if (node instanceof ToolBar) {
        ToolBar bar = (ToolBar) node;

        Separator v2 = new Separator();
        v2.setOrientation(Orientation.VERTICAL);

        bar.getItems().add(supButton);
        bar.getItems().add(subButton);
        bar.getItems().add(v2);

    }
    supButton.setTooltip(sup);
    subButton.setTooltip(sub);

}

@FXML
private void handleKeyTyped(ActionEvent event) {
    String text = HE.getHtmlText();
    text = text.replaceAll("&lt;sup&gt;", "<sup>");
    text = text.replaceAll("&lt;/sup&gt;", "</sup>");
    text = text.replaceAll("&lt;sub&gt;", "<sub>");
    text = text.replaceAll("&lt;/sub&gt;", "</sub>");

    webEngine.loadContent(text);
}

}