您的位置:首页 > Web前端 > JavaScript

在IE里直接编辑文档格式

2004-11-10 04:09 507 查看
<HTML>
 <HEAD>
  <title>
   Blog¹ÜÀí</title>
  <link href="/admin/resources/admin.css" rel="stylesheet" type="text/css" title="" media="screen" />
 </HEAD>
 <body id="Posts">
  <form name="frmMain" method="post" action="show.asp" onsubmit="if (!ValidatorOnSubmit()) return false;FTB_CopyHtmlToHidden(ftbBody_editor,document.getElementById('ftbBody'),ftbBody_HtmlMode);" id="frmMain">

<script language="javascript">
function FTB_ftbBody_onKeyDown_LineBreak() {
 editor = ftbBody_editor;
 var _TAB = 9;
 var _ENTER = 13;
 var _QUOTE = 222;
 var _OPENCURLY = '“';
 var _CLOSECURLY = '”';

 if (editor.event.keyCode == _TAB && editor.event.ctrlKey) {
  //HtmlMode to DesignMode (Ctrl+TAB)
  if (ftbBody_HtmlMode && editor.event.keyCode == _TAB && editor.event.ctrlKey) {
   FTB_SetActiveTab(document.getElementById('ftbBody_DesignModeTab'));
   ftbBody_ChangeMode(editor,document.getElementById('ftbBody_TempFrame'),'ftbBody_Toolbar',false,true);
  }
  //DesignMode to HtmlMode (Ctrl+TAB)
  if (!ftbBody_HtmlMode && editor.event.keyCode == _TAB && editor.event.ctrlKey) {
   FTB_SetActiveTab(document.getElementById('ftbBody_HtmlModeTab'));
   ftbBody_ChangeMode(editor,document.getElementById('ftbBody_TempFrame'),'ftbBody_Toolbar',true,true);
  }
  ftbBody_HtmlMode = !ftbBody_HtmlMode;
 }
 if (editor.event.keyCode == _QUOTE && editor.event.shiftKey && !ftbBody_HtmlMode) {
  var sel = editor.document.selection;
  if (sel.type == 'Control') return;
  var r = sel.createRange();
  var before = FTB_CharBefore(r);
  var after = FTB_CharAfter(r);
  var r = sel.createRange();

  if (before == 'start') {
   r.pasteHTML(_OPENCURLY);
   editor.event.cancelBubble = true;
   editor.event.returnValue = false;
   return false;
  } else if (before != ' ' && after == 'end') {
   r.pasteHTML(_CLOSECURLY);
   editor.event.cancelBubble = true;
   editor.event.returnValue = false;
   return false;
  } else if (before == ' ' && after == 'end') {
   r.pasteHTML(_OPENCURLY);
   editor.event.cancelBubble = true;
   editor.event.returnValue = false;
   return false;
  } else if (before != ' ' && after == ' ') {
   r.pasteHTML(_CLOSECURLY);
   editor.event.cancelBubble = true;
   editor.event.returnValue = false;
   return false;
  } else {
   r.pasteHTML(_OPENCURLY);
   editor.event.cancelBubble = true;
   editor.event.returnValue = false;
   return false;
  }
 }
 // Ensure TAB key doesn't cause editor to loose focus
 if (editor.event.keyCode == _TAB) {
  editor.document.selection.createRange().text = '/t/t/t/t';
  editor.event.cancelBubble = true;
  editor.event.returnValue = false;
 }
 if (editor.event.keyCode == _ENTER) {
  var sel = editor.document.selection;
  if (sel.type == 'Control') {
   return;
  }
  var r = sel.createRange();
  if ((!FTB_CheckTag(r.parentElement(),'LI'))&&(!FTB_CheckTag(r.parentElement(),'H'))) {
   r.pasteHTML('<br>');
   editor.event.cancelBubble = true;
   editor.event.returnValue = false;
   r.select();
   r.collapse(false);
   return false;
  }
 }


function FTB_ftbBody_onPaste() {}

</script>

<script language="JavaScript">
function FTB_Underline(editor,htmlmode) {
 FTB_Format(editor,htmlmode,'underline');
}

function FTB_Bold(editor,htmlmode) {
 FTB_Format(editor,htmlmode,'bold');
}
</script>

<script language="JavaScript">
// *******************************************
// Universal Editor Functions
// *******************************************
function FTB_CopyHtmlToHidden(editor,hiddenHtml,htmlmode) {
 if (htmlmode) {
  hiddenHtml.value = editor.document.body.innerText; 
 } else {
  hiddenHtml.value = editor.document.body.innerHTML; 
 }
 if (hiddenHtml.value == '<P> </P>') {
  hiddenHtml.value = '';
 }
}
function FTB_Format(editor,htmlmode,format) {
 if (htmlmode) return;
 editor.focus();
 editor.document.execCommand(format,'',null);
}
function FTB_CheckTag(item,tagName) {
 if (item.tagName.search(tagName)!=-1) {
  return item;
 }
 if (item.tagName=='BODY') {
  return false;
 }
 item=item.parentElement;
 return FTB_CheckTag(item,tagName);
}
function FTB_CharBefore(sel) {
 if (sel.move('character',-1) == -1) {
  sel.expand('character');
  return sel.text;
 } else {
  return 'start';
 }
}
function FTB_CharAfter(sel) {
 var sel2 = sel;
 if (sel.expand('character')) {
  sel2.move('character',1);
  sel2.expand('character');
  return sel2.text;
 } else {
  return 'end';
 }
}
function FTB_CharBefore(r) {
 if (r.move('character',-1) == -1) {
  r.expand('character');
  return r.text;
 } else {
  return 'start';
 }
}
function FTB_CharAfter(r) {
 var r2 = r;
 if (r.expand('character')) {
  r2.move('character',1);
  r2.expand('character');
  return r2.text;
 } else {
  return 'end';
 }
}
function FTB_GetRangeReference(editor) {
 editor.focus();
 var objReference = null;
 var RangeType = editor.document.selection.type;
 var selectedRange = editor.document.selection.createRange();

 switch(RangeType) {
  case 'Control' :
   if (selectedRange.length > 0 )  {
    objReference = selectedRange.item(0);
   }
   break;

  case 'None' :
   objReference = selectedRange.parentElement();
   break;

  case 'Text' :
   objReference = selectedRange.parentElement();
   break;
 }
 return objReference
}
// ********************************************
// Style Functions
// ********************************************
function FTB_SetButtonStyle(buttonTD,style,checkstyle) {
 if (buttonTD == null) return;
 if (buttonTD.className != checkstyle)
  buttonTD.className = style;
}
function FTB_GetClassSubName(className) {
 underscore = className.indexOf("_");
 if (underscore < 0) return className;
 return className.substring(underscore+1);
}
function FTB_ButtonOver(theTD,editorname,imageOver,imageDown) {
 FTB_SetButtonStyle(theTD,editorname+'_ButtonOver',null);
 if (eval(editorname+'_OverImage').src != '') theTD.background=eval(editorname+'_OverImage').src;
 
 if(theTD.children.length && theTD.children[0].tagName == "IMG" && imageOver){
  oldSrc = theTD.children[0].src;
  if (oldSrc.indexOf('.over.') == -1) {
   theTD.children[0].src=oldSrc.substring(0, oldSrc.length-4) + ".over.gif";
  }
 }
}
function FTB_ButtonOut(theTD,editorname,imageOver,imageDown) {
 FTB_SetButtonStyle(theTD,editorname+'_ButtonNormal',null);
 document.body.style.cursor = 'default';
 theTD.background='';
 if(theTD.children.length && theTD.children[0].tagName == "IMG"){
  oldSrc = theTD.children[0].src;<
4000
br />  if (oldSrc.indexOf('.over.') > 0) {
   theTD.children[0].src=oldSrc.substring(0, oldSrc.length-9) + ".gif";
  }
  if (oldSrc.indexOf('.down.') > 0) {
   theTD.children[0].src=oldSrc.substring(0, oldSrc.length-9) + ".gif";
  }
 }
}
function FTB_ButtonDown(theTD,editorname,imageOver,imageDown) {
 document.body.style.cursor = 'default';
 FTB_SetButtonStyle(theTD,editorname+'_ButtonDown',null);
 if (eval(editorname+'_DownImage').src != '') theTD.background=eval(editorname+'_DownImage').src;
 if(theTD.children.length && theTD.children[0].tagName == "IMG" && imageDown == 1){
  oldSrc = theTD.children[0].src;
  if (oldSrc.indexOf('.over.') > 0) {
   theTD.children[0].src=oldSrc.substring(0, oldSrc.length-9) + ".down.gif";
  }
 }
}
function FTB_ButtonUp(theTD,editorname,imageOver,imageDown) {
 document.body.style.cursor = 'auto';
 FTB_SetButtonStyle(theTD,editorname+'_ButtonOver',null);
 if (eval(editorname+'_OverImage').src != '') theTD.background=eval(editorname+'_OverImage').src;
 if(theTD.children.length && theTD.children[0].tagName == "IMG" && imageOver == 1){
  oldSrc = theTD.children[0].src;
  if (oldSrc.indexOf('.over.') == -1) {
   theTD.children[0].src=oldSrc.substring(0, oldSrc.length-4) + ".over.gif";
  }
 }
}
function FTB_SetActiveTab(theTD,editorname) {
 parentTR = theTD.parentElement;
 selectedTab = 1;
 totalButtons = parentTR.cells.length-1;
 for (var i=1;i< totalButtons;i++) {
  parentTR.cells[i].className = editorname + "_TabOffRight";
  if (theTD == parentTR.cells[i]) { selectedTab = i; }

 }

 if (selectedTab==1) {
  parentTR.cells[0].className = editorname + "_StartTabOn";
 } else {
  parentTR.cells[0].className = editorname + "_StartTabOff";
  parentTR.cells[selectedTab-1].className = editorname + "_TabOffLeft";
 }

 theTD.className = editorname + "_TabOn";
}
function FTB_TabOver() {
 document.body.style.cursor='default';
}
function FTB_TabOut() {
 document.body.style.cursor='auto';
}

</script>

<script language="JavaScript">
img_DotText_ButtonOverImage = new Image();
img_DotText_ButtonOverImage.src = "images/toolbarbutton.over.gif";
img_DotText_ButtonDownImage = new Image();
img_DotText_ButtonDownImage.src = "images/toolbarbutton.down.gif";

</script>

<style>
td.ftbBody_ButtonNormal {
 border: 1 solid Transparent;
 background-color:  Transparent;
 font-family: MS Sans Serif;
 font-size: 10pt;
}
td.ftbBody_ButtonOver {
 border-top: 1 solid #000080; 
 border-left: 1 solid #000080;
 border-right: 1 solid #000080;
 border-bottom: 1 solid #000080;
 
 font-family: MS Sans Serif;
 font-size: 10pt;
}
td.ftbBody_ButtonDown {
 border-top: 1 solid #000080; 
 border-left: 1 solid #000080;
 border-right: 1 solid #000080;
 border-bottom: 1 solid #000080;
 
 font-family: MS Sans Serif;
 font-size: 10pt;
}
div.ftbBody_Toolbar {
 margin-bottom: 1px;
 margin-right: 2px;
 float: left;
 background-image: url(images/toolbar.background.gif);
}
iframe.ftbBody_iframe {
 width:100%;
 height:100%;
 border-right: 1 solid Transparent;
 border-left: 1 solid Transparent;
 border-top: 1 solid Transparent;
 border-bottom: 1 solid Transparent;
 frameBorder: 0;
}
</style>

<input type="hidden" name="ftbBody" id="ftbBody" value="">
<iframe  name="ftbBody" id="ftbBody_TempFrame" style="display:none;"></iframe>

<!-- Start Toolbar -->
<table id="BodyTable" border="0" cellpadding="0" cellspacing="0">
 <tr>
   <TD NOWRAP class="ftbBody_ButtonNormal" onClick="FTB_Bold(ftbBody_editor, ftbBody_HtmlMode);"
   onMouseOver="FTB_ButtonOver(this,'ftbBody',0,0);"
   onMouseOut="FTB_ButtonOut(this,'ftbBody',0,0);"
   onMouseDown="FTB_ButtonDown(this,'ftbBody',0,0);"
   onMouseUp="FTB_ButtonUp(this,'ftbBody',0,0);"><IMG UNSELECTABLE="on"  SRC="images/bold.gif" ALT="粗体" WIDTH=21px HEIGHT=20px align=absmiddle></TD>
   <TD NOWRAP class="ftbBody_ButtonNormal" onClick="FTB_Underline(ftbBody_editor, ftbBody_HtmlMode);"
   onMouseOver="FTB_ButtonOver(this,'ftbBody',0,0);"
   onMouseOut="FTB_ButtonOut(this,'ftbBody',0,0);"
   onMouseDown="FTB_ButtonDown(this,'ftbBody',0,0);"
   onMouseUp="FTB_ButtonUp(this,'ftbBody',0,0);"><IMG UNSELECTABLE="on"  SRC="images/underline.gif" ALT="下划线" WIDTH=21px HEIGHT=20px></TD> </tr>
  </tr>
</table>
<br>
<table border=0 cellpadding=0 cellspacing=0>
 <TR>
  <TD>
  <iframe  id="ftbBody_editor" CLASS="ftbBody_iframe" name="ftbBody_editor" onBlur="FTB_CopyHtmlToHidden(ftbBody_editor,document.getElementById('ftbBody'),ftbBody_HtmlMode);"></IFRAME>
  </td>
 </tr>
</table>
 
<input type="submit" value="submit" >

<script language="javascript" type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(clientInformation) != "undefined" && clientInformation.appName.indexOf("Explorer") != -1) {
    if ((typeof(Page_ValidationVer) != "undefined") && (Page_ValidationVer == "125"))
        ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    return true;
}
// -->
</script>
       

  
<script language="JavaScript">
function ftbBody_Initialize(editor,hiddenHtml) {
 editor.document.designMode = 'On';
 editor.document.open();
 editor.document.write(hiddenHtml.value);
 editor.document.close();
 editor.document.contentEditable = 'True';
 //editor.document.body.style.margin="6 px";
 //editor.document.body.style.border="0";
 ftbBody_ApplyEditorStyles(editor);
}
function ftbBody_ApplyEditorStyles(editor) {
 bs = editor.document.body.style;
 bs.scrollbar3dLightColor= '#D4D0C8';
 bs.scrollbarArrowColor= '#000000';
 bs.scrollbarBaseColor= '#D4D0C8';
 bs.scrollbarDarkShadowColor= '#D4D0C8';
 bs.scrollbarFaceColor= '#D4D0C8';
 bs.scrollbarHighlightColor= '#808080';
 bs.scrollbarShadowColor= '#808080';
 bs.scrollbarTrackColor= '#D4D0C8';
 bs.border='0';
}
function ftbBody_ChangeMode(editor,tempframe,toolbarname,goToHtmlMode,autohide) {
 var toolbar = document.getElementById(toolbarname);
 var sTmp;
 if (goToHtmlMode) {
  sTmp=editor.document.body.innerHTML;   

  editor.document.body.style.fontFamily = 'Courier New, Courier New';
  editor.document.body.style.fontSize = '10pt';
  if (toolbar != null && autohide) {
   toolbar.style.display = 'none';
  }
  editor.document.body.innerText=sTmp;
  return true;
 } else {
  // go to Design Mode
  sTmp=editor.document.body.innerText;
  editor.document.body.style.fontFamily = '';
  editor.document.body.style.fontSize = '';
  if (toolbar != null && autohide) {
   toolbar.style.display = 'inline';
  }
  editor.document.body.innerHTML=sTmp;   
  ftbBody_ApplyEditorStyles(editor);
  editor.focus();
  return true;
 }
}
FTB_HelperFilesPath = '';
FTB_HelperFilesParameters = '';
ftbBody_OverImage = new Image();
ftbBody_OverImage.src = 'images/toolbarbutton.over.gif';
ftbBody_DownImage = new Image();
ftbBody_DownImage.src = 'images/toolbarbutton.down.gif';
ftbBody_Initialize(ftbBody_editor,document.getElementById('ftbBody'));
ftbBody_HtmlMode = false;
ftbBody_HasFocus = false;
ftbBody_editor.document.onkeydown = FTB_ftbBody_onKeyDown_LineBreak;
ftbBody_editor.document.body.onpaste = FTB_ftbBody_onPaste;
</script>

  </form>
 </body>
</HTML>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息