Obtaining attributes of elements within editable iframe ondblclick
I am developing a wysiwyg HTML editor using javascript and an editable iframe. Prior to developing the editor, I did some research into other HTML editors that use javascript and iframes (including CKEditor), and there is one feature that I am struggling to duplicate.
In some iframe/JS-based HTML editors, if a user wishes to access or edit an element's attributes (eg image dimensions, hyperlink url, table width), they can simply double click the element and a modal div will appear with text boxes containing the attribute values of that element and/or those of the elements within that element.
So far, the closest that I have came to developing a feature like this was to create a script that alerts the HTML code of an area within the iframe that the user double clicks on. I added this code to my HTML page;
<iframe name="wysiwyg" id="wysiwyg" onload="dblClick();"></iframe>
and added this code to my javascript file;
function dblClick(){
document.getElementById("wysiwyg").contentWindow.document.ondblclick=dblClicked;
window.frames["wysiwyg"].document.body.ondblclick=dblClicked;
}
function dblClicked (){
txt = wysiwyg.document.selection.createRange().htmlText;
alert(txt);
}
The problem is that this code only works when a user double clicks and highlights a section of text, for example, double clicking a selection of bold text would alert this piece of code to the user;
<b>text</b>
Anything else that I double click on alerts an error message. Furthermore, it only works properly in Internet Explorer. When I tested it in Firefox, Opera, Chrome, and Safari, the script either did not work or did not work properly (in Firefox, the script alerted error messages as soon as the page was loaded).
What I need is a script that allows the end user to view all the properties of any element they double click on within the editable iframe and works in all major browsers.
I know it would be easier to simply use an existing wysiwyg editor, but I prefer to create my own from scratch as I enjoy the challenge. Also, I know CKEditor does not appear to use iframes like mine, but I am referencing it as an example of the sort of functionality that I wish to achieve.
Any help would be appreciated.
There are various problems/misunderstandings here:
TextRange API, which is not supported in other browsers; dblclick handler twice, unnecessarily. I'd suggest skipping the selection stuff and using event delegation to get the element that was double clicked, which will work in all major browsers.
var iframeWin;
function dblClick() {
iframeWin = document.getElementById("wysiwyg").contentWindow;
iframeWin.document.ondblclick = dblClicked;
}
function dblClicked(evt) {
evt = evt || iframeWin.event;
var target = evt.target || evt.srcElement;
alert(target.tagName);
}
I'd suggest stepping through the problem in manageable chunks rather than trying to pull everything together at once. For instance, I would break it down like:
First, figure out what code you need to implement in order to provide the desired double-click behavior on the current webpage. Probably this will involve some simple code to iteratively assign a double-click handler to every element on the page, instead of just to the <body> element itself. This is ultimately the code that will run inside of your <iframe> , and you can put it there either by appending it directly to the <iframe> HTML, or by running some code within the context of the calling page as you are currently doing.
If necessary, refactor your double-click handler implementation so that there is a single function being called that is passed all the information it needs to handle the click on any element. Define this function in an easily accessible scope, like window._doubleClickHandler . This function definition belongs inside of your <iframe> .
Remove the function definition you came up with in step #2, but leave in place all the code that references/makes use of it. Now your enclosing page has a convenient point for interfacing with the click events coming out of the <iframe> .
When the <iframe> loads, the enclosing page can provide its own definition for the function that you defined in step #2 and then removed in step #3.
And if you go through with all this, I would suggest that there are more useful things that you might do then show an alert with the clicked element's markup inside of it. Like automatically selecting/highlighting the corresponding markup in the HTML editor, or loading the markup snippet into an editable lightbox UI where the user can make changes and then have them automatically applied to the HTML document they are editing.
链接地址: http://www.djcxy.com/p/90000.html