在线编辑器 兼容Firefox,IE Demo
rw_editor.js
editor.html
individuation.html
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->
/*
*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-结束************************************** */
*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
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->
<!
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 >
< 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
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->
<!
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 >
< 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 >