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（）获取文本颜色，但剩下的我不知道如何获取。

示例：Apple banana 

如果光标在'Apple'中它应该返回字体系列是Arial，如果光标在'Banana'它应该返回font-family：Courier和size：3和BG-Color：Red

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

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

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

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或某种背景代码（a.k.a.Timer）来触发。一旦知道了鼠标指针的位置，就获取元素并分析元素的样式。

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

1 个答案: