rte.js

PHP留言本 设计流程： 1.需求分析： 留言本要是实现的功能是用户留言

// EDITOR PUBLIC (API)

function inlineimage() {
//        strSelection = document.selection.createRange().text
//        if (strSelection == "") document.all.edit.focus()

        setFocus();
        def = parent.document.form1.f_image.value;

        if (def=="") {
                alert("使用这个功能前，请先上传图片..");
				//top.upimg();
                return;
        }

        if (parent.document.form1.f_width.value!="") {
                w = " width="+parent.document.form1.f_width.value;
        } else {
                w = "";
        }
        if (parent.document.form1.f_height.value!="") {
                h = " height="+parent.document.form1.f_height.value;
        } else {
                h = "";
        }


        def="<img src=\"" + def + "\" alt=\"" + def + "\""+ w + h +">";
        insertHTML(def);

}

function popupimage() {

        setFocus();

        strSelection = idEditbox.document.selection.createRange().text
        def = parent.document.form1.f_image.value;

        if (def=="") {
                alert("使用这个功能前，请先上传图片..");
				top.upimg();
                return;
        }
		//else if(confirm("上传新图片否?...")) {top.upimg();return;}

        if (parent.document.form1.f_width.value!="") {
                w = " width="+(parseInt(parent.document.form1.f_width.value)+20);
        } else {
                w = "";
        }
        if (parent.document.form1.f_height.value!="") {
                h = " height="+(parseInt(parent.document.form1.f_height.value)+20);
        } else {
                h = "";
        }

        if (strSelection=="") {
                strSelection = prompt("图片连接说明:","点击看图");
                if (strSelection == null) return;
        }

        def="<a href=\"javascript:;\" onclick=\"open('" + def + "','photo','" + w + "," + h + "');\">" + strSelection + "</a>";
        insertHTML(def);

}

function getHTML()
{
        var szRet = (g_state.bMode ? idEditbox.document.body.innerHTML : idEditbox.document.body.innerText)
        return szRet
}

function insertHTML(szHTML)
{
var sType
var sel = g_state.GetSelection()
sType = sel.type
if (g_state.bMode) {
if (sType=="Control")
sel.item(0).outerHTML = szHTML
else
sel.pasteHTML(szHTML)
}
else
sel.text = szHTML
}

function setFocus() {
        // alert("focus");
        //idEditbox.focus()
}

function setBGColor(szValue)
{
g_state.bgColor = szValue
if (g_state.bMode)
idEditbox.document.body.bgColor = g_state.bgColor
}

function setDefaultStyle(szValue)
{
g_state.css = szValue
if (g_state.bMode)
idEditbox.document.body.style.cssText = g_state.css
}

function setSkin(szSkin)
{
if (szSkin == null)
document.styleSheets.skin.cssText = g_state.defaultSkin
else
document.styleSheets.skin.cssText = szSkin
document.styleSheets.skin.disabled = false
}

function replace(string,text,by) {  // from www.irt.org, supposedly..
        if (string.length==0 || text.length==0) return string;
        var i = string.indexOf(text);
        if (((!i) && (text != string.substring(0,text.length))) || (i== -1)) return string;
        var newstr = string.substring(0,i) + by;
        if (i+text.length < string.length) newstr += replace(string.substring(i+ text.length, string.length), text, by);
        return newstr;
}

function setMode(bMode) {
        if (bMode!=g_state.bMode) {
                g_state.bMode = bMode
                var objBody = idEditbox.document.body
                if (!bMode&& !g_state.bMode)
                {
                        _CPopup_Hide()
                        objBody.bgColor = objBody.style.cssText = "F3F3F3"
                        if (g_state.customButtons)
                                idStandardBar.style.display = "none"
                        else
                                idToolbar.style.display = "none"
                        //text=replace(idEditbox.document.body.innerHTML,"<BR>","\n")
                        //text =replace(text,">\n",">");
                        //text =replace(text,"> \n","> ");
                        objBody.innerText = idEditbox.document.body.innerHTML
                        objBody.className = "textMode"
                        setBGColor('F3F3F3')

                }
                if ((bMode) && (g_state.bMode))
                {
                        setDefaultStyle(g_state.css)
                        //setBGColor(g_state.bgColor)
                        setBGColor('FFFFFF')
                        objBody.className = idStandardBar.style.display = idToolbar.style.display = ""
                        //text =replace(idEditbox.document.body.innerText,"\n","<BR>");
                        //text =replace(text,"</LI><BR>","</LI>");

                        objBody.innerHTML = idEditbox.document.body.innerText;
                }

                _setSize()
                //cbMode.checked = !bMode
                _Editor_MoveSelection(true)
                setFocus()
        }
        return bMode
}

// EDITOR PRIVATE
function _Format(szHow, szValue) {
var oSel        = g_state.GetSelection()
var sType = oSel.type
var oTarget = (sType == "None" ? idEditbox.document : oSel)
var oBlock = (oSel.parentElement != null ? _CUtil_GetBlock(oSel.parentElement()) : oSel.item(0))
// commented out by bob.
//setFocus()
switch(szHow)
{
case "BackColor":
var el = null
if (oSel.parentElement != null) {
el = _CUtil_GetElement(oSel.parentElement(),"TD")
if (!el) el = _CUtil_GetElement(oSel.parentElement(),"TH")
if (!el) el = _CUtil_GetElement(oSel.parentElement(),"TR")
if (!el) el = _CUtil_GetElement(oSel.parentElement(),"TABLE")
}
else
el = _CUtil_GetElement(oSel.item(0),"TABLE")
if (el)
el.bgColor = szValue
else
setBGColor(szValue)
break;
case "Justify":
if (oBlock)
{
oBlock.style.textAlign = ""
if (((oBlock.tagName=="TABLE") || (oBlock.tagName=="IMG")) && (("left"==oBlock.align) && ("Left"==szValue))) {
oBlock.align = ""
break;
}
oBlock.align = szValue
if ((oBlock.tagName=="HR") || ((oBlock.tagName=="IMG") && szValue!="Center")) break;
}
szHow=szHow+szValue
szValue=""
// Fall through
default:
oTarget.execCommand(szHow, false, szValue)
break
}
g_state.RestoreSelection()
//commented out by Bob.
//setFocus()
return true
}
function _initEditor() {
g_state = new _CState()
window.onresize = _setSize
var sz = ""
sz += ""
+ "<STYLE>"
+        ".DataBound{border:1 solid #999999;margin:1;font-family:Courier;background:#F1F1F1}\n"
+        ".textMode {border-top: 1px black solid;font: 10pt courier}\n.NOBORDER TD {border:1px gray solid}"
+        "BODY {border: 1px #800000 solid;border-top:none;font-size:13px;scrollbar-Track-Color:#FFCCCC;scrollbar-Face-Color:#FFFFFF;scrollbar-Shadow-Color:#FFFFFF;scrollbar-Highlight-Color:#FFFFFF;scrollbar-Arrow-Color:#800000;scrollbar-darkshadow-color:#800000;scrollbar-3dlight-color:#CC9999}"
+		  "P,OL,UL {margin-top:3px;margin-bottom:3px}"
+		  "HR {width:80%}"
+ "</STYLE>"
+ "<BODY ONCONTEXTMENU=\"return false\">"
+ INIT_HTML
+ "</BODY>"
_CPopup_Init()
idEditbox.document.designMode = "on"
idEditbox.document.open("text/html","replace")
idEditbox.document.write(sz)
idEditbox.document.close()
idEditbox.document.body.onblur = g_state.SaveSelection
idEditbox.document.onkeydown = _Editor_KeyDownHandler
idEditbox.document.onmousedown = _Editor_ClickHandler
idEditbox.document.ondblclick = _Editor_DblClickHandler
setTimeout("_pageReady()",0)
}
function _Editor_MoveSelection(bDir) {
var tr = idEditbox.document.body.createTextRange()
tr.collapse(bDir)
tr.select()
}
function _Editor_ClickHandler() {
g_state.selection = null
}
function _Editor_KeyDownHandler() {
var ev = this.parentWindow.event
if (ev.keyCode==9)
g_state.SaveSelection()
else
g_state.selection=null
}
function _Editor_DblClickHandler() {
// Shortcuts
var el = this.parentWindow.event.srcElement
if (el.tagName=="IMG") {
el.removeAttribute("width")
el.removeAttribute("height")
el.style.removeAttribute("width")
el.style.removeAttribute("height")
el.width = el.width
el.height = el.height
}
if (el.tagName=="TABLE")
_CPopup_Show('Table')
}
function _setSize() {
document.all.idEditbox.style.pixelHeight = document.body.clientHeight - idToolbar.offsetHeight //- document.all.idMode.offsetHeight
document.all.idPopup.style.pixelLeft = (document.body.clientWidth - idPopup.document.all.puRegion.offsetWidth) / 2
}
function _pageReady()
{
idEditbox.document.body.oncontextmenu = new Function("return false")
if (g_state.szSearch!="")
idPopup.document.domain = idEditbox.document.domain = document.domain = g_state.szSearch
//_Editor_MoveSelection(false)
if (self.parent.RTELoaded)
self.parent.RTELoaded(self)
if (document.styleSheets.skin.disabled)
setSkin(null)
_setSize()
idEditor.style.visibility=""
}
function _userButtonClick(el)
{
if (parent.RTEButton) parent.RTEButton(self, el.id)
}
function _drawToolbar()
{
var aIds = new Array("cut","copy","paste","bar1","formatblock","fontstyle","fontsize","bar2","bold","italic","underline","bar3","left","center","right","bar4","orderedlist","unorderedlist","outdent","indent","bar5","line","link","table","image","bar6","bgcolor","textcolor","bar7","emoticon")
var aTips = new Array(L_TIPCUT_TEXT,L_TIPCOPY_TEXT,L_TIPPASTE_TEXT,"",L_TIPP_TEXT,L_TIPFSTYLE_TEXT,L_TIPFSIZE_TEXT,"",L_TIPB_TEXT,L_TIPI_TEXT,L_TIPU_TEXT,"",L_TIPLJ_TEXT,L_TIPCJ_TEXT,L_TIPRJ_TEXT,"",L_TIPOL_TEXT,L_TIPUL_TEXT,L_TIPDINDENT_TEXT,L_TIPIINDENT_TEXT,"",L_TIPLINE_TEXT,L_TIPLINK_TEXT,L_TIPTABLE_TEXT,L_TIPPICTURE_TEXT,"",L_TIPBGCOLOR_TEXT,L_TIPFGCOLOR_TEXT,"",L_TIPEMOTICON_TEXT)
var aCommand = new Array("_Format('cut')","_Format('copy')","_Format('paste')",null,"_CPopup_Show('formatblock')","_CPopup_Show('font')","_CPopup_Show('fontsize')",null,"_Format('bold')","_Format('italic')","_Format('underline')",null,"_Format('Justify','Left')","_Format('Justify','Center')","_Format('Justify','Right')",null,"_Format('insertorderedlist')","_Format('insertunorderedlist')","_Format('outdent')","_Format('indent')",null,"_Format('InsertHorizontalRule')","_CPopup_Show('Link')","_CPopup_Show('Table')","_CPopup_Show('Image')",null,"_CPopup_Show('BackColor')","_CPopup_Show('ForeColor')",null,"_CPopup_Show('Emoticon')")
var sz = "<DIV ID=idStandardBar><NOBR>", iLeft=0, iHeight=24
for (var i = 0 ; i < aSizes.length; i++)
{
sz        += ""
+ "<SPAN CLASS=tbButton ONKEYPRESS=\"if (event.keyCode==13) {" + aCommand[i] + ";event.keyCode=0}\" " + (aTips[i]=="" ? "" : ("TABINDEX=" + (i+1))) + " "
+        "ID=\"tb" + aIds[i] + "\" "
+        "STYLE=\"width: " + aSizes[i] + ";height:" + iHeight
+        "\""
+ ">"
+        "<SPAN "
+        "STYLE=\""
+        "position:absolute;"
+        "width:" + aSizes[i] + ";height:" + iHeight + ";"
+        "clip: rect(0 " + aSizes[i] + " " + iHeight + " 0)"
+        "\""
+        ">"
+        "<IMG "
+        "TITLE=\"" + aTips[i] + "\" "
+        "ONCLICK=\"" + aCommand[i] + "; event.cancelBubble=true\" "
+        "ONMOUSEDOWN=\"if (event.button==1) this.style.pixelTop=-" + (iHeight*2) + "\" "
+        "ONMOUSEOVER=\"this.style.pixelTop=-" + iHeight + "\" "
+        "ONMOUSEOUT=\"this.style.pixelTop=0\" "
+        "ONMOUSEUP=\"this.style.pixelTop=-" + iHeight + "\" "
+        "SRC=\"" + L_TOOLBARGIF_TEXT + "\" "
+        "STYLE=\"position:absolute;top:0;left:-" + iLeft + "\""
+        ">"
+        "</SPAN>"
+ "</SPAN>"
+ (aTips[i]=="" ? "</NOBR><NOBR>" : "")
iLeft += aSizes[i]
}
sz += ""
+ "</NOBR>"
+ "<SPAN CLASS=tbButton ID=\"tbDBSelect\">"
+        "<SPAN "
+        "STYLE=\""
+        "position:absolute;"
+        "width: 100;"
+        "clip: rect(0 100 " + iHeight + " 0)"
+        "\""
+        ">"
+        "<SELECT "
+        "ID=DBSelect "
+        "ONCLICK='event.cancelBubble=true;' "
+        "ONCHANGE='_CPopup_InsertDatabound(this)' "
+        ">"
+        "<OPTION>"
+        "- " + L_TBDATABINDING_TEXT + " -"
+        "</OPTION>"
+        "</SELECT>"
document.write(sz + "</DIV>")
}
function _drawModeSelect() {
var sz = "<TABLE CELLSPACING=0 CELLPADDING=0 ID=idMode>"
+        "<TR><TD><INPUT TYPE=checkbox ID=cbMode ONCLICK=\"setMode(!this.checked)\">"
+ "<LABEL FOR=cbMode>" + L_MODETITLE_TEXT + "</LABEL>" + L_MODEDESC_TEXT
+ "</TD></TR></TABLE>"
document.write(sz)
//cbMode.checked = false
}
// _CState
function _CState()
{
this.selection        = null
this.bMode        = true
this.customButtons = false
this.css = this.bgColor        = ""
this.defaultSkin        = document.styleSheets.skin.cssText
this.popupSkin        = document.styleSheets.popupSkin.cssText