非常高级的Javascript WYSIWYG编辑器

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

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.