📄 advanced-editor.htm

📁 For Email POP3. by PHP. but it has some errors for Chinese system.
💻 HTM
字号:
<!-- 
available only for IE5+ users
-->
<script language="JavaScript">
bLoad=false
pureText=true
bodyTag="<BODY MONOSPACE STYLE=\"font:10pt arial,sans-serif\">"
bTextMode=false
public_description=new Editor

/*****************************
 Power Editor class
 member function:
 SetHtml
 GetHtml
 SetText
 GetText
 GetCompFocus()
 *****************************/
function Editor() {
	this.put_html=SetHtml;
	this.get_html=GetHtml;
	this.put_text=SetText;
	this.get_text=GetText;
	this.CompFocus=GetCompFocus;
}
function GetCompFocus() {
	Composition.focus();
}

function GetText() {
	return Composition.document.body.innerText;
}

function SetText(text) {
	text = text.replace(/\n/g, "<br>")
	Composition.document.body.innerHTML=text;
}

function GetHtml() {
	if (bTextMode) 
		return Composition.document.body.innerText;
	else {
		cleanHtml();
		cleanHtml();
		return Composition.document.body.innerHTML;
	}
}

function SetHtml(sVal) {
	if (bTextMode) Composition.document.body.innerText=sVal;
	else Composition.document.body.innerHTML=sVal;
}
//End  of Editor Class

/***********************************************
 Initialize everything when the document is ready
 ***********************************************/
var YInitialized = false;
function document.onreadystatechange(){
	if (YInitialized) return;
	YInitialized = true;
	var i, s, curr;
	// Find all the toolbars and initialize them.
	for (i=0; i<document.body.all.length; i++) {
		curr=document.body.all[i];
		if (curr.className == "Btn" && !InitBtn(curr))
			alert("Toolbar: " + curr.id + " failed to initialize. Status: false");
	}
	Composition.document.open()
	Composition.document.write(bodyTag);
	Composition.document.close()
	Composition.document.designMode="On"
	public_description.put_html(hiddencomposeForm.hiddencomposeFormTextArea.value);

}

/***********************************************
 Initialize a button ontop of toolbar
 ***********************************************/
function InitBtn(btn) {
	btn.onmouseover = BtnMouseOver;
	btn.onmouseout = BtnMouseOut;
	btn.onmousedown = BtnMouseDown;
	btn.onmouseup = BtnMouseUp;
	btn.ondragstart = YCancelEvent;
	btn.onselectstart = YCancelEvent;
	btn.onselect = YCancelEvent;
	btn.YUSERONCLICK = btn.onclick;
	btn.onclick = YCancelEvent;
	btn.YINITIALIZED = true;
	return true;
}

// Hander that simply cancels an event
function YCancelEvent() {
	event.returnValue=false;
	event.cancelBubble=true;
	return false;
}

// Toolbar button onmouseover handler
function BtnMouseOver() {
	if (event.srcElement.tagName != "IMG") return false;
	var image = event.srcElement;
	var element = image.parentElement;
	// Change button look based on current state of image.- we don't actually have chaned image
	// could be commented but don't remove for future extension
	if (image.className == "Ico") element.className = "BtnMouseOverUp";
	else if (image.className == "IcoDown") element.className = "BtnMouseOverDown";
	event.cancelBubble = true;
}

// Toolbar button onmouseout handler
function BtnMouseOut() {
	if (event.srcElement.tagName != "IMG") {
		event.cancelBubble = true;
		return false;
	}
	var image = event.srcElement;
	var element = image.parentElement;
	yRaisedElement = null;
	element.className = "Btn";
	image.className = "Ico";
	event.cancelBubble = true;
}

// Toolbar button onmousedown handler
function BtnMouseDown() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    event.returnValue=false;
    return false;
  }
  var image = event.srcElement;
  var element = image.parentElement;

  element.className = "BtnMouseOverDown";
  image.className = "IcoDown";

  event.cancelBubble = true;
  event.returnValue=false;
  return false;
}

// Toolbar button onmouseup handler
function BtnMouseUp() {
  if (event.srcElement.tagName != "IMG") {
    event.cancelBubble = true;
    return false;
  }

  var image = event.srcElement;
  var element = image.parentElement;

  if (element.YUSERONCLICK) eval(element.YUSERONCLICK + "anonymous()");

  element.className = "BtnMouseOverUp";
  image.className = "Ico";

  event.cancelBubble = true;
  return false;
}



// Check if toolbar is being used when in text mode
function validateMode() {
  if (! bTextMode) return true;
  alert("Por favor desmarque a op玢o \"Ver c骴igo HTML\" para usar a barra de ferramentas");
  Composition.focus();
  return false;
}

function sendHtml(){
	if(bTextMode){
		document.composeForm.body.value = public_description.get_text();
		return true;
	}
	else{
		document.composeForm.body.value = public_description.get_html();
		return true;
	}
}

//Formats text in composition.
function formatC(what,opt) {
  if (!validateMode()) return;
  if (opt=="removeFormat") {
    what=opt;
    opt=null;
  }
  if (opt==null) Composition.document.execCommand(what);
  else Composition.document.execCommand(what,"",opt);
  pureText = false;
  Composition.focus();
}

//Switches between text and html mode.
function setMode(newMode) {
  bTextMode = newMode;
  var cont;
  if (bTextMode) {
    cleanHtml();
    cleanHtml();
    cont=Composition.document.body.innerHTML;
    Composition.document.body.innerText=cont;
  } else {
    cont=Composition.document.body.innerText;
    Composition.document.body.innerHTML=cont;
  }
  
  Composition.focus();
}

//Finds and returns an element.
function getEl(sTag,start) {
  while ((start!=null) && (start.tagName!=sTag)) start = start.parentElement;
  return start;
}

function createLink() {
  if (!validateMode()) return;
  
  var isA = getEl("A",Composition.document.selection.createRange().parentElement());
  var str=prompt("Digite o caminho:", isA ? isA.href : "http:\/\/");
  
  if ((str!=null) && (str!="http://")) {
    if (Composition.document.selection.type=="None") {
      var sel=Composition.document.selection.createRange();
      sel.pasteHTML("<A HREF=\""+str+"\">"+str+"</A> ");
      sel.select();
    }
    else formatC("CreateLink",str);
  }
  else Composition.focus();
}

//Sets the text color.
function foreColor() {
  if (! validateMode()) return;
  var arr = showModalDialog("/ym/ColorSelect?3", "", "font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:35em");
  if (arr != null) formatC('forecolor', arr);
  else Composition.focus();
}

//Sets the background color.
function backColor() {
  if (!validateMode()) return;
  var arr = showModalDialog("/ym/ColorSelect?3", "", "font-family:Verdana; font-size:12; dialogWidth:30em; dialogHeight:35em");
  if (arr != null) formatC('backcolor', arr);
  else Composition.focus()
}



function cleanHtml() {
  var fonts = Composition.document.body.all.tags("FONT");
  var curr;
  for (var i = fonts.length - 1; i >= 0; i--) {
    curr = fonts[i];
    if (curr.style.backgroundColor == "#ffffff") curr.outerHTML = curr.innerHTML;
  }
}

function getPureHtml() {
  var str = "";
  var paras = Composition.document.body.all.tags("P");
  if (paras.length > 0) {
    for (var i=paras.length-1; i >= 0; i--) str = paras[i].innerHTML + "\n" + str;
  } else {
    str = Composition.document.body.innerHTML;
  }
  return str;
}

