GWT:如何从当前光标位置或所选文本中获取css样式的属性

GWT: How to get css style attributes from current cursor positon or selected text?

本文关键字：文本 获取 css 属性 样式 位置 光标 GWT      更新时间：2024-02-17

我使用过https://code.google.com/p/google-web-toolkit/source/browse/tags/2.5.0/samples/showcase/src/com/google/gwt/sample/showcase/client/content/text/RichTextToolbar.java

我想显示文本的字体系列、字体大小、颜色和BG颜色，我正在通过（GWT）Formatter.getForeColor（）获取文本颜色，但仍然不知道如何获取。

示例：<font face="Arial">Apple </font><span style="background-color: rgb(255, 0, 0);"><font face="Courier" size="5">banana</font></span><br>

如果光标在"Apple"中，则应返回字体系列为Arial，如果光标位于"Banana"中，应返回字体家族：Courier和size:3，BG颜色：Red

对我来说，如果解决方案是JavaScript、JQuery或GWT，那没问题。

我想做工具栏像谷歌文档。

如果有人有主意，请帮我怎么得到？

我看到了两个选项。要么使用GWT组件构建UI，以便在代码中添加和读取样式信息，要么尝试使用JSNI获取鼠标指针下方的元素，然后尝试分析该元素。

第一个可能更容易的解决方案如下：

public class FontTest implements EntryPoint {
    public void onModuleLoad() {
        FlowPanel panel = new FlowPanel();
        Label labelA = new Label("Apple");
        labelA.getElement().getStyle().setProperty("fontFamily", "Arial");
        Label labelB = new Label("Banana");
        labelB.getElement().getStyle().setProperty("fontFamily", "Courier");
        labelB.getElement().getStyle().setFontSize(5, Unit.EM);
        labelB.getElement().getStyle().setBackgroundColor("rgb(255, 0, 0)");
        panel.add(labelA);
        panel.add(labelB);
        labelA.addMouseOverHandler(new FontMousOverHandler());
        labelB.addMouseOverHandler(new FontMousOverHandler());
        RootLayoutPanel.get().add(panel);
    }
    private static class FontMousOverHandler implements MouseOverHandler {
        @Override
        public void onMouseOver(MouseOverEvent event) {
            Label label = (Label) event.getSource();
            String font = label.getElement().getStyle()
                    .getProperty("fontFamily");
            String color = label.getElement().getStyle().getBackgroundColor();
            PopupPanel pp = new PopupPanel(true);
            pp.add(new Label(font + " / " + color));
            pp.setPopupPosition(label.getAbsoluteLeft(), label.getAbsoluteTop());
            pp.show();
        }
    }
}

上面的示例经过了简化，您必须使代码更加智能，才能处理HTML属性、CSS样式名称和直接样式的所有变体。

第二个选项是获取当前位于鼠标指针下方的元素。这可以使用一些JSNI魔法来完成：

    private native Element getElementFromPoint(int x, int y) /*-{
            return $wnd.document.elementFromPoint(x, y);
    }-*/;

当然，您需要一个触发器来调用getElementFromPoint（）方法。您也可以使用鼠标处理程序或某种后台代码（也称为计时器）来触发。一旦知道鼠标指针在哪里，就可以获取元素并分析元素的样式。

相关文章：