TESTERS CALLED: Version 2.1 Preview

Hi. And thanks for the last changes. It is getting better and better.

I found some problems, hope you can fix this as well:
Code to reproduce most are included

Tested in FCKeditor 2.1 on XP in FF 1.06 and IE 6.0

Problem 1:
P tags are handled different in IE and FF:

If you insert som new-lines in IE and save to database.
Then those new-lines are stored as:
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

If you now open same content in FF then those new-lines are like this:
<p> </p>
<p> </p>
<p> </p>

The empty P tags are not possible to remove in FF by normal editing like backspace or left-click+drag.
The content also looks different since the space are not added in FF.

Problem 2:
If you insert a table inside a DIV then IE display some extra
space after the table if the WIDTH property are set for the DIV.
This can be observed in IE but not in FF.

See attached code below for testing. The first works as it should.
The second uses the WIDTH property in DIV and is buggy:

<div style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: white; PADDING-TOP: 0px; FONT-FAMILY: arial; BACKGROUND-COLOR: gray">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tbody>
<tr>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">This DIV TABLE combination has no spacing problem in IE<br /><br />This DIV is not using the WIDTH property</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p>
<div style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 50%; COLOR: white; PADDING-TOP: 0px; FONT-FAMILY: arial; BACKGROUND-COLOR: gray">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tbody>
<tr>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">This DIV TABLE combination HAS A SPACING PROBLEM in IE. There is an extra space in the DIV after the TABLE.<br /><br />This DIV is using the WIDTH property</td>
</tr>
</tbody>
</table>
</div>

Problem 3:
Floating DIV are sometimes clipped in IE:

Explanation on how to reproduce in code below.
Just paste code below into editor and follow guidelines:

<div style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; FLOAT: right; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 50%; COLOR: white; PADDING-TOP: 0px; FONT-FAMILY: arial; BACKGROUND-COLOR: gray">
<table cellspacing="0" cellpadding="0" width="100%" border="1">
<tbody>
<tr>
<td style="PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px">
<p><strong>DIV clipping problem in IE.</strong><br />This DIV has the properties FLOAT and WIDTH set.</p>
<p>If you place the cursor after the letter in line left of DIV and hit CTRL numerous times, as well as BACKSPACE to remove the same CTRL then you can sometimes experience clipping of this DIV.</p>
<p>Insert at least 3 or 4 CTRL after line to left of div.<br />Same problem for both CTRL and SHIFT+CTRL<br /><br />If text left of DIV extends&nbsp; the bottom of this div then the problem is gone.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>Insert cursor after this line and press CTRL&nbsp;from 2&nbsp;to 4 times of more... as well as BACKSPACE.</p>


Problem 4:
Placing cursor ouside DIV if DIV is only content in editor is difficult (impossible ?).
Problem in FF, not in IE:

Paste code below in editor in FF and try to place cursor outside the DIV.

<div style="margin: 0px; padding: 0px; font-size: 12px; float: left; width: 50%; color: white; font-family: arial; background-color: gray;">
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td style="padding: 10px;"><strong>Cursor placement in FF problematic</strong><br /><br />Try to place the cursor outside of this DIV in FF. Not possible, if DIV are the only content. Works find in IE.<br /></td>
</tr>
</tbody>
</table>
</div>


Problem 5:
Deleting of DIV are sometimes difficult: only tested in IE.

In IE
BACKSPACE have no effect on the DIV from the outside.

In FF
Instead of deleting DIV cursor pops into the content of DIV.

Insert code below into editor and try it:
<div style="margin: 0px; padding: 0px; font-size: 12px; float: left; width: 50%; color: white; font-family: arial; background-color: gray;">
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td style="padding: 10px;">
<p><strong>Deletion of DIV with backspace</strong><br /><br />Place cursor after text outside DIV and hit backspace. <br />In IE, BACKSPACE have no effect on the DIV.<br />In FF the BACKSPACE causes cursor to pop inside content of DIV.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p>Place cursor after this text and hit BACKSPACE to try to remove the DIV</p>


Problem 6:
Increase Indent, Decrease Indent handled different in IE and FF.

Tested on this plain text only: Increase Indent test

In FF:
Select text (Increase Indent test) and click on Increase Indent button creates:
<blockquote>Increase Indent test</blockquote>
A new selection an click on Decrease Indent produces
Increase Indent test

If I open the blockquoted text in IE and places cursor inside the text and hit Decrease Indent then the result is:
<p>Increase Indent test</p>

In IE:
Select plain text (Increase Indent test) and click on Increase Indent button creates:
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<p>Increase Indent test</p>
</blockquote>

(** NOTE:
If I save this content and open in FF and hit Decrease Indent the result is:
<blockquote dir="ltr" style="margin-right: 0px;"> </blockquote>
<p>Increase Indent test</p>
<blockquote dir="ltr" style="margin-right: 0px;"> </blockquote>
**)

I then select the text (which first was produced in IE by clicking Increase Indent) in IE and click on Decrease Indent which produces:
<p dir="ltr" style="MARGIN-RIGHT: 0px">Increase Indent test</p>

Then I place the cursor in the text again and select Increase Indent again which produces:
<blockquote dir="ltr" style="MARGIN-RIGHT: 0px">
<p dir="ltr" style="MARGIN-RIGHT: 0px">Increase Indent test</p>
</blockquote>

Which differ from the first blockquote inserted in IE...

Problem 7:
Justify differences between IE and FF.

Tested on plain text: Block justify test

In FF
Select the text (Block justify test) and click on Right Justify button.. it produces:
<div align="right">Block justify test</div>

If I then select text again and click on Left Justify button then it produces:
<div align="left">Block justify test</div>

In IE
Select the plain text (Block justify text) and click on Right Justiry button.. it produces:
<p align="right">Block Justify test</p>

Okay... both IE and FF understand and handles both implementations but is there a reason for not using same code (TAG) when using different browsers.
Using classes might be easier when you know that same (button click) produce the same code.

Problem 7:
BOLD, ITALIC, UNDERLINE
This is really minor but..anyway

Both IE and FF now uses same STRONG, EM and U ... great.
They are put around text in same order but it works.

In FF:
After you have applied one or more of the above to plain text (only tested on plain text):
If you place cursor in styled text and then clicks one or more of the highlighted buttons for STRIKE, EM, U (Bold, Italic, Underline)
then the style are not removed. It works if you select the whole text.

In IE:
Same as for FF but works a little different for deselcting Bold.
If you place cursor inside the styled sentence only the word that the cursor is placed within get destyled.
Works okay if you select whole text thouhg..

Problem 8:
Why implement "Insert Horizontal line" as:
<hr width="100%" size="2" />

and not as:
<hr />

Just belives the latter one will make easier to use with classes.

One more issue found:

Applying custom styles below (SPAN) within a P tag and then removing the style agian, removes BR tags within that P tag in FF.

Also... In FF you can just place cusor somewhere witin the newly applied SPAN styling and
deselect that style by selecting same style from the Style dropdown, or you can select all text and do the same.
In IE you have to select whole text to deselect the style.

Here are the custom Style definitions I tested with:
(I guess that this happen with all similar SPAN implementation)

<Style name="LineHeight=200%" element="span">
<Attribute name="style" value="line-height: 200%;" />
</Style>
<Style name="FontSize=150%" element="span">
<Attribute name="style" value="font-size: 150%;" />
</Style>


Here are code to test with ... insert into editor and try out in FF:


<p>If you enter some lines in a paragraph in FF<br />with BR tags between the lines<br />and then select text in that paragraph in FF<br />and apply a custom style which inserts this:<br />A SPAN with line-height:200%<br />Or A SPAN with font-size:150%<br />Or I would guess any SPAN applied same way.....<br />around the selected text.<br />If you now select the same text again and deselect<br />that styling (using the style dropdown) all the<br />BR tags are removed in FF.<br /></p>

Two more found:

Problem 1: Background color for plain text and paragraphs behaves different in FF and IE:

In IE implements this using the FONT tag and it works... like this: (It works in IE)
<p><font style="BACKGROUND-COLOR: #0000ff">Background color test</font></p>
and same for plain text but without the P tags.

FF: Not able to set background color for a P section or for plain text.

I would prefer use of SPAN tag since FONT are deprecated.

"Problem" 2:Text color behaves same in IE and FF but....

Text color are implemented using FONT tag like this:
<font color="#0000ff">Try this color</font>

I thought the FONT tag was deprecated....
Is there a reason for not using the SPAN tag?

https://bugzilla.mozilla.org/show_bug.cgi?id=10713

Huge memory leak on IE (around 500KB per instance)

Font format dropdown doesn't show the format of the currently selected block in IE.

> Font format dropdown doesn't show the format
> of the currently selected block in IE.

Yeah this one is annoying ... although it has always been there.

I hope it can be fixed, it works nicely on Firefox!

FEATURE request

The newly introduced:
FCKConfig.ProtectedSource.Add(...)

is really handy piece of work.

Is it possible to create something similar for visible tags in the editor?

For example:

Let say you let your users insert premade code into the editor ... maybe a DIV with a couple of other elements within.... One H3 tag and one table with one cell.

Then say you want a rules like this:

The user should be able to edit text widthin the h3 tag.
The user should be able to edit text widthin the td tag of the table and table.

The user should not be able to delete h3 tag.
The user should not be able to delete table.
The user should be able to delete the DIV tag, but then also deleting all content widthin that tag.

The user should not be able to insert text/edit within the DIV tag and outside the h3 or table tag.

Could maybe be implemented by using this within the tags:

fckedit="no"
which means that editing directly inside tag is not allowed, but editing within sub tags may be allowed (which depends if fckedit="no" are used on subtags or not)

fckdelete="no"
Which means deletion of that single tag is not allowed directly, but should be deleted if parent tag are.

And then if FCK writes some code to obey the rules .... well it might work.... and should opt for some new possibilities...

Se example code below.... and if you have some thoughts about this ...well.....

<div fckedit="no" class="someclass">
<h3 fckdelete="no">Title here</h3>
<table fckdelete="no" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<p>Text here</p>
</td>
</tr>
</tbody>
</table>
</div>

sorry replace :
oRegex.UrlOnChangeTestOther.compile( '^(javascript:|#|/)', 'gi' ) ;
by
oRegex.UrlOnChangeTestOther.compile( '^(javascript:|#|/|../|[-a-z0-9_.]*/)', 'gi' ) ;

1. Editor does not loose focus if you click a button element in the page outside the editor
and hitting space button inside editor after the button-click causes the onclick event for button to fire (only observed in IE).

How to reproduce:
a. Write some text inside editor.
b. After the last letter written in editor, click on a button in the main page
(I have tested by clicking a button that opens a new window, and also a button that resizes the editor area).
c. If it is a button that opens a new window.. and you just close it again then the cursor is still visible after last written letter in editor,
and you can start writing inside editor without clicking inside it first. Do not klick any place before writing.
d. Or if it is a button .. let say that just adjust the editor width (button outside the editor), then you can start write where you
previously left, inside editor, without clicking any place inside the editor first.

If you do either 3 or 4 above you will trigger the onclick event for the button on every hit on the SPACE key when you are writing inside editor.
Annoying and confusing for the user.

2. Problem with selected objects in IE that object markings are showing outside the editor area and above
elements in the page that holds the editor... that is if the object you have selected are partly scrolled up or down in editor.

3. Font and font size are using the FONT tag. Why not the SPAN tag?

Font (from font dropdown) in FF are implemented like this:
<font face="Times New Roman">Font test</font>

Size (from size dropdown) in FF are implemented like this:
<font size="5">Size</font>

Same here: Why use FONT and not SPAN?
FONT are deprecated.

Hi Fred,

Can you alo make it fix the problem of correcting <somtag /> to <sometag></sometag> ?