</script>      
   				<table cellpadding="3" cellspacing="0" border="0">
   					<tr>
   						<td>
   							<div class="yToolbar" id="ParaToolbar">
   								<div class="TBHandle">
   								</div>
   								<select id="ParagraphStyle" class="TBGen" language="javascript" onChange="formatC('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
   									<option class="heading" selected>Par醙rafo
   									<option value="&lt;H1&gt;">Estilo 1 &lt;H1&gt;
   									<option value="&lt;H2&gt;">Estilo 2 &lt;H2&gt;
   									<option value="&lt;H3&gt;">Estilo 3 &lt;H3&gt;
   									<option value="&lt;H4&gt;">Estilo 4 &lt;H4&gt;
   									<option value="&lt;H5&gt;">Estilo 5 &lt;H5&gt;
   									<option value="&lt;H6&gt;">Estilo 6 &lt;H6&gt;
   									<option value="&lt;PRE&gt;">Formatado &lt;PRE&gt;
   									<option value="removeFormat">Limpar tudo
   								</select>
   								<select id="FontName" class="TBGen" language="javascript" onChange="formatC('fontname',this[this.selectedIndex].value);this.selectedIndex=0">
   									<option class="heading" selected>Fonte
   									<option value="Arial">Arial
   									<option value="Arial Black">Arial Black
   									<option value="Arial Narrow">Arial Narrow
   									<option value="Comic Sans MS">Comic Sans MS
   									<option value="Courier New">Courier New
   									<option value="System">System
   									<option value="Times New Roman">Times New Roman
   									<option value="Verdana">Verdana
   									<option value="Wingdings">Wingdings
   								</select>
   								<select id="FontSize" class="TBGen" language="javascript" onChange="formatC('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
   									<option class="heading" selected>Tam
   									<option value="1">1
   									<option value="2">2
   									<option value="3">3
   									<option value="4">4
   									<option value="5">5
   									<option value="6">6
   									<option value="7">7
   								</select>
   								<select id="FontColor" class="TBGen" title="Font Color" language="javascript" onChange="formatC('forecolor',this[this.selectedIndex].value);this.selectedIndex=0">
   									<option class="heading" selected>Cor
   									<option value="red">Verm
   									<option value="blue">Azul
   									<option value="green">Verde
   									<option value="black">Preto
   								</select>
   								<select id="FontBackColor" class="TBGen" title="Font Back Color" language="javascript" onChange="formatC('backcolor',this[this.selectedIndex].value);this.selectedIndex=0">
   									<option class="heading" selected>Fundo
   									<option value="red">Verm
   									<option value="blue">Azul
   									<option value="green">Verde
   									<option value="black">Preto
   									<option value="yellow">Amar
   									<option value="">Branco
   								</select>
   								<div class="TBSep">
   								</div>
   								<div id="EditMode" class="TBGen" title="Modo de Edi玢o">
   								   <input type="checkbox" name="switchMode" LANGUAGE="javascript" onClick="setMode(switchMode.checked)">
								   <a href="#" onClick="document.composeForm.switchMode.click()"><font color="#000000" face="Arial" size=2>Ver c骴igo HTML</font></a> | 
								   <a href="Javascript:formatC('formatBlock','removeFormat')"><font color="#000000" face="Arial" size=2>Limpar formata玢o</font></a>
   								</div>
   							</div>
   							<table>
   								<tr>
   									<td><div class="Btn" title="Cortar" language="javascript" onClick="formatC('cut')"><img class="Ico" src="images/cut.gif"></div></td>
   									<td><div class="Btn" title="Copiar" language="javascript" onClick="formatC('copy')"><img class="Ico" src="images/copy.gif"></div></td>
   									<td><div class="Btn" title="Colar" language="javascript" onClick="formatC('paste')"><img class="Ico" src="images/paste.gif"></div></td>
   									<td><div class="Btn" title="Negrito" language="javascript" onClick="formatC('bold');"><img class="Ico" src="images/bold.gif"></div></td>
   									<td><div class="Btn" title="It醠ico" language="javascript" onClick="formatC('italic')"><img class="Ico" src="images/italic.gif"></div></td>
   									<td><div class="Btn" title="Sublinhado" language="javascript" onClick="formatC('underline')"><img class="Ico" src="images/under.gif"></div></td>
   									<td><div class="Btn" title="Alinhar
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -