Loading from mysql into WYSIWYG editor

Dev Articles Community Forums Sponsor:

July 14th, 2003, 03:49 PM

naughtymutt

Junior Member

Join Date: Jul 2003

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

Loading from mysql into WYSIWYG editor

having a look at the tutorial to build your own editor.

How do i load HTML into the editor when i start it.

July 15th, 2003, 02:20 AM

naughtymutt

Junior Member

Join Date: Jul 2003

Posts: 4

Time spent in forums: < 1 sec
Reputation Power: 0

Solved.

you just need to call a file within the iFrame src, in the format pagename.php?id=$recordid

pass in the id of the record you want to retrieve and then on that

call the record as you would normally and it will display in the file.

to save the changes, use the sql from the WYSIWYG article on this great site.

code follows

<?php require_once('../Connections/myconnstring.php'); ?>
<?PHP
if ($action =="addNews" ) {
mysql_select_db($database_AngleBooks, $AngleBooks);
$sql="Update text set heading='$heading', text='$newsPost' where textid=$textid";

mysql_query($sql);

header("location

age.php");
exit;
}

?>
<html>
<head>
<title> Browser Based HTML Editor </title>
<script language="JavaScript">

var viewMode = 1; // WYSIWYG

function Init()
{
document.body.innerHTML.value='test';
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(document.frmSave.selFont.options[document.frmSave.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';
document.frmSave.selFont.style.display = 'none';
document.frmSave.selSize.style.display = 'none';
document.frmSave.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';
document.frmSave.selFont.style.display = 'inline';
document.frmSave.selSize.style.display = 'inline';
document.frmSave.selHeading.style.display = 'inline';
iView.focus();

viewMode = 1; // WYSIWYG
}
}
function ProcessNews() { // Assign the HTML code to a hidden form variable
var htmlCode = iView.document.body.innerHTML;
document.frmSave.newsPost.value = htmlCode;
// Make sure that all fields are completed

if(document.frmSave.newsPost.value == '')
{
alert('Please enter some content for this news post.');
iView.focus();
return false;
}
return true;
}

</script>
<style>

.butClass
{
border: 1px solid;
border-color: #D6D3CE;
}

.tdClass
{
padding-left: 3px;
padding-top:3px;
}

</style>

<body onLoad="Init()">

<form action="pageedit.php" method="post" onSubmit="return ProcessNews()" name="frmSave">
<input type="hidden" name="action" value="addNews"> <input type="hidden" name="newsPost" value="">
<?php
mysql_select_db($database_AngleBooks, $AngleBooks);
$query_rsPages = "SELECT * FROM text where textid=$id";
$rsPages = mysql_query($query_rsPages, $AngleBooks) or die(mysql_error());

echo "<table border=0>";

while($row = mysql_fetch_array($rsPages)) {
$textid=$row["textid"];
$heading=$row["heading"];
}
?>
<input type="hidden" name="textid" value="<?echo $textid;?>">
<input type="text" name="heading" value="<?echo $heading;?>">
<table id="tblCtrls" width="550px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass">
<img alt="Bold" class="butClass" src="bold.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBold()">
<img alt="Italic" class="butClass" src="italic.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doItalic()">
<img alt="Underline" class="butClass" src="underline.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doUnderline()">

<img alt="Left" class="butClass" src="left.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLeft()">
<img alt="Center" class="butClass" src="center.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doCenter()">
<img alt="Right" class="butClass" src="right.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRight()">

<img alt="Ordered List" class="butClass" src="ordlist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doOrdList()">
<img alt="Bulleted List" class="butClass" src="bullist.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBulList()">

<img alt="Text Color" class="butClass" src="forecol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doForeCol()">
<img alt="Background Color" class="butClass" src="bgcol.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doBackCol()">

<img alt="Hyperlink" class="butClass" src="link.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doLink()">
<img alt="Image" class="butClass" src="image.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doImage()">
<img alt="Horizontal Rule" class="butClass" src="rule.gif" onMouseOver="selOn(this)" onMouseOut="selOff(this)" onMouseDown="selDown(this)" onMouseUp="selUp(this)" onClick="doRule()">

</td>
</tr>
</table>
<iframe id="iView" style="width: 550px; height:400px" src="pageloadvar.php?id=<?echo $textid;?>"></iframe>

<table width="550px" height="30px" border="0" cellspacing="0" cellpadding="0" bgcolor="#D6D3CE">
<tr>
<td class="tdClass" colspan="1" width="80%">
<select name="selFont" onChange="doFont(this.options[this.selectedIndex].value)">
<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" onChange="doSize(this.options[this.selectedIndex].value)">
<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" onChange="doHead(this.options[this.selectedIndex].value)">
<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">

</td>
</tr>
</table>
<input type="submit" name="save">
</form>
</body>
</html>

January 15th, 2004, 01:03 AM

gregartemides

Junior Member

Join Date: Jan 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

another solution to your question (better?)

naughtymutt, here's another solution you might find interesting. I use this in my Content Management System. Have a look at hte attachment.

Basically you can pop-up the editor from any textfield in the cms. The editor receives the text, you edit it, and send it back to the same textfield. The page cms.htm tracks which textfield had the focus before you poped the editor. It does this by assigning the textfield's id to a global variable called textfieldId each time a textfield looses focus (onBlur event). The editor then uses this variable to receive and send back the text to the correct textfield.

Attached Files

cms and editor.zip (7.4 KB, 524 views)

October 6th, 2004, 02:36 AM

PhPhreak

Registered User

Join Date: Oct 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

can someone tell me please what the complete script is? like the file pageedit.php etc?

thanks,

Phreak

October 22nd, 2004, 04:14 AM

OnlyJC

Registered User

Join Date: Oct 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

Hello,

You seem to be looking for an easy way to use a HTML editor. There is lots of info here: http://www.interactivetools.com/ - also included is a Free HTML editor.

You just load the textarea with your html, run the supplied function and then write back the textarea to the database and your done.

You may find it useful - you may not - anyways, I'm only trying to help.

- JC

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: