GWT：如何从当前光标位置或选定的文本中获取CSS样式属性？

Question

我曾经使用过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 and size：3和BG-Color：Red

对我来说，如果使用JavaScript或JQuery或GWT解决方案，则没有问题。

我想做类似Google文档的工具栏。

如果有人有想法，请帮助我如何获得它？

Answer 1

我看到两个选择。 您可以使用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（）方法。 您也可以使用MouseHandler或某种背景代码（也称为Timer）来触发。 一旦知道鼠标指针在哪里，就获取元素并分析元素的样式。