Bueno, a ve la API la tienes, tan solo tienes que hacer los botones llamando a las funciones de JS, aqui te dejo un ejemplo:
Código:
<table width="100%" cellpadding="2" cellspacing="2" border="0">
<tr>
<td>
<select id="formatblock" onchange="select(this.id);" style="font-size:10; font-family:verdana">
<option value="<p>">Normal</option>
<option value="<p>">Paragraph</option>
<option value="<h1>">Heading 1 <H1></option>
<option value="<h2>">Heading 2 <H2></option>
<option value="<h3>">Heading 3 <H3></option>
<option value="<h4>">Heading 4 <H4></option>
<option value="<h5>">Heading 5 <H5></option>
<option value="<h6>">Heading 6 <H6></option>
<option value="<address>">Address <ADDR></option>
<option value="<pre>">Formatted <PRE></option>
</select>
</td>
<td>
<select id="fontname" onchange="select(this.id);" style="font-size:10; font-family:verdana">
<option value="Font">Font</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Verdana">Verdana</option>
</select>
</td>
<td>
<select unselectable="on" id="fontsize" onchange="select(this.id);" style="font-size:10; font-family:verdana">
<option value="Size">Size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</td>
<td width="20"><a href=# onclick="estilo('Bold')"><img src="imagenes/bold.png" border="0"></a></td>
<td width="20"><a href=# onclick="estilo('Italic')"><img src="imagenes/italic.png" border="0" ></a></td>
<td width="20"><a href=# onclick="estilo('Underline')"><img src="imagenes/underline.png" border="0"></a></td>
<td width="20"><a href=# onclick="alinear('Justifyleft')"><img src="imagenes/justifyleft.png" border="0"></a></td>
<td width="20"><a href=# onclick="alinear('Justifycenter')"><img src="imagenes/justifycenter.png" border="0"></a></td>
<td width="20"><a href=# onclick="alinear('Justifyright')"><img src="imagenes/justifyright.png" border="0"></a></td>
<td width="20"><a href=# onclick="listas('Insertorderedlist')"><img src="imagenes/number.png" border="0"></a></td>
<td width="20"><a href=# onclick="listas('Insertunorderedlist')"><img src="imagenes/list.png" border="0"></a></td>
<td width="20"><a href=# onclick="margen('Outdent')"><img src="imagenes/outdent.png" border="0"></a></td>
<td width="20"><a href=# onclick="margen('Indent')"><img src="imagenes/indent.png" border="0"></a></td>
<td width="20"><a href=# onclick="linea()"><img src="imagenes/rule.png" border="0"></a></td>
</tr>
<tr>
<td colspan="16">
<iframe id="edit" width="100%" height="400px" frameborder="1"></iframe>
</td>
</tr>
<tr>
<td colspan="16" align="center"><input type="submit" value="Bidali" class="formulario"></td>
</tr>
</table>
Con ese code tienes para insertar cualquier cosa, solo faltaria el tema de los enlaces y de las imagenes que es igual de sencillo lo unico que antes no lo puse, cuando llege a casa te lo monto para que veas como funciona
