Very Advanced Javascript WYSIWYG editor

Question

I need a solution where a user could enter the URL of a web page in my system. The page would load, and then the user could click a certain section that he wants to change. So basically what I need is, a way to display a web page inside my app (could possibly be done with frames but I'd prefer not to have a horizontal scroll bar), and then another way to let users select a block of text or a page element.

I.e if a block of text is in a div, hovering above the text would outline that div using a faint green color (hovering away would remove this border/outline), and clicking the text would draw a solid green border around it to show that its been selected, and then some content on my page will show the id of the div, and let the user specify some other info that i need.

So I probably need a way to get all the <div>s, <table>s, <span>s, <p>s and any other 'container' tags, and then have the ability to cause hovering/clicking of them to change their style.border property, and the ability to retrieve their id/name,

For a block of text the border could probably work, but what about images and such? Also, what if a <div> doesn't have an ID/Name, how could it be specified?

Answer 1

This is a very general question. There are lots of content management systems around, that provides something like this.

Also, what if a <div> doesn't have an ID/Name, how could it be specified?

You can identify a node in the DOM by an XPath path. Traverse upwards through the parentNode to create the path.

For a block of text the border could probably work, but what about images and such?

You can set the border property of almost all elements in html.

Answer 2

You could use <iframe> tags, then set contentEditable = on. This way, the browser supplies the WYSIWYG features. The borders, etc. may not work, though. Some code:

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!";

Should work.

Answer 3

If they fit your context, you might consider doing this with either Adobe Flex or Microsoft Silverlight. Both provide the functionality and granularity of control that's more difficult to accomplish in javascript or with a framework, especially if you need to to work consistently with several browsers, across Windows, Mac, and Linux.

Flex uses an enhanced version of javascript for its programming language. Silverlight did similarly with version 1, although with version 2 they only support the .NET languages (which may be better, worse, or indifferent depending on your needs.)

Both describe themselves as tools for RIAs (Rich Internet Applications).