<html>
<head>
<title> Browser Based HTML Editor </title>
<script language="_javascript_">
function ProcessNews()
{
// Assign the HTML code to a hidden form variable
var htmlCode = iView.document.body.innerHTML;
document.frmNews.newsPost.value = htmlCode;
// Make sure that all fields are completed
if(document.frmNews.author.selectedIndex == 0)
{
alert('Please select an author for this news post.');
document.frmNews.author.focus();
return false;
}
if(document.frmNews.title.value == '')
{
alert('This news post must contain a title.');
document.frmNews.title.focus();
return false;
}
if(document.frmNews.topics.selectedIndex == -1)
{
alert('Please select a topic for this news post.');
document.frmNews.topics.focus();
return false;
}
if(document.frmNews.newsPost.value == '')
{
alert('Please enter some content for this news post.');
iView.focus();
return false;
}
return true;
}
</script>
<script language="_javascript_">
var viewMode = 1; // WYSIWYG
function Init()
{
iView.document.designMode = 'On';
}
function selOn(ctrl)
{
ctrl.style.borderColor = '#000000';
ctrl.style.backgroundColor = '#B5BED6';
ctrl.style.cursor = 'hand';
}
function selOff(ctrl)
{
ctrl.style.borderColor = '#D6D3CE';
ctrl.style.backgroundColor = '#D6D3CE';
}
function selDown(ctrl)
{
ctrl.style.backgroundColor = '#8492B5';
}
function selUp(ctrl)
{
ctrl.style.backgroundColor = '#B5BED6';
}
function doBold()
{
iView.document.execCommand('bold', false, null);
}
function doItalic()
{
iView.document.execCommand('italic', false, null);
}
function doUnderline()
{
iView.document.execCommand('underline', false, null);
}
function doLeft()
{
iView.document.execCommand('justifyleft', false, null);
}
function doCenter()
{
iView.document.execCommand('justifycenter', false, null);
}
function doRight()
{
iView.document.execCommand('justifyright', false, null);
}
function doOrdList()
{
iView.document.execCommand('insertorderedlist', false, null);
}
function doBulList()
{
iView.document.execCommand('insertunorderedlist', false, null);
}
function doForeCol()
{
var fCol = prompt('Enter foreground color', '');
if(fCol != null)
iView.document.execCommand('forecolor', false, fCol);
}
function doBackCol()
{
var bCol = prompt('Enter background color', '');
if(bCol != null)
iView.document.execCommand('backcolor', false, bCol);
}
function doLink()
{
iView.document.execCommand('createlink');
}
function doImage()
{
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null)
iView.document.execCommand('insertimage', false, imgSrc);
}
function doRule()
{
iView.document.execCommand('inserthorizontalrule', false, null);
}
function doFont(fName)
{
if(fName != '')
iView.document.execCommand('fontname', false, fName);
}
function doSize(fSize)
{
if(fSize != '')
iView.document.execCommand('fontsize', false, fSize);
}
function doHead(hType)
{
if(hType != '')
{
iView.document.execCommand('formatblock', false, hType);
doFont(selFont.options[selFont.selectedIndex].value);
}
}
function doToggleView()
{
if(viewMode == 1)
{
iHTML = iView.document.body.innerHTML;
iView.document.body.innerText = iHTML;
// Hide all controls
tblCtrls.style.display = 'none';
selFont.style.display = 'none';
selSize.style.display = 'none';
selHeading.style.display = 'none';
iView.focus();
viewMode = 2; // Code
}
else
{
iText = iView.document.body.innerText;
iView.document.body.innerHTML = iText;
// Show all controls
tblCtrls.style.display = 'inline';
selFont.style.display = 'inline';
selSize.style.display = 'inline';
selHeading.style.display = 'inline';
iView.focus();
viewMode = 1; // WYSIWYG
}
}
</script>
<style>
.butClass
{
border: 1px solid;
border-color: #D6D3CE;
}
.tdClass
{
padding-left: 3px;
padding-top:3px;
}
</style>
<body > <form ProcessNews()" name="frmNews" action="" method="post">
<input type="hidden" name="action" value="addNews">
<input type="hidden" name="newsPost" value="">
<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td width="10%" height="30" class="title" colspan="2">
<h2> Add News Post</h2>
</td>
</tr>
<tr>
<td width="20%" height="22" class="title">
<p style="margin-left:5">
Author:
</p>
</td>
<td width="80%" height="22" class="title">
<input type="text" name="author" maxlength="50" style="width:335px">
</td>
</tr>
<tr>
<td width="20%" height="22" class="title">
<p style="margin-left:5">
Title:
</p>
</td>
<td width="80%">
<input type="text" name="title" maxlength="50" style="width:335px">
</td>
</tr>
<tr>
<td width="20%" height="22" class="title">
<p style="margin-left:5">
Topic(s):
</p>
</td>
<td width="80%" height="22">
<input type="text" name="topic" maxlength="50" style="width:335px">
</td>
</tr>
<tr>
<td width="10%" height="22" colspan="2">
<hr width="98%" size="1" noshade color="gray">
</td>
</tr>
</table>
<table id="tblCtrls" width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass">
<img alt="Bold" class="butClass" src="" > <img alt="Italic" class="butClass" src="" > <img alt="Underline" class="butClass" src="" >
<img alt="Left" class="butClass" src="" > <img alt="Center" class="butClass" src="" > <img alt="Right" class="butClass" src="" >
<img alt="Ordered List" class="butClass" src="" > <img alt="Bulleted List" class="butClass" src="" >
<img alt="Text Color" class="butClass" src="" > <img alt="Background Color" class="butClass" src="" >
<img alt="Hyperlink" class="butClass" src="" > <img alt="Image" class="butClass" src="" > <img alt="Horizontal Rule" class="butClass" src="" >
</td>
</tr>
</table>
<iframe id="iView" style="width: 415px; height:205px"></iframe>
<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass" colspan="1" width="80%">
<select name="selFont" > <option value="">-- Font --</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Sans Serif">Sans Serif</option>
<option value="Tahoma">Tahoma</option>
<option value="Verdana">Verdana</option>
<option value="Wingdings">Wingdings</option>
</select>
<select name="selSize" > <option value="">-- Size --</option>
<option value="1">Very Small</option>
<option value="2">Small</option>
<option value="3">Medium</option>
<option value="4">Large</option>
<option value="5">Larger</option>
<option value="6">Very Large</option>
</select>
<select name="selHeading" > <option value="">-- Heading --</option>
<option value="Heading 1">H1</option>
<option value="Heading 2">H2</option>
<option value="Heading 3">H3</option>
<option value="Heading 4">H4</option>
<option value="Heading 5">H5</option>
<option value="Heading 6">H6</option>
</select>
</td>
<td class="tdClass" colspan="1" width="20%" align="right">
<img alt="Toggle Mode" class="butClass" src="" >
</td>
</tr>
</table>
<table width="415px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td width="10%" height="50" class="title" colspan="2">
<input type="submit" name="submit" style="width: 415px" value="Add News Post >>">
</td>
</tr>
</table>
</form>
</body>
</html>
-----Original Message-----
From: Bailey, Neal [mailto:[EMAIL PROTECTED]
Sent: Wednesday, April 21, 2004 11:32 AM
To: CF-Talk
Subject: WYSIWYG HTML Editors...
Hello... all
I am looking for a good open source WYSIWYG HTML form field editor control
thingy. Something like SPAW or FCKeditor, I guess a better question is which
one of these is better or more stable. I need to implement one pretty fast
but don't have a lot of time to research them all, so I thought I would
consult the great collective wisdom of this list to help me decide on the
right one to use.
Let me know what you think of if there are any better, newer or more stable
ones out there.
Thanks.
Neal Bailey
Internet Marketing Manager
E-mail:II <mailto:[EMAIL PROTECTED]> [EMAIL PROTECTED]
_____
[Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings]
