JEditorPane:网页布局已损坏

Question

我正在渲染一些在JEditorPane中分层的图像。我读到过JEditorPane在最好的情况下相当不稳定，但我希望这是我的HTML代码或其他东西的问题。下面是我的内容在浏览器中的外观：

​

​

以及它在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！

Answer 1

你能做到..。但这并不简单..。因为JEditorPane没有CSS的绝对定位...因此，您必须首先识别某些元素是否具有扩展ViewFactory的position:absolute或position:fixed属性，类似于：

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...

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

要同步这真的很难允许编辑，但如果你只想用它们来显示，它必须更简单...

好的..。视图必须如下所示：

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...
    }
}

我希望这能帮到你。阿!还有一件事:如果你这样做，你必须确保你的视图不是不透明的，这意味着，所有的视图元素，在另一种情况下，你的元素将有一个空白的矩形。

另外，您可能需要检查视图的正确尺寸...以getAbsoluteX / getAbsoluteY的方式获取宽度/高度属性。

Answer 2

JEditorPane在CSS绝对定位方面不是很好。我认为您试图使用JEditorPane实现的目标超出了它所能提供的范围。