I found an html editor made in javascript which work ok under IE. Now I am trying to integrate it into a form in order to make my personal website message board prettier and easyier to use. I work with php and mysql, but I don't know how to send the text. here is the code:
<HTML>
<HEAD>
<TITLE>HTML editor</TITLE>
<script LANGUAGE="JavaScript"> <!--
_version=10; //--> </script>
<script LANGUAGE="JavaScript1.1"> <!--
_version=11; // --> </script>
<script LANGUAGE="JavaScript">
<!--
// -->
</SCRIPT>
</center><script language="JavaScript">
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
var browser=((document.layers || document.all) && parseInt(navigator.appVers
ion)>=4 && !(document.all && navigator.userAgent.indexO
f("Mac")>-
1))
var numAttachments=0;
function getfilename( ){
document.composeForm.filen
ame.value=
"";
document.composeForm.filen
ame.value=
document.c
omposeForm
.attachmen
t.value;;
return;
}
function getaddress(ur1){
window.open(ur1,'getaddres
s','width=
300,height
=450,resiz
able=yes,s
crollbars=
yes');
}
function checkFields( ){
var ret1;
var ret2;
if(document.composeForm.to
.value.len
gth==0) {
alert("Please enter an email address");
return false ;
}
}
function attachAttachment() {
var maxNumAttachments = 5;
if (numAttachments == maxNumAttachments){
alert("You can have a maximum of"
+ maxNumAttachments + "attachments");
}
if (document.composeForm.atta
chment.val
ue == "") {
alert("No file has been selected");
} else {
getfilename();
document.composeForm.att.v
alue="uplo
ad";
sendHtml();
document.composeForm.submi
t();
}
}
function removeAttachment() {
var index=document.composeForm
.attachmen
tlists.opt
ions.selec
tedIndex;
if (index>=1) {
document.composeForm.att.v
alue="del"
;
sendHtml();
document.composeForm.submi
t();
} else {
alert("You did not select an attachments to remove");
}
}
var bLoad=false
var pureText=true
var bodyTag="<BODY>"
var 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=GetCompFocu
s;
}
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.onreadystatechang
e() {
if (YInitialized) return;
YInitialized = true;
istexthtml = "yes";
Composition.document.open(
)
Composition.document.write
("<BODY></
body>");
Composition.document.close
()
Composition.document.desig
nMode="On"
if (istexthtml == "yes") {
public_description.put_htm
l(document
.composeFo
rm.compose
body.value
);
}
else{
public_description.put_tex
t(document
.composeFo
rm.compose
body.value
);
}
}
// 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_tex
t();
}
else{
document.composeForm.body.
value = public_description.get_htm
l();
}
if(document.composeForm.sw
itchnow.va
lue=="yes"
){
document.composeForm.body.
value = document.composeForm.body.
value.repl
ace(/<BR>/
g, "\n");
}
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.execC
ommand(wha
t);
else Composition.document.execC
ommand(wha
t,"",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.inner
HTML;
Composition.document.body.
innerText=
cont;
} else {
cont=Composition.document.
body.inner
Text;
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.docu
ment.selec
tion.creat
eRange().p
arentEleme
nt());
var str=prompt("Enter url:", isA ? isA.href : "
http:\/\/");
if ((str!=null) && (str!="
http://")) {
if (Composition.document.sele
ction.type
=="None") {
var sel=Composition.document.s
election.c
reateRange
();
sel.pasteHTML("<A HREF=\""+str+"\">"+str+"</
A> ");
sel.select();
}
else formatC("CreateLink",str);
}
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.backgroundColo
r == "#ffffff") curr.outerHTML = curr.innerHTML;
}
}
function write_signature() {
var signature = "";
cf = document.composeForm;
index = composeForm.signature.sele
ctedIndex;
if (cf.signature[index].value
== 1) {
signature = "";
}
else if (cf.signature[index].value
== 2) {
signature = "";
}
else if (cf.signature[index].value
== 3) {
signature = "";
}
else {
return;
}
cf.body.value += '\r\n\r\n';
cf.body.value += signature;
if(bTextMode)
{
temp = public_description.get_tex
t();
temp += '\r\n\r\n';
temp += signature;
public_description.put_tex
t(temp);
}
else
{
temp = public_description.get_htm
l();
temp += "<p>";
temp += signature;
public_description.put_htm
l(temp);
}
}
function confirmSwitch(){
if(bTextMode){
if(confirm('You have checked View HTML Source. Do you want to continue with the displayed text, including the HTML tags?')){
Composition.document.body.
innerText=
public_des
cription.g
et_text();
document.composeForm.switc
hnow.value
="yes";
return true;
}
}
else{
if(confirm('This will convert your message into plain text. All formatting will be lost. Continue?')){
Composition.document.body.
innerText=
public_des
cription.g
et_text();
document.composeForm.switc
hnow.value
="yes";
return true;
}
}
return false;
}
function updateSaveSent(){
dml = document.composeForm;
if (dml.savesent_box.checked)
{
dml.savesent.value = "yes";
}
else {
dml.savesent.value = "no";
}
}
</script>
</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff>
<FORM ACTION='iproductos2.php' METHOD='post' ENCTYPE='multipart/form-da
ta' name="composeForm" onSubmit="return sendHtml();">
<table cellpadding="5" 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('formatB
lock',this
[this.sele
ctedIndex]
.value);th
is.selecte
dIndex=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>">Format
ted <PRE>
<option value="removeFormat">Remov
e Formatting
</select>
<select ID="FontName" class="TBGen" TITLE="Font Name" LANGUAGE="javascript" onchange="formatC('fontnam
e',this[th
is.selecte
dIndex].va
lue);this.
selectedIn
dex=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">Wingding
s
</select>
<select ID="FontSize" class="TBGen" TITLE="Font Size" LANGUAGE="javascript" onchange="formatC('fontsiz
e',this[th
is.selecte
dIndex].va
lue);this.
selectedIn
dex=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('forecol
or',this[t
his.select
edIndex].v
alue);this
.selectedI
ndex=0">
<option class="heading" selected>Text 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('backcol
or',this[t
his.select
edIndex].v
alue);this
.selectedI
ndex=0">
<option class="heading" selected>Text Background Color
<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(switchMod
e.checked)
">
<font size="-1" color="#000000"><b>View HTML source</b> | </font>
<a class="hlink" href="Javascript:formatC('
formatBloc
k','remove
Format')">
<b>Clear Format</b></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('underlin
e')">
<img class="Ico" src="images/under.gif">
</div></td>
<td><div class="Btn" TITLE="Align Left" NAME="Justify" LANGUAGE="javascript" onclick="formatC('justifyl
eft')">
<img class="Ico" src="images/aleft.gif">
</div></td>
<td><div class="Btn" TITLE="Center" NAME="Justify" LANGUAGE="javascript" onclick="formatC('justifyc
enter')">
<img class="Ico" src="images/center.gif">
</div></td>
<td><div class="Btn" TITLE="Align Right" NAME="Justify" LANGUAGE="javascript" onclick="formatC('justifyr
ight')">
<img class="Ico" src="images/aright.gif">
</div></td>
<td><div class="Btn" TITLE="Numbered List" LANGUAGE="javascript" onclick="formatC('insertor
deredlist'
)">
<img class="Ico" src="images/nlist.gif">
</div></td>
<td><div class="Btn" TITLE="Bulletted List" LANGUAGE="javascript" onclick="formatC('insertun
orderedlis
t')">
<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.desig
nMode="On"
;
// -->
</SCRIPT>
</td></tr>
</table>
<!-- fi de l'editor -->
</FORM>
</body></html>
Start Free Trial