在线编辑器兼容Firefox,IE Demo

最新推荐文章于 2024-03-18 09:48:37 发布

hwpokay

最新推荐文章于 2024-03-18 09:48:37 发布

阅读量215

点赞数

文章标签： IE Firefox 浏览器 HTML JavaScript ViewUI

rw_editor.js

/*
*write by 惠万鹏
*date 2008-12-04
*/

/* * 判断是ie浏览器还是火狐浏览器 */
var IE_BROWSER = 0 ;
var FF_BROSWER = 1 ;

var browserType = IE_BROWSER;
if (window.netscape)
{
    browserType = FF_BROSWER;
}

/* * 得到iframe对象的内容窗口 */
var oEditor = document.getElementById( " editeFrame " ).contentWindow;

oEditor.document.designMode = 'On';
oEditor.document.contentEditable = true ;
/* * 兼容火狐浏览器 */
oEditor.document.write(' < html >< body > aaa </ body ></ html > ');
oEditor.document.close();

/* * 个性化窗口 */
var individuationWin = null ;
/* * 更改代码窗口 */
var editorWin = null ;
/* * 预览窗口 */
var previewWin = null ;
/* * 编辑开始*********************************************** */
function initialHtml(hmtl)
{
    oEditor.document.designMode = " On " ;
    oEditor.document.contentEditable = true ;
    oEditor.document.write(hmtl);
    oEditor.document.close();
}
/* * 编辑结束*********************************************** */

/* * 编辑开始*********************************************** */
function editor()
{
     if (editorWin == null    || editorWin.closed == true )
    {
         var iWidth = 800 ,iHeight = 600 ; // 弹出窗口的宽度,弹出窗口的高度;
          var iTop = (window.screen.availHeight - 30 - iHeight) / 2 ; // 获得窗口的垂直位置;
           var iLeft = (window.screen.availWidth - 10 - iWidth) / 2 ;   // 获得窗口的水平位置;

           var winParameters = " width= " + iWidth + " ,height= " + iHeight;
          winParameters += " ,left= " + iLeft + " ,top= " + iTop;
          winParameters += " ,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no " ;

        editorWin = window.open( " editCode.html " , " 编辑原代码窗口 " ,winParameters);
    }
     else
    {
        editorWin.focus();
    }
}
/* * 编辑结束*********************************************** */

/* * 个性化开始*********************************************** */
function individuation()
{
     /* * 兼容ie和fireFox */
     if (individuationWin == null || individuationWin.closed == true )
    {
         var iWidth = 200 ,iHeight = 100 ;
          var iTop = (window.screen.availHeight - 30 - iHeight) / 2 ;
           var iLeft = (window.screen.availWidth - 10 - iWidth) / 2 ;

           var winParameters = " width= " + iWidth + " ,height= " + iHeight;
          winParameters += " ,left= " + iLeft + " ,top= " + iTop;
          winParameters += " ,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no " ;

        individuationWin = window.open( " individuation.html " , " 个性化窗口 " ,winParameters);
    }
     else
    {
        individuationWin.focus();
    }
}
/* * 个性化结束*********************************************** */

/* * 预览开始*********************************************** */
function perview()
{
     if (previewWin != null && ! previewWin.closed)
    {
        previewWin.close();
    }
     var iWidth = 1024 , iHeight = 800 ;
      var iTop = (window.screen.availHeight - 30 - iHeight) / 2 ;
       var iLeft = (window.screen.availWidth - 10 - iWidth) / 2 ;

       var winParameters = " width= " + iWidth + " ,height= " + iHeight;
      winParameters += " ,left= " + iLeft + " ,top= " + iTop;
      winParameters += " ,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no " ;

    previewWin = window.open( "" , " 预览 " ,winParameters);
     var html = getAllText();
    previewWin.document.write(html);
}
/* * 预览结束*********************************************** */

/* * 得到所有文本-开始*********************************************** */
function getAllText()
{
     var html = " html><body></body></html> " ;
     if (browserType == IE_BROWSER)
    {
        html = _getAllText4IE();
    }
     else if (browserType == FF_BROSWER)
    {
        html = _getAllText4FF();
    }
     else
    {
        alert( " this software only for ie and firefox! " );
    }
     return html;
}

function _getAllText4IE()
{
     return oEditor.document.lastChild.outerHTML;
}

function _getAllText4FF()
{
     /* * fireFox下没有outerHTML,所以手工加上html标签 */
     return " <html> " + oEditor.document.documentElement.innerHTML + " </hmtl> " ;
}
/* * 得到所有文本-结束*********************************************** */

/* *复制-开始 ************************************************ */
function copy()
{
     if (browserType == IE_BROWSER)
    {
        _getCopy4IE();
    }
     else if (browserType == FF_BROSWER)
    {
        _getCopy4FF();
    }
     else
    {
        alert( " this software only for ie and firefox! " );
    }
}

function _getCopy4IE()
{
     var selectedText = oEditor.document.selection.createRange().text;
     /* * 执行拷贝操作 */
    setClipboard(selectedText);
}

function _getCopy4FF()
{
     /* * 火狐下得到选中的文本 */
     var selectedText = oEditor.getSelection().toString();
     /* * 执行拷贝操作 */
    setClipboard(selectedText);
}
/* *复制-结束 ************************************************ */

/* *粘贴-开始************************************************ */
function paste()
{
     var html = getClipboard();
    insertHTML(html);
}
/* *粘贴-结束************************************************ */

/* *插入HTML-开始************************************** */
function insertHTML(html)
{
     if (browserType == IE_BROWSER)
    {
        _insertHTML2IE(html);
    }
     else if (browserType == FF_BROSWER)
    {
        _insertHTML2FF(html);
    }
     else
    {
        alert( " this software only for ie and firefox! " );
    }
}

function _insertHTML2IE(html)
{
     if (oEditor.document.selection.type.toLowerCase() != " none " )
    {
        oEditor.document.selection.clear() ;
    }
    oEditor.document.selection.createRange().pasteHTML(html) ;
}

function _insertHTML2FF(html)
{
     var r = oEditor.getSelection().getRangeAt( 0 );
     var oFragment = r.createContextualFragment(html);
    r.deleteContents();
    r.insertNode(oFragment);
}
/* *插入HTML-结束************************************** */

editor.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
< head >
     < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" >
</ head >
< body >
     < input type ="button" value ="复制" onclick ="copy();"
     />< input type ="button" value ="粘贴" onclick ="paste();"
     />< input type ="button" value ="编辑" onclick ="editor();"
     />< input type ="button" value ="个性" onclick ="individuation();"
     />< input type ="button" value ="预览" onclick ="perview();" />< br />
     < iframe id ="editeFrame" marginheight ="1" marginwidth ="1" width ="550" height ="286" scrolling ="auto" ></ iframe >
     < script type ="text/javascript" src ="copyPaste.js" ></ script >
     < script type ="text/javascript" src ="rw_editor.js" ></ script >
</ body >
</ html >

individuation.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
   < head >
     < title > 个性化设置 </ title >
     < script type ="text/javascript" >
         function individuation()
        {
            window.opener.insertHTML(document.getElementById( " individuationType " ).value);
        }
     </ script >
   </ head >

   < body >
     < select id ="individuationType" name ="individuationType" style ="width:100;" >
         < option value ="#name#" > 姓名 </ option >
         < option value ="#sex#" > 性别 </ option >
         < option value ="#age#" > 年龄 </ option >
         < option value ="#email#" > EMAIL </ option >
         < option value ="#address#" > 地址 </ option >
     </ select >
     < input type ="button" value ="确定" onclick ="individuation();" >
   </ body >
</ html >

hwpokay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在线编辑器兼容Firefox,IE Demo

rw_editor.js&lt;!--&lt;br /&gt;&lt;br /&gt;Code highlighting produced by Actipro CodeHighlighter (freeware)&lt;br /&gt;http://www.CodeHighlighter.com/&lt;br /&gt;&lt;br /&gt;--&gt;/**write by 惠万...
复制链接

扫一扫