非常先进的Java所见即所得编辑器

Question

我需要一个解决方案，使用户可以在我的系统中输入网页的URL。 页面将加载，然后用户可以单击他要更改的特定部分。 因此，基本上我需要的是一种在应用程序内显示网页的方法（可以用框架完成，但我不希望使用水平滚动条），然后通过另一种方式让用户选择文本块或页面元素。

即，如果一个文本块位于div ，则将鼠标悬停在文本上方会使用淡绿色勾勒出该div的轮廓（悬停将删除该边框/轮廓线），单击该文本会在其周围绘制一个纯绿色边框以显示选择它，然后我页面上的某些内容将显示div的ID，并让用户指定我需要的其他信息。

因此，我可能需要一种方法来获取所有<div>s ， <table>s ， <span>s ， <p>s和任何其他“容器”标签，然后能够使它们悬停/单击以更改其style.border属性以及获取其ID /名称的功能，

对于一块文本来说，边框可能会起作用，但是图像之类的呢？ 另外，如果<div>没有ID /名称，该如何指定呢？

Answer 1

您可以使用<iframe>标记，然后将contentEditable = on设置contentEditable = on 。 这样，浏览器就提供了所见即所得的功能。 但是，边框等可能无法工作。 一些代码：

var idno = 0;

function addEditor(parent, url) {
    parent.innerHTML += '<iframe src="' + url + '" id="edit' + idno + '"></iframe>';
    var el = document.getElementById("edit" + idno);
    el.contentEditable = true;
    return el;
}

addEditor(document.body, "http://google.com").innerHTML += "Hello!";

应该管用。

Answer 2

如果它们适合您的上下文，则可以考虑使用Adobe Flex或Microsoft Silverlight进行此操作。 两者都提供了在javascript或框架中更难实现的控制功能和粒度，尤其是如果您需要在Windows，Mac和Linux上与多个浏览器保持一致的情况下。

Flex将javascript的增强版本用于其编程语言。 Silverlight在版本1中也做了类似的工作，尽管在版本2中，它们仅支持.NET语言（根据您的需要，它可能会更好，更坏或无动于衷。）

两者都将自己描述为RIA（富Internet应用程序）的工具。

Answer 3

这是一个非常普遍的问题。 周围有很多内容管理系统，它们提供了类似的内容。

另外，如果<div>没有ID /名称，该如何指定呢？

您可以通过XPath路径标识DOM中的节点。 向上遍历parentNode以创建路径。

对于一块文本来说，边框可能会起作用，但是图像之类的呢？

您可以设置html中几乎所有元素的border属性。