Question

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

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

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

对于一个文本块，边框可能会起作用，但图像等等呢？另外，如果<div>没有ID /名称，怎么指定呢？

Answer 1

您可以使用<iframe>代码，然后设置contentEditable = on。这样，浏览器就会提供WYSIWYG功能。但是，边界等可能不起作用。一些代码：

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属性。

非常高级的Javascript WYSIWYG编辑器

3 个答案: