非常先進的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屬性。