让iframe可编辑 

function EnableEdit()
{
    var editor;
    editor = document.getElementById("HtmlEdit").contentWindow;
  // 针对IE浏览器, make it editable
    editor.document.designMode = 'On';
    editor.document.contentEditable = true;
  // For compatible with FireFox, it should open and write something to make it work
    editor.document.open();
    editor.document.writeln('<html><head>');
    editor.document.writeln('<style>body {background: white;font-size:9pt;margin: 2px; padding: 0px;}</style>');
    editor.document.writeln('</head><body></body></html>');
    editor.document.close();
}

<iframe  ID="HtmlEdit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="312">
</iframe>

 

<iframe src="" name="editor" id="editor" style="border: 1px solid rgb(204, 204, 204);" frameborder="0" height="200" width="400"></iframe>

<div>
	<input type="button" onclick="insert(1)" value="insert image">
	<input type="button" onclick="insert(2)" value="insert text">
</div>

<script>
	_win=$('#editor')[0].contentWindow; // 我们用 _win 变量代替 iframe window 
	_doc=_win.document;                        // 用 _doc 变量代替 iframe的document 
	_doc.designMode = 'On';

	if( $.browser.msie ){
	   _doc.write('<img src="pet_store_api.png">');
	}else{
		 _doc.open();
		 _doc.write('<img src="pet_store_api.png">');
		 _doc.close();
	}

	function insertHTML( sHtml )
	{
			   _win.focus(); 
			   if(   $.browser.msie ){
					  _doc.selection.createRange().pasteHTML( sHtml ) ;
			   }else{ 
					  _doc.execCommand( 'InsertHtml' , '' , sHtml );
			   }
			   
	}
	function insert(type){
		if(type==1){
			insertHTML( '<img src="pet_store_api.png">' );
		}else{
			insertHTML( 'haha' );
		}
	}
</script>

　　

posted @ 2015-09-24 18:09  Tobinary  阅读(1019)  评论(0)    收藏  举报