I’m currently using Firefox 7.0.1. I’ve been working on a WYSIWYG editor and just recently discovered an issue with embedding content in editable documents. I’m not sure if this is a bug, but when a document has designMode=on embeded content like:
<object height="81" width="100%"> <param name="movie" value="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F8921929"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="81" src="http://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F8921929" type="application/x-shockwave-flash" width="100%"></embed> </object>
… does not display at all in the page. If the design mode is toggled off the content displays just fine, but otherwise the object doesn’t load and it’s nearly impossible to edit around the content since you can’t see where it is. I could build a placeholder, but I would much prefer having the content visible in the document that is being edited. This is the base document that I use within the iframe for editing pages:
var HTML = '<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body></body></html>';
Here is the code for generating the editable iframe doc:
var editor = document.createElement('iframe');
document.getElementById(parent_id).appendChild(editor);
var editor_doc = editor.contentWindow.document || editor.contentDocument;
editor_doc.write(HTML);
editor_doc.close();
editor_doc.designMode = "On";
Is there any solution or workaround for this problem?
I ended up solving this by parsing the embed, object, and param tags and placed the the data in an iframe before adding it to the document. This is an excellent solution for anyone using a transitional doctype.