• 让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>	
    

      

  • 相关阅读:
    【转】selenium自动化测试环境搭建
    【cl】多表查询(内、外连接)
    【cl】子查询应用场景
    udev笔记
    C编译相关
    USB学习笔记-协议
    ARM汇编返回指令
    v4l2框架函数调用关系
    /etc/fstab和/etc/mtab
    各种存储介质的差异
  • 原文地址:https://www.cnblogs.com/makan/p/4836087.html
Copyright © 2020-2023  润新知