JEdi​​torPane:HTML 布局损坏 [英] JEditorPane: HTML Layout Broken

查看:29
本文介绍了JEdi​​torPane:HTML 布局损坏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在渲染一些在 JEditorPane 中分层的图像.我读过 JEditorPane 充其量是非常不稳定的,但是我希望这是我的 HTML 代码或其他内容的问题.以下是我的内容在浏览器中的外观:

I am rendering some images that are layered in a JEditorPane. I've read that JEditorPane is pretty rocky at best, however I am hoping that this is an issue with either my HTML code or something else. Here's how my content looks in the browser:

以及它在 JScrollBar(JEditorPane) 中的外观:

And how it looks in a JScrollBar(JEditorPane):

HTML 代码:http://pastebin.com/EixG3WLH

Java 代码:

File f = new File("index.html");
JEditorPane jep = new JEditorPane(f.toURI().toURL());
JScrollPane sp = new JScrollPane(jep);

JFrame frame = new JFrame();
frame.add(sp);
jep.setEditable(false);

frame.setVisible(true);
frame.setSize(500, 500);
frame.setTitle(wpj.getParse().getTitle());

如果这个问题可以在 JEditorPane 中解决,我真的宁愿不使用 FlyingSaucer!

I'd really rather not use FlyingSaucer if this issue can be resolved in a JEditorPane!

推荐答案

你可以做到...但它并不简单...因为 JEditorPane 没有 CSS 绝对定位...所以,你必须首先在所有,识别某些元素是否具有扩展 ViewFactory 的 position:absolute 或 position:fixed 属性,例如:

You can do it... but it's not really simple... because JEditorPane doesn't have CSS absolute positioning... so, you must first at all, recognize if some element had the position:absolute or position:fixed attribute extending the ViewFactory, something like:

public class ExtendedHTMLEditorKit extends HTMLEditorKit{
//.... other code here
    public class MyHTMLFactory extends HTMLFactory{
      //other code here
      @Override
      public View create(Element elem) {
          if (isLayered(elem)){ //it means, it has position attribute
             return new PositionedView(elem);
          }
          else 
            return super.create(elem);
      }

      boolean isLayered(Element elem){
          SimpleAttributeSet sas = new  SimpleAttributeSet(elem);
          StyleSheet styles = (HTMLDocument elem.getDocument).getStyleSheet();
          Tag tag = element.getAttributes().getAttribute(AttributeSet.NameAttribute);
          sas.addAttributes(styleSheet.getRule(tag, element));
          return sas.isDefined("position") 
            && !sas.getAttribute("position").toString().equalsIgnorecase("static");
      }
    }
}

在这种情况下,我们需要为您的元素构建一个正确的视图...我不知道您是只是定位图像(在这种情况下,它可能很简单)还是很多东西... 我可以在您的代码中看到,您正在使用 div...

In this case, we need then to build a correct view for your element... I don't know if you're only positioning images (in this case, it could be simple) or a lot of things... I can see on your code, you're using divs...

让我或多或少地解释一下我的工作:我创建了一个 ComponentView,并将一个新的 JEditorPane 作为组件返回,我在其中放置了原始元素的 innerCode ......然后,将其移动到正确的位置父编辑器...

Let me explain more or less what I do: I've created a ComponentView, and returning as a component a new JEditorPane, where I put the innerCode of the original element... and after that, move it on correct position of parent editor...

同步这个真的很难允许编辑,但如果你只是想用它们来显示,那肯定更简单...

To synchronize this is really dificult to allow edit, but if you only whant to use them to display, it must be more simple...

好的...视图必须是这样的:

ok.. the view must be like:

public class PositionedView extends ComponentView{
   private JEditorPane view;
   private JEditorPane parent;

    @Override
    public Component createComponent(){
       if (view == null){
         view = new JEditorPane();
       }
       String innerText = dumpInnerText(getElement());
       view.setText(innerText);
       view.setLocation(getAbsoluteX(), getAbsoluteY());
       parent.add(view);
    }

    @Override
    public void setParent(View parent) {
      if (parent != null) {

        java.awt.Container host = parent.getContainer();
        if (host != null && host instanceof JEditorPane) {
            parent = (JEditorPane) host;
        }
      }

    super.setParent(parent);
   }

    protected int getAbsoluteX() {
     //search for the attribute left or right and calculate the position over parent
    }

    protected int getAbsoluteY(){
     //search for the attribute top or bottom and calculate the position over parent
    }

    protected String dumpInnerText(Element element){
     //there are several ways to do it, I used my own reader/writer, 
     //because I've need add special tags support...
    }
}

我希望这对你有帮助......啊!还有一件事:如果你这样做,你必须确保你的视图不是不透明的,这意味着,所有的视图元素,在另一种情况下,你的元素会有一个空白的矩形.

I hope this helps you... Ah! there are another thing: if you do this, you must secure your view is not opaque, and it means, all the view elements, on the other case, you will have a blank rect for your elements.

另一件事,您可能需要检查视图的正确尺寸...执行 getAbsoluteX/getAbsoluteY 以获得宽度/高度属性.

Another thing, you maybe need to check for the correct dimension of the view... do as getAbsoluteX / getAbsoluteY to obtain width / height attributes.

这篇关于JEdi​​torPane:HTML 布局损坏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