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>