在线编辑器 兼容Firefox,IE Demo
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>
| 
