Dhtml|javascript|ubb
See the ABC code Editor of the Chinaasp forum? Do you think it's cool? To be honest, I just saw what I thought was a control in some other language, and then I found it was not so mysterious. A few days ago to do a commodity BBS, customer requirements to support UBB, but also to do an editor. Now I'm going to give you some ideas about how to do UBB.
First encountered is the interface problem, in fact, this is a good solution, just using TD's onMouseOver, onmouseout and onmousedown to implement, the implementation of the code below the method.
The second is to realize the text effect of the problem, this can use the TextRange ExecCommand method to achieve.
Below I give a simple example, you can save it as an HTML file, can be run directly, the function of this example is very simple, that is, the edit box selected text into bold or italic. Other features you can add by referring to this example yourself.
By the right, save the two pictures first.
File:ubb.html
<HTML>
<HEAD>
<title>ubb Demo </TITLE>
</HEAD>
<BODY>
<br><br>
<table width=300 cellspacing=2 cellpadding=2 border=0 bgcolor=lightgrey>
<tr>
<TD id=tdbold onclick=doaction ("Bold") onmouseover = "On_mouseover (tdbold);" >
</td>
<TD id=tditalic onclick=doaction ("italic") onmouseover = "On_mouseover (tditalic);" >
</td>
<TD width=268> </td>
</tr>
<tr>
<TD colspan=3>
<iframe id=editor name=editor border=0 scroll=no width=300
</iframe>
</td>
</tr>
</table>
</BODY>
</HTML>
<script language=javascript>
Initialize the IFRAME
Editor.document. DesignMode = "on";
Editor.document. Open;
Editor.document. Write ("");
Editor.document. Close;
Editor.focus ();
function On_mouseover (THISTD)
{
Thistd.style. borderleft = "1px solid buttonhighlight";
Thistd.style. borderright = "1px solid Buttonshadow";
Thistd.style. bordertop = "1px solid buttonhighlight";
Thistd.style. BorderBottom = "1px solid Buttonshadow";
}
function On_mouseout (THISTD)
{
Thistd.style. Borderleft = "";
Thistd.style. borderright = "";
Thistd.style. BorderTop = "";
Thistd.style. BorderBottom = "";
}
function Dodown (THISTD)
{
Thistd.style. borderleft = "1px solid Buttonshadow";
Thistd.style. borderright = "1px solid buttonhighlight";
Thistd.style. bordertop = "1px solid Buttonshadow";
Thistd.style. BorderBottom = "1px solid buttonhighlight";
Thistd.style. paddingtop = "2px";
Thistd.style. paddingleft = "2px";
Thistd.style. paddingbottom = "0px";
Thistd.style. paddingright = "0px";
}
function Doaction (str)
{
var m_objtextrange = editor.document. Selection.createrange ();
M_objtextrange.execcommand (str);
}
</script>