简单在线编辑器兼容Firefox,IE Demo

http://www.e077.com/html/

/*
*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="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>

简单在线编辑器 兼容Firefox,IE Demo

简单在线编辑器兼容Firefox,IE Demo