在复选框上更改CodeArea文本背景单击

Question

使用RichTextFX，我能够创建一个包含字符串的代码区，并突出显示属于字符串[]关键字数组的所有单词。

我在CodeArea上方有一个复选框控件，我在我的控制器代码中附加了一个handler（），因此每当单击复选框时，它都会取消突出显示CodeArea中所有突出显示的单词。我在取消突出显示（使文本背景为白色）CodeArea中的文本时遇到了麻烦，因为styleClass是在下面显示的StyleSpans方法中定义的。现在一切正常，除了我单击复选框时，它不会取消突出显示单词：

FXML：

<HBox>
   <CheckBox fx:id="highlightBox" mnemonicParsing="false"  prefHeight="25.0" prefWidth="154.0" stylesheets="@styleMain.css" text="Highlight Words" />
</HBox>
<HBox>
   <children>
     <CodeArea fx:id="codeBox" wrapText="true" prefHeight="240.0"    prefWidth="339.0">
     </CodeArea>
   </children>
</HBox>

Java控制器：

@FXML
CheckBox highlightBox;

@FXML
public CodeArea codeBox;

private static final String[] KEYWORDS = new String[] {
 "one",
 "two",
 "three"
};

private static final String KEYWORD_PATTERN = "\\b(" + String.join("|", KEYWORDS) + ")\\b";

private static final Pattern PATTERN = Pattern.compile("(?<KEYWORD>" + KEYWORD_PATTERN + ")");

public static final String demoText = "one two three four five";

@Override
public void initialize(URL location, ResourceBundle resources) {

  //Highlighting  Words
  codeBox.richChanges().subscribe(change -> {
   codeBox.setStyleSpans(0, computeHighlighting(codeBox.getText()));
  });
  codeBox.replaceText(0, 0, demoText);


  highlightBox.setOnAction(new EventHandler < ActionEvent > () {
   @Override
   public void handle(ActionEvent event) {
    codeBox.setStyle("-fx-background-color: blue"); // this should instead change 'highlightKeyWords' background color to white
   }
  });

  ...
 } //End of initialize


public static StyleSpans < Collection < String >> computeHighlighting(String text) {
 Matcher matcher = PATTERN.matcher(text);
 int lastKwEnd = 0;
 StyleSpansBuilder < Collection < String >> spansBuilder = new StyleSpansBuilder < > ();
 while (matcher.find()) {
  String styleClass =
   matcher.group("KEYWORD") != null ? "highlightKeyWords" :
   null; /* never happens */
  assert styleClass != null;
  spansBuilder.add(Collections.emptyList(), matcher.start() - lastKwEnd);
  spansBuilder.add(Collections.singleton(styleClass), matcher.end() - matcher.start());

  lastKwEnd = matcher.end();
 }
 spansBuilder.add(Collections.emptyList(), text.length() - lastKwEnd);
 return spansBuilder.create();
}

在处理程序中，我成功地将CodeArea的背景更改为蓝色，但如果我改为尝试属性Overview.set样式（"-fx-backard-填充：蓝色；"）；

它不会改变任何事情，文字始终突出显示。这是因为我应该引用在computehighlight方法中创建的突出显示关键字。我应该使用类似于highlightKeyWords的东西吗。设置样式（“-fx背景填充：白色”）？

CSS：

.highlightKeyWords{
-fx-font-size:13px;
-fx-background-color: grey;
-fx-background-fill: yellow;
}

在这里，-fx-backend-填充：黄色；可以很好地突出显示，但是如何在处理程序中将其更改为白色？

Answer 1

使用在代码区定义的“查找颜色”，并使用设置样式进行更改。

首先，只需将CSS id添加到CodeArea：

 <CodeArea id="codeBox" fx:id="codeBox" wrapText="true" prefHeight="240.0"    prefWidth="339.0">
 </CodeArea>

然后更新CSS如下：

#codeBox {
    -keyword-highlight: yellow ;
}

.highlightKeyWords{
    -fx-font-size:13px;
    -fx-background-color: grey;
    -fx-background-fill: -keyword-highlight;
}

然后在您的初始化（）方法中执行

highlightBox.selectedProperty().addListener((obs, wasSelected, isNowSelected) -> {
    if (isNowSelected) {
        codeBox.setStyle("-keyword-highlight: yellow ;");
    } else {
        codeBox.setStyle("-keyword-highlight: white ;");
    }
});