Some programmers would rather have there tags remain the way they have entered it

Feature request for 2.1

Being able to set an FCKeditor variable for BODY className before the editor is loaded(initialized), and to do it without any dirty hack. Would like this to be in the FCKeditor core code.

I uses classes for the body tag to make it easy for the users to get the basic styling for most used stuff.

Being able to use a class for the BODY of FCKeditor is handy because that is what I'm using on the site.

To make this work as FCKeditor is today I have to set className of BODY of editor AFTER the editor has loaded. (and without any hacking into code)

So after the editor has loaded I call this custom function which is in main page:

function switchClass(theclass){
var oFCK;
if (navigator.appName=="Netscape")
oFCK = MyTextarea___Frame.contentWindow;
else
oFCK = MyTextarea___Frame;

oFCK.FCK.EditorDocument.body.className= theclass;
}

And then the user can switch class for the BODY at any time using a dropdown that is placed outside the editor..

NOT being able to set the className (tell the editor what class should be used on startup) before the editor has loaded, makes the content in the editor first load in another style setting and then only after editor has finished loading, my switchClass function is called and the appropriate class applied.

This makes the content "flash" when the class are changed. I do not want that.

I guess it is pretty easy (for the developers) to change the core code, to make it possible to set an appropriate FCKeditor className variable before
oFCKeditor.ReplaceTextarea();
is called and then make the editor load with the defined class.

I would prefer to be able to do this in the page where the FCKeditor is placed. Maybe would be nice being able to optionally set a similar variable in fckconfig.js

Would really like to see that in core code of FCKeditor as well.

bngobngo

Did you manage to get my fix for this working?

Soon i am going to make a donation (the third).
If the bug of BaseHref on FIREFOX is corrected I think that I risk to be so happy that I am doubtless going to make a mistake and to empty my bank account:)
FIREFOX is the only compatible navigator MAC

Okay:

I open the editor in IE.
Then hit the "New Page" button to clear all content.
Then I enter 3 CTRL, "Test" and 3 CTRL so the source look now like this:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Test</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Then I submit the data to database.
After I have submitted the data to database. When I submit the submitted data will be fetched from DB and redisplayed in browser and editor. I hit the source button again to see that I have the same as I submitted above. Which I have.

All above was done in IE 6.0 on XP.

Then I open phpmyadmin and find the record I just saved. It contains this:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Test</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Exactly same as I submitted. Would be strange though if this was not the same since fetching same record in IE show this in source.

Next is tested in Firefox 1.0.6

I open the same page as I tested using IE above.
Then I select the same record as I created in IE, and when I now look at the source I see this:

<p> </p>
<p> </p>
<p> </p>
<p>Test</p>
<p> </p>
<p> </p>
<p> </p>

I have now lost the "&nbsp;" part inside those empty paragraphs.

Then I save the record in Firefox back to DB by hitting submit. This also fetches the submitted data again from database and display it in editor.

When I look at the data in Firefox again after subission, data look like this:

<p> </p>
<p> </p>
<p> </p>
<p>Test</p>
<p> </p>
<p> </p>
<p> </p>

I now check the record in database again and it look like this:

<p> </p>
<p> </p>
<p> </p>
<p>Test</p>
<p> </p>
<p> </p>
<p> </p>

Then I open record in IE again and look at source, which look like this:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Test</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

So it looks like IE do some cleaning with those empty P tags fetched from DB.

NOTE: If I start all over in Firefox, empty the source and enter (I'm not pasting) same as when I started in IE then I see this in Firefox before submission to database:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Test</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Then I get this in database:

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Test</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

But when I submit to database in Firefox then my page also fetches the submitted data from DB and redisplay it as:

<p> </p>
<p> </p>
<p> </p>
<p>Test</p>
<p> </p>
<p> </p>
<p> </p>

And if I now submit... well you see the picture...

I installed the 2.1 on WinXP PRO without any changes to the default fckconfig.js except for:

As you can see, DB is not messing up the data and I use the same page to test this in IE and FF.
It works nicely in IE, IE even fixes empty P tags, created by Firefox, by entering "&nbsp;" into them again.
Firefox seem to have a taste for those "&nbsp;" and takes them away somewhere in load/initalizing process....

Sorry for this long post, I'm ultra-tired, it's very late here now... hope you manage to reproduce it.

Best regards

Sorry, forgot to finish this line:

I installed the 2.1 on WinXP PRO without any changes to the default fckconfig.js except for:
some css file positioning.

Thanks for the thread tips on posting, I'll use that from now on

Hi FCK.

I consider problem 1 in my first post to be a BIG problem.

I repeat it here: Problem 1.
If you are working in IE, or in FF and enter some empty paragraphs
<p>&nbsp</p>

and you save that to a database or whatever.

If you now open the same text in Firefox then all empty paragraphs now look like this:
<p></p>
which of course mess up you layout and those paragraphs are no longer editable in FF as well.

Looks to me that some code in FCKeditor change all the
<p>&nbsp</p>
to
<p></p>
when the editor loads in FF.

Other stuff:
Then there are also some problems with how DIV tags are handled in IE which is really annoying while editing.

The worst case is when editing text which is placed left or right of a floating DIV. The DIV will often be clipped in IE while you are editing that text. (try insert multiple CTRL and BACKSPACE).

Second worst of DIV handling are that inserting let say some template code where you have a table inside a DIV, then there will be extra space after table but before the bottom part of the DIV. This can be seen in IE and not in FF. Seen in editor and not in resulting page. But makes it easy for users to enter text where they should not, since it is easy to place the cursor between the </TABLE> and the </DIV> and start entering text there.

See my first post for details.

i don't get the error bb talks about.

in ie 6 on xp,
hit enter and 2 paragrahs are inserted like so:
<p>&nbsp;</p>
<p>&nbsp;</p>

open same page in firefox 1.04 and 1.07
see the same
<p>&nbsp;</p>
<p>&nbsp;</p>

the >&nbsp; have not been stripped.

I think the problem with the <p>&nbsp;</p> is very important to be fixed.

It should be possible to load text, (don't change anything) and save it back and still get the same content.

Unless of course some of the replace... settings are set in the editor.

Otherwise 2.1 looks good for us.

Andr

Hello,

I did retest it, and I can't reproduce the problem. We invoke the editor that way, and the &nbsp; remains in the code.

<div><input type="hidden" id="DE_Text1_H" name="DE_Text1_H" value="&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;Dies ist ein kleiner Ausschnitt aus meinen Fotos.&lt;br /&gt; Wenn Sie etwas bestimmtes suchen und hier nicht finden, senden Sie mir doch ein E-Mail. &lt;br /&gt; &lt;/p&gt;
&lt;h2&gt;Die neuesten 10 Bilder&lt;/h2&gt;"><input type="hidden" id="DE_Text1_H___Config" value="FlashBrowserURL=../filemanager/browser/default/browser.html?Type%3DFlash%26Connector%3D../../../../../../servlet/connectors/jsp/connector&ImageBrowserURL=../filemanager/browser/default/browser.html?Type%3DImage%26Connector%3D../../../../../../servlet/connectors/jsp/connector&customConfigurationsPath=fckconfig.js&Debug=true&AutoDetectLanguage=false&EditorAreaCSS=/peter-schild-webseite/tefiles/userstyles.css&DefaultLanguage=DE&StylesXmlPath=/peter-schild-webseite/tefiles/userstyles.xml"><iframe id="DE_Text1_H___Frame" src="fckeditor.2.1-B1/editor/fckeditor.html?InstanceName=DE_Text1_H&Toolbar=Aarcat2Source" width="600" height="300" frameborder="no" scrolling="no"></iframe></div>

bngobngo - can you show us the code you use to invoke the editor ?

Andr

Hi again.

Below I have pasted code for a PHP page for you to test the P tag bug that I get in FF.

To be able to test with code below you will have to create a database and a table in MySql.
Database structure are in top of file.
Just name the file fcktestgui2.php.

Code example below:

echo "<HTML>\n";
echo "<HEAD>\n";

echo "<script type=\"text/javascript\" src=\"FCKeditor/fckeditor.js\"></script>\n";
echo "<script src=\"FCKeditor/editor/dialog/common/fck_dialog_common.js\" type=\"text/javascript\"></script>";
// echo "<script type=\"text/javascript\" src=\"/FCKeditor/fckconfig.js\"></script>\n";

?>
<script>
    var oFCKeditor; 
    
    function saveEditorContent(modus){
        // modus 1=save current 2=savenew 3=delete
        if (modus == 1 && document.actionform.name.value == ""){
             alert("If you want to create a new record, then enter a name in NewContent field and hit SaveAsNewContent button.");
             return;
        }
        
        if (modus == 2 && document.actionform.newtext.value == ""){
            alert("You must enter a name for the new record");
            document.actionform.newtext.focus();
            return;
        }
        
        if (modus == 3 && document.actionform.name.value == ""){
             alert("There are no record to delete");
             return;
        }
        
        var oFCK;
        if (navigator.appName=="Netscape") 
            oFCK = MyTextarea___Frame.contentWindow; 
        else 
            oFCK = MyTextarea___Frame; 
        
        document.actionform.action.value = modus;
        
        document.actionform.MyTextarea.value = oFCK.FCK.EditorDocument.body.innerHTML;
        document.forms[0].submit();
        
    }
    
    function set_editor_width_change(wpix){
        document.getElementById('MyTextarea___Frame').width = wpix + parseInt(document.getElementById('MyTextarea___Frame').width);
    }
    
    function set_editor_height_change(hpix){
        document.getElementById('MyTextarea___Frame').height = hpix + parseInt(document.getElementById('MyTextarea___Frame').height);
    }
    </script>
<?
echo "</HEAD\n";


echo "<BODY>\n";

    echo "<center><form name=\"actionform\" action=\"fcktestgui2.php\" method=\"post\">
        <input type=\"hidden\" name=\"action\" value=\"0\">\n
        <table border='0' width=700>";
    echo "<tr><td><b>Testing FCKeditor 2.1</b></td></tr>";
    
    echo "<tr><td>\n";
    
    echo "<b>Toolbar:</b> <SELECT name=\"modus\" onchange=\"document.actionform.submit();\">\n";
    echo "<option  value=\"1\">FCKedtior with all standard buttons</option>\n";
    echo "</SELECT>\n";
    
    echo "<br><br>";
    echo "Content: <select name=\"name\" onchange=\"document.actionform.submit();\">\n";
    
    $query = "select FckID, FckName from fckeditor order by FckName";
    $rs = mysql_query($query);
    $rec = 1;
    $cur_rec = 0;
    while ($row = mysql_fetch_assoc($rs)){
        if (($rec == 1 && $fckeditor_id == 0) || ($fckeditor_id == $row['FckID']) ){
            $sel = "selected";
            $cur_rec = $row['FckID'];
        } else 
            $sel = "";
                
        echo "<option $sel value=\"".$row['FckID']."\">".$row['FckName']."</option>\n";
        $rec++;
    }
    
    echo "</select>\n<input type=\"button\" value=\"Delete\" onclick=\"saveEditorContent(3);\"><br><br>";
    // echo "</select>\n<br><br>";
    echo "New Content: <input type=\"text\" name=\"newtext\" value=\"\" size=\"40\"><input type=\"button\" value=\"Save as new content\" onclick=\"saveEditorContent(2)\"><br>";
    echo "</td></tr>\n";
    
    
    // if fckeditor
    if ($cur_rec > 0){
        $query = "select FckText from fckeditor where FckID = $cur_rec";
        $rs = mysql_query($query);
        if ($row = mysql_fetch_assoc($rs))
            $cur_text = $row['FckText'];
        else     
            $cur_text = "";
    } else 
        $cur_text = "";
    
    echo "<tr><td>&nbsp;</td></tr>";
    
    echo "<tr><td>\n";
    
    echo "<br><input type=\"button\" value='Width +100' onclick=\"set_editor_width_change(100);\">\n"; 
    echo "<input type=\"button\" value='Width -100' onclick=\"set_editor_width_change(-100);\">\n";
    
    echo "<br><input type=\"button\" value='Height +100' onclick=\"set_editor_height_change(100);\">\n"; 
    echo "<input type=\"button\" value='Height -100' onclick=\"set_editor_height_change(-100);\">\n";
    
    echo "<script>\n
          window.onload = function(){\n
            oFCKeditor = new FCKeditor('MyTextarea');\n
            // properties \n
            oFCKeditor.Width=$toolbar_width;         // in pixel or %, default='100%'        \n
            oFCKeditor.Height=$toolbar_height;         // in pixel or %, default=200          \n
            oFCKeditor.ToolbarSet = '$toolbar_set';
            
            oFCKeditor.Config.EditorAreaCSS = '/FCKcustom/fck_editorarea-custom.css' ;
            
            // oFCKeditor.Value = '';                // here set in textarea \n
            // oFCKeditor.BasePath = '/Components/fckeditor/';     // where FCKeditor searches for components. Default='/fckeditor/', avoid relative paths\n
            // oFCKeditor.CheckBrowser = true;                     // checks browser compatibility. Default=true
            //  oFCKeditor.DisplayErrors = false ;                //  show error messages on errors while rendering the editor. default=true
              oFCKeditor.ReplaceTextarea();                \n
              
          }\n
          </script>\n";
    
    
    echo "<textarea id=\"MyTextarea\" name=\"MyTextarea\">$cur_text</textarea>\n";
    echo "</td></tr>\n";
    
    
    echo "<tr><td><input type=\"button\" value='Save current record to MySql database' onclick=\"saveEditorContent(1);\">\n";
    echo "</td></tr>\n";
    
    echo "</table></form></center>\n";
    
echo "</BODY></HTML>\n";
 

<?
    /* MYSQL database name fckeditor
    
        table structure:
        
        -- 
        -- Table structure for table `fckeditor`
        -- 
        
        CREATE TABLE `fckeditor` (
          `FckID` smallint(5) unsigned NOT NULL auto_increment,
          `FckName` varchar(40) NOT NULL default '',
          `FckText` text NOT NULL,
          PRIMARY KEY  (`FckID`)
        ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
        
    */
    

    // get submitted values
    if (isset($_POST['MyTextarea'])) $text = $_POST['MyTextarea']; else $text = "";
    if (isset($_POST['action'])) $action = intval($_POST['action']); else $action = 0;
    if (isset($_POST['name'])) $fckeditor_id = intval($_POST['name']); else $fckeditor_id = 0;
    
    
    $conn = @mysql_connect("localhost","db-user","password");
    mysql_select_db("fckeditor");
    
    if ($action != 0){
    
        if ($action == 1){ // save current
            $query = "update fckeditor set
                     FckText = '" . addslashes($text) . "'
                     where FckID = $fckeditor_id ";
                 mysql_query($query);
        }
        
        if ($action == 2){ // new post
             if (isset($_POST['newtext'])) $newname = $_POST['newtext']; else $newname = "";
             
             if ($newname != ""){
                 $query = "insert into fckeditor set
                     FckName = '$newname',
                     FckText = '" . addslashes($text) . "'";
                 mysql_query($query);
                 $fckeditor_id = mysql_insert_id();
                 
             }
        }
        
        if ($action == 3){ // delete post
            $query = "delete from fckeditor where FckID=$fckeditor_id";
            mysql_query($query);
            $fckeditor_id = 0;
            
        }
        
    }

    $toolbar_set = "Default";
    $toolbar_width = 700;
    $toolbar_height = 400;


// FCKeditor testingpage
echo "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">";

?>

FCK

You may also want to see that I put out the database text like this in PHP:

echo "<textarea id=\"MyTextarea\" name=\"MyTextarea\">$cur_text</textarea>\n";

Where $cur_text are the text from database.