📄 advanced-editor.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("Please uncheck the \"View HTML source\" checkbox to use the toolbars");
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("Enter url:", 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" title="Paragraph Format" language="javascript" onChange="formatC('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option class="heading" selected>Paragraph
<option value="<H1>">Heading 1 <H1>
<option value="<H2>">Heading 2 <H2>
<option value="<H3>">Heading 3 <H3>
<option value="<H4>">Heading 4 <H4>
<option value="<H5>">Heading 5 <H5>
<option value="<H6>">Heading 6 <H6>
<option value="<PRE>">Formatted <PRE>
<option value="removeFormat">Remove All
</select>
<select id="FontName" class="TBGen" title="Font Name" language="javascript" onChange="formatC('fontname',this[this.selectedIndex].value);this.selectedIndex=0">
<option class="heading" selected>Font
<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" title="Font Size" language="javascript" onChange="formatC('fontsize',this[this.selectedIndex].value);this.selectedIndex=0">
<option class="heading" selected>Size
<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>Color
<option value="red">Red
<option value="blue">Blue
<option value="green">Green
<option value="black">Black
</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>Background
<option value="red">Red
<option value="blue">Blue
<option value="green">Green
<option value="black">Black
<option value="yellow">Yellow
<option value="">White
</select>
<div class="TBSep">
</div>
<div id="EditMode" class="TBGen" title="Editing Mode">
<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>View HTML source</font></a> |
<a href="Javascript:formatC('formatBlock','removeFormat')"><font color="#000000" face="Arial" size=2>Clear Format</font></a>
</div>
</div>
<table>
<tr>
<td><div class="Btn" title="Cut" language="javascript" onClick="formatC('cut')"><img class="Ico" src="images/cut.gif"></div></td>
<td><div class="Btn" title="Copy" language="javascript" onClick="formatC('copy')"><img class="Ico" src="images/copy.gif"></div></td>
<td><div class="Btn" title="Paste" language="javascript" onClick="formatC('paste')"><img class="Ico" src="images/paste.gif"></div></td>
<td><div class="Btn" title="Bold" language="javascript" onClick="formatC('bold');"><img class="Ico" src="images/bold.gif"></div></td>
<td>
<div class="Btn" title="Italic" language="javascript" onClick="formatC('italic')"><img class="Ico" src="images/italic.gif">
</div>
</td>
<td>
<div class="Btn" title="Underline" language="javascript" onClick="formatC('underline')"><img class="Ico" src="images/under.gif">
</div>
</td>
<td>
<div class="Btn" title="Align Left" name="Justify" language="javascript" onClick="formatC('justifyleft')"><img class="Ico" src="images/aleft.gif">
</div>
</td>
<td>
<div class="Btn" title="Center" name="Justify" language="javascript" onClick="formatC('justifycenter')"><img class="Ico" src="images/center.gif">
</div>
</td>
<td>
<div class="Btn" title="Align Right" name="Justify" language="javascript" onClick="formatC('justifyright')"><img class="Ico" src="images/aright.gif">
</div>
</td>
<td>
<div class="Btn" title="Numbered List" language="javascript" onClick="formatC('insertorderedlist')"><img class="Ico" src="images/nlist.gif">
</div>
</td>
<td>
<div class="Btn" title="Bulletted List" language="javascript" onClick="formatC('insertunorderedlist')"><img class="Ico" src="images/blist.gif">
</div>
</td>
<td>
<div class="Btn" title="Decrease Indent" language="javascript" onClick="formatC('outdent')"><img class="Ico" src="images/ileft.gif">
</div>
</td>
<td>
<div class="Btn" title="Increase Indent" language="javascript" onClick="formatC('indent')"><img class="Ico" src="images/iright.gif">
</div>
</td>
<td>
<div class="Btn" title="Create Hyperlink" language="javascript" onClick="createLink()"><img class="Ico" src="images/wlink.gif">
</div>
</td>
</tr>
</table>
<iframe class="Composition" width="100%" id="Composition" height="190"></iframe>
<script><!--
Composition.document.open();
Composition.document.write(bodyTag);
Composition.document.close();
Composition.document.designMode="On";
// -->
</script>
</td>
</tr>
</table>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -