FCK Editor - Adding WYSIWYG Editor for your text box

<tr> <td class="PythonFieldCaptionTD">HTML Content</td> <td class="PythonDataTD"><input type="hidden" value="{html_text}" name="{html_text_Name}" id="{html_text_Name}"> <div id="{html_text_Name}_div" style="BORDER-RIGHT: #000000 thin solid; BORDER-TOP: #000000 thin solid; BORDER-LEFT: #000000 thin solid; BORDER-BOTTOM: #000000 thin solid"> </div> <script language="JavaScript">document.getElementById('{html_text_Name}_div').innerHTML = document.getElementById('{html_text_Name}').value </script> <input class="PythonButton" onclick="OpenPop_Editor('{html_text_Name}')" type="button" value="Editor"></td> </tr>

var sBasePath = '/FCKeditor/' var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.BasePath = sBasePath ; oFCKeditor.ToolbarSet = 'Default' oFCKeditor.Height = 300; oFCKeditor.Width = 600; oFCKeditor.Value = window.parent.document.getElementById('<% =sField %>').value

<body> <form > <script type="text/javascript"> oFCKeditor.Create() ; </script> <input type="hidden" name="src_form" id="src_form" value=""> <input type="hidden" name="src_control" id="src_control" value=""> <input type="button" value="Save Changes" onclick="savechanges()"> <input type="Button" value="Cancel Changes" onclick="window.parent.ClosePop_ClientSearch();"> </form> </body> <script type="text/javascript"> // load the details function savechanges(){ var str1 =FCKeditorAPI.__Instances['FCKeditor1'].GetHTML(); window.parent.document.getElementById('<% =sField %>').value = str1; window.parent.document.getElementById('<% =sField & "_div" %>').innerHTML = str1 window.parent.ClosePop_Frame(); } </script>

Recently I converted (along with half the planet) to using Firefox. As such I found that HTML area was not working in my applications, and I sought a freeware WYSIWYG editor that I could use.

I found it in FCK Editor.

The easiest way I have found to put it in my CODECHARGE applications is using the Javascript method.

Here I describe what to do using the CODECHARGE RAD Environment.

First, download the latest version from http://www.fckeditor.net/.

Upzip it and upload to a directory off your root called "/FCKeditor".

Then:

1. Put this in the header:

<script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>

2. Go to the page properties, then the Events, and on the client side --> On Load --> insert custom code.

3. Inside the Custom Code area, enter the following code:

var oFCKeditor = new FCKeditor('TextAreaName'); // note that the name
// should not include the {} symbols and be
// the name of the field if you were to view
// the source of the web page
// and look for the textarea's name.
oFCKeditor.Height = "400"; //put the height in pixels here
oFCKeditor.ReplaceTextarea();

4. In the html, go to the textarea that you wish to replace.

<textarea class="SaladTextarea" name="{TextAreaName_Name}" id="{TextAreaName_Name}" rows="20" cols="80">{TextAreaName}</textarea>

Make sure there is an id tag as well as a name tag. They should be the same value.

This worked for me, and hope it works for you. Post comments if there are any dramas, as I am writing this in a hurry.

Ciao and Good Luck!

Web Reports

FCK Editor - Adding WYSIWYG Editor for your text box

Web Database