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

Posted 2023-05-08

技术标签:

【中文标题】非常先进的 Javascript 所见即所得编辑器【英文标题】：Very Advanced Javascript WYSIWYG editor 【发布时间】：2010-10-03 08:05:40 【问题描述】：

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

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

所以我可能需要一种方法来获取所有<div>s、<table>s、<span>s、<p>s 和任何其他“容器”标签，然后能够使悬停/单击它们发生变化他们的style.border 属性，以及检索他们的 id/name 的能力，

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

【问题讨论】：

【参考方案1】：

您可以使用<iframe> 标签，然后设置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!";

应该可以。

【讨论】：

【参考方案2】：

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

Flex 在其编程语言中使用了增强版的 javascript。 Silverlight 对版本 1 的处理方式类似，但在版本 2 中它们仅支持 .NET 语言（根据您的需要，这可能更好、更差或无关紧要。）

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

【讨论】：

【参考方案3】：

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