CodeCharge Studio
search Register Login  

Visual Web Reporting

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> ASP

 FCK Editor - Adding WYSIWYG Editor for your text box

Print topic Send  topic

Author Message
ozlady

Posts: 5
Posted: 04/05/2005, 5:02 AM

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!
View profile  Send private message
Oper


Posts: 1181
Posted: 04/07/2005, 6:42 AM

FCK is super, i has been using FCK like 1year+

i just use different approach a litle easy less code.

But i recommend anyone needing WYSWYG editor.
_________________
____________________________
http://www.7bz.com (Free CMS,CRM Developed in CCS)

http://www.PremiumWebTemplate.com
Affiliation Web Site Templates

Please do backup first
View profile  Send private message
Kendra
Posted: 04/14/2005, 1:41 PM

This technique with the FCK editors works beautifully in CCS, I just tried it. I'm evaluating CCS and so far am very thrilled, will purchase it unless I run into a showstopper during the eval. 8-)

Kendra
ChipW
Posted: 04/21/2005, 7:15 AM

I'm sure this has been asked and answered, but with FCKeditor or others I'm sure, how do you seup the page so that a CSS doesn't override the html in the "body" that the editor writes. I'm obviously not real proficient with style sheet implementation yet.

Thanks
Chip
Oper


Posts: 1181
Posted: 04/22/2005, 12:22 PM

Global CSS will overwrite the HTML inserted on the Field.
what i do whne i know i have to use HTML like thiswithotu been oveqwwroted i simply dont use CCS for that page, so no style at all for that pahena di insert color manual to the TD/TR/ etc.

This will work ok for you.

PS:Right now i use my Own CSS i not use CCS style theme so.

_________________
____________________________
http://www.7bz.com (Free CMS,CRM Developed in CCS)

http://www.PremiumWebTemplate.com
Affiliation Web Site Templates

Please do backup first
View profile  Send private message
TheOwl
Posted: 05/11/2005, 2:58 PM

;-)
You must to be a genius!!!

Thanks a lot. This procedure works great, and you save my job.

Good look!
marcwolf


Posts: 361
Posted: 05/11/2005, 5:53 PM

I have a question re FCK and other HTML editors.

Not having yet used one (but getting a lit of pressure from clients) I know how I want to implement it but would like to bounce a couple of ideas around.

Often on our pages we can have 3 or 4 comment area's - each used for a different purpose. It would be a waste of screen space to have the full FCKeditor interface visible at all times... However

If one was to use Javascript to take the contents of the textbox and then pass it to an IFRAME that has the full FCKeditor within it..

One could even skip having a visible textbox on the parent page but have a DIV where the InnerHTML is the text to be displayed - in all of its formatted glory. This could be passed upto the FCKEditor window for editing and then places back into the DIV afterwards. A hidden textbox within the DIV can act as the interface back to CCS so that CCS has an object that it can use for updating the database with.

Has anyone gone this far or have any suggestions re "We tried that and got burned!!"

Many thanks for any input

Dave


_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
View profile  Send private message
marcwolf


Posts: 361
Posted: 05/11/2005, 9:58 PM

Hi all.. Yeah - me again :(

For those who have used FCK Editor - I have downloaded a copy and am currently working with it.

Now... I get get and set the inital value of the editor using the VALUE property. However that only gets/set the value at the beginning.

Doe anyone know if there is a property or a way to get the contents at any time. I want to hook this onto a piece of Javascript so to call back the formatted contents at any time.

With this I can create a universal editor window that any conteol can call.

Take Care

Dave
_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
View profile  Send private message
Trunks78
Posted: 08/29/2005, 1:31 AM

Why i receive an arror on upload file :

""XML SERVER ERROR""

Thanks for help!!!!
marcwolf


Posts: 361
Posted: 08/29/2005, 7:25 PM

Ah..

XML Server Error is a result of your server not having the correct permissions to set up the user upload area for pictures/files etc.
Have a look on the FCK forums about that.

We have been using FCK editor for a while with great results.

We do things a little differently as we have a pop-up frame that we have our FCK editor in. That way we can hide it and show it at will, plus with the draggable iframe code move it around the screen.

This also means that when you have 5 text area's on a page you are not cluttered with 5 sets of tool bars etc.

To display the formatted HTML on the page (so the user can see what they have done) we use the following.

A DIV, a hidden TextBox, and a HTML button.

The Hidden Text box contains the actual working information that is passed between CCS and the Iframe containing FCK.

A small piece of JS takes the contents of the hidden textbox and put it into the DIV.innerhtml thus displaying it using the stylesheet of the page.

The HTML button next to the DIV calls JS which takes the contents of the hidden field and passes it to the IFrame, also including the elementID of the hidden textbox for reference.

When FCK closes it transfers the changed HTML back to the hidden box and also copies the HTML into the DIV.innerhtml

And when the form is submitted we just bind the hidden textbox to the datafield.

So we get the best of both worlds of formatted text plus smaller screen estate

Take Care All

Dave
_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
View profile  Send private message
dataobjx


Posts: 181
Posted: 08/31/2005, 10:19 AM

You can also login at
dmpro.dataobjx.net and download the HTMLArea example provided in the public files area.

There are a few other examples as well including field masking for phone numbers, etc.
_________________
www.DataObjx.net
www.mydigitalapps.com
View profile  Send private message
wkempees
Posted: 08/31/2005, 11:28 AM

This invitation I will take, If you don't mind ;-)
Greetz,

Walter
dataobjx


Posts: 181
Posted: 08/31/2005, 11:58 AM

Mr Kempees,

Thank you - you and all the other ccs users on the planet can also upload sample files.

Use the login params you'd normally use to login to dataobjx.

If you are not a member at the moment, register - it's free.

NOTE: New registrations may not have immediate access - but will have usually within an hour or two after registering. Current users have immediate access.

Again DMPro is located at dmpro.dataobjx.net - do not put http:// in front of the url - this is a sub-domain.
_________________
www.DataObjx.net
www.mydigitalapps.com
View profile  Send private message
mramirez18

Posts: 56
Posted: 09/15/2005, 7:23 AM

Does anyone have a working example. I followed instructions but I am not able to make it work.
View profile  Send private message
mramirez18

Posts: 56
Posted: 09/15/2005, 7:24 AM

Working example, I mean so I can open it in Codecharge Studio and look at the code.
View profile  Send private message
Bert
Posted: 09/21/2005, 4:05 AM

Hello marcwolf,

Are you willing to share your code?
Can we take a look at it somewhere?

Thanks,
Bert

marcwolf


Posts: 361
Posted: 09/21/2005, 8:52 PM

Hi Bert.
Well - a lot of the code is pretty interconnected to our other functions but I will try and help where I can.

this is the html snippet that processes and displays the formatted text.

  
          <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>  
  

Remember in this the HIDDEN text box is what you work with. Not the Div so when you call FCKEditor in its own popup - thisis what you pass to it and get back.
The script is there just to copy the hidden text into the DIV statement. Not the specifics with the naming of the controls esp where the DIV is controlname + '_div'

The following code is what is in the top of the page. You can see that we are opening up a hidden frame and loading it with the URL of the FCK instance, plus passing the control containing the formatted HRML.

  
function OpenPop_Editor(sField) {   
//pops up a screen for the Editor  
frames['popup_frame'].location.href = "fckeditor.asp?cntrl=" + sField;    
popup_div.style.display='block'  
popup_div.focus();   
}  
  
function ClosePop_Frame() {   
frames['popup_frame'].location.href = "";  
popup_div.style.display='none'  
}  
  
function hidefrm() {   
frames['popup_frame'].location.href = "";  
popup_div.style.display='none'  
}  


Ok - on the FCK side its pretty easy

We write a simple ASP wrapper arounf the FCK editor so we can pass parameters easily. In this case the parameter will be SField

then in the FCK Declarations

  
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  

Where you can see that using ASP we are passing in the instance of the control. If you always use the same control name for your test you can hard-code it and skip ASP all together.

After FCK has changed the text we need to return it to the calling location. this is done with Javascript in the following way

  
<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>  

The Body part creates the instance, and set up the two buttons

When the Save Changes button is presses we call the appropriate function that updates the calling screen with both the formatted HTML and the displaying DIV.
The other code there is for frame housekeeping like show it, hide it etc.

The key things to remember re FCK are..

Use the VALUE to set the initial contents of the FCK instance and
Use the GETHTML() function to retrieve the formatted text from the FCK instance

The DIV is for display only.
The HIDDEN field is your actual worker.

Hope this helps some folks.

Take care

Dave


p.s. Yes -- we are setting up our site to showcase our techniques.. But like all businesses - our paying customers must come first.
_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
View profile  Send private message
Bert
Posted: 10/03/2005, 2:48 AM

Hi Dave,

Thanks for the info (and sorry for the late reply, I'm really busy with other stuff).

B.
Oper


Posts: 1181
Posted: 10/03/2005, 8:08 PM

we only add 1 line to use fck: this si for a memo field named "CONTENIDO"

  
<iframe src="/FKCeditor/fckeditor.html?FieldName=Contenido&Toolbar=IGIBasic&Upload=true&Browse=false" width="100%" height="100%" frameborder="no" scrolling="no" style="WIDTH: 99%; HEIGHT: 400px"></iframe>  
   
<input type="hidden" name="{Contenido_Name}" value="{Contenido}"><font size="2"> </font></p>  

_________________
____________________________
http://www.7bz.com (Free CMS,CRM Developed in CCS)

http://www.PremiumWebTemplate.com
Affiliation Web Site Templates

Please do backup first
View profile  Send private message
kevind

Posts: 251
Posted: 11/21/2005, 1:07 PM

I get the error message:

Char: 2
Error: Object expected

on the line below:

var FCKeditor=new FCKeditor('TextArea1_Name');

any suggestions ??
thanks,
kd


Quote ozlady:
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!
:-< :-< :-<
_________________
thanks
Kevin

======================
CCS 3.2.x / ASP / MS Access /mySQL / PHP / jQuery / jQuery UI / jQuery Mobile
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

MS Access to Web

Convert MS Access to Web.
Join thousands of Web developers who build Web applications with minimal coding.

CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.