我如何使用代码更改颜色 HTMLeditor?
How do i change color HTMLeditor with code?
我制作了一个扩展 HTMLEditor 的自定义 html 编辑器。
我删除了一些按钮并添加了一些。
现在我想添加几个按钮,将输入的文本更改为 1 种特定颜色。
但是我找不到一种方法来更改按钮的 setOnAction 中的文本颜色。
我尝试了几种方法。
1 : html 我在光标位置插入
2 : 设置html编辑器颜色的颜色选择器
(jsCodeInsertHtml 字符串允许 html 在光标处)
String jsCodeInsertHtml = "function insertHtmlAtCursor(html) {\n" +
" var range, node;\n" +
" if (window.getSelection && window.getSelection().getRangeAt) {\n" +
" range = window.getSelection().getRangeAt(0);\n" +
" node = range.createContextualFragment(html);\n" +
" range.insertNode(node);\n" +
" } else if (document.selection && document.selection.createRange) {\n" +
" document.selection.createRange().pasteHTML(html);\n" +
" }\n" +
"}insertHtmlAtCursor('####html####')";
// add a custom button to the top toolbar.
Node nodetop = editor.lookup(".top-toolbar");
if (nodetop instanceof ToolBar) {
ToolBar topbar = (ToolBar) nodetop;
//var1 color
ImageView graphic = new ImageView(var1pic);
Button colorVar1Button = new Button("", graphic);
colorVar1Button.setFocusTraversable(false);
colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent arg0) {
WebView webView=(WebView)editor.lookup("WebView");
WebEngine engine= webView.getEngine();
//try 1
engine.executeScript(jsCodeInsertHtml.replace("####html####","<p><span style=\"color: rgb(200, 200, 200); caret-color: rgb(200, 200, 200);\">"));
//the HTML is inserted , but no colorchange. i tryed some htmlvariants aswel
//try 2
Node color = editor.lookup(".html-editor-foreground");
((ColorPicker)color).setValue(Color.rgb(200,200,200));
// i notice the button change in the colorpicker ,
// but no change in color happens
topbar.getItems().addAll(colorVar1Button);
找到解决方案。我只需要触发颜色选择器的动作事件就可以让它工作
colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent arg0) {
Node color = editor.lookup(".html-editor-foreground");
((ColorPicker)color).setValue(Color.HOTPINK);
color.fireEvent(new ActionEvent());
}
});
topbar.getItems().addAll(colorVar1Button);
我制作了一个扩展 HTMLEditor 的自定义 html 编辑器。 我删除了一些按钮并添加了一些。
现在我想添加几个按钮,将输入的文本更改为 1 种特定颜色。 但是我找不到一种方法来更改按钮的 setOnAction 中的文本颜色。 我尝试了几种方法。
1 : html 我在光标位置插入
2 : 设置html编辑器颜色的颜色选择器
(jsCodeInsertHtml 字符串允许 html 在光标处)
String jsCodeInsertHtml = "function insertHtmlAtCursor(html) {\n" +
" var range, node;\n" +
" if (window.getSelection && window.getSelection().getRangeAt) {\n" +
" range = window.getSelection().getRangeAt(0);\n" +
" node = range.createContextualFragment(html);\n" +
" range.insertNode(node);\n" +
" } else if (document.selection && document.selection.createRange) {\n" +
" document.selection.createRange().pasteHTML(html);\n" +
" }\n" +
"}insertHtmlAtCursor('####html####')";
// add a custom button to the top toolbar.
Node nodetop = editor.lookup(".top-toolbar");
if (nodetop instanceof ToolBar) {
ToolBar topbar = (ToolBar) nodetop;
//var1 color
ImageView graphic = new ImageView(var1pic);
Button colorVar1Button = new Button("", graphic);
colorVar1Button.setFocusTraversable(false);
colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent arg0) {
WebView webView=(WebView)editor.lookup("WebView");
WebEngine engine= webView.getEngine();
//try 1
engine.executeScript(jsCodeInsertHtml.replace("####html####","<p><span style=\"color: rgb(200, 200, 200); caret-color: rgb(200, 200, 200);\">"));
//the HTML is inserted , but no colorchange. i tryed some htmlvariants aswel
//try 2
Node color = editor.lookup(".html-editor-foreground");
((ColorPicker)color).setValue(Color.rgb(200,200,200));
// i notice the button change in the colorpicker ,
// but no change in color happens
topbar.getItems().addAll(colorVar1Button);
找到解决方案。我只需要触发颜色选择器的动作事件就可以让它工作
colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent arg0) {
Node color = editor.lookup(".html-editor-foreground");
((ColorPicker)color).setValue(Color.HOTPINK);
color.fireEvent(new ActionEvent());
}
});
topbar.getItems().addAll(colorVar1Button);