zoukankan      html  css  js  c++  java
  • 让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>	
    

      

  • 相关阅读:
    idea添加类注释和方法注释
    蓝桥杯ALGO-1,区间k大数查询
    personalblog
    ul+li水平居中的几种方法
    前端ps部分
    帝国cms-tab
    帝国cms判断某一字段是否为空
    帝国cms建站总结-(分页)
    Js获取验证码倒计时
    前端截取字符串:JS截取字符串之substring、substr和slice详解
  • 原文地址:https://www.cnblogs.com/makan/p/4836087.html
Copyright © 2011-2022 走看看