We help IT Professionals succeed at work.

Coldfusion validate fckeditor cfmodule

wkolasa
wkolasa asked
on
Medium Priority
969 Views
Last Modified: 2012-05-06
Hi,  I need to limit the amount of characters a user can type into this input.  Problem is, I want to use fckEditor which requires me to change the input into a module.  The quick and easy CFInput validation tag I was using no longer works.  In an ideal world I'd like what I pasted below to work.  I know this isn't quite possible (and I'm running CF 7) as is.  Any help would be greatly appreciated.
<cfmodule
                template="../fckeditor/fckeditor.cfm"
                basePath="	../fckeditor/"
                toolbarSet = "Basic"
                instanceName="brief_summary"
                value='#getform.brief_summary#'
                width="100%"
                height="120"
                validate="maxlength" 
                maxlength="500" 
                message="You have exceeded the 5 sentence limit (500 characters) for the BRIEF STATEMENT.  Please edit the field."
                validateat="onSubmit">

Open in new window

Comment
Watch Question

CERTIFIED EXPERT

Commented:
you can also call it using createObject

try this


<script type="text/javascript">
function checkLen()
{
if (document.getElementById('brief_summary').value.length > 500)
{
alert('You have exceeded the 5 sentence limit (500 characters) for the BRIEF STATEMENT.  Please edit the field.')
return false
}
else
{return true}
}
</script>
<cfscript>
	basePath="      ../fckeditor/";
	fckEditor = createObject("component", "texteditor.fckeditor");
	fckEditor.toolbarSet = "Basic";
	fckEditor.instanceName="brief_summary";
	fckEditor.value='#getform.brief_summary#';
	fckEditor.width="100%";"
	fckEditor.height="120";
	fckEditor.create();               
</cfscript>
<input type="submit" onClick="checkLen(); return false;">

Open in new window

Author

Commented:
Receiving an error... probably a pathing thing:

ERROR:
Could not find the ColdFusion Component texteditor.fckeditor.  
Please check that the given name is correct and that the component exists.  
 
54:          <cfscript>
55 :         basePath="      ../fckeditor/";
56 :         fckEditor = createObject("component", "texteditor.fckeditor");
57 :         fckEditor.toolbarSet = "Basic";
58 :         fckEditor.instanceName="brief_summary";

 
CERTIFIED EXPERT

Commented:
sorry c&p error

texteditor.fckeditor

is

directory.componentName

sb

fckeditor.fckeditor

however this uses fckeditor.cfc I forget  if it is installed with fckeditor

if not it's available here

http://weblearn.ox.ac.uk/static/fckeditor/fckeditor.cfc

you would just copy it to  ../fckeditor

or you can call it with cfmodule... the jscript should still work the same

Author

Commented:
I don't know what I'm doing wrong.  The fckeditor.cfc is present, it's in the fckeditor folder.  The file I'm calling it from is on the same level as the fckeditor folder (so the fckeditor.cfc would be one level down)...  I'm creating the object as such:  fckEditor = createObject("component","fckeditor.fckeditor");

... and still the "Could not find the ColdFusion Component fckeditor.fckeditor"

Author

Commented:
Do I have to make a mapping in the cf Admin for this?
CERTIFIED EXPERT

Commented:
sorry...

missed a line and forgot some fckeditor api stuff

firstly...cf doesn't like it when the path and component are the same  (which is why I had it changed to textEditor)

so rename your fckeditor directory to texteditor

I also missed the param

fckEditor.basePath= basePath;


and the JS needs

var oEditor = FCKeditorAPI.GetInstance( "brief_summary" ) ;
      var sContent= oEditor.GetXHTML( true ) ;
      
to get the updated info from the editor  

this is tested and should work for you


<script type="text/javascript">
function checkLen()
{
	var oEditor = FCKeditorAPI.GetInstance( "brief_summary" ) ; 
	var sContent= oEditor.GetXHTML( true ) ;
	
if (sContent.length > 500)
{
alert('You have exceeded the 5 sentence limit (500 characters) for the BRIEF STATEMENT.  Please edit the field.')
return false
}
else
{return true}
}
</script>
 
 
<form method="post" action="index.cfm">
<cfscript>
        basePath="texteditor/";
        fckEditor = createObject("component", "texteditor.fckeditor");
        fckEditor.toolbarSet = "Basic";
        fckEditor.instanceName="brief_summary";
        fckEditor.value=#getform.brief_summary#;
        fckEditor.width='100%';
        fckEditor.height=120;
        fckEditor.basePath= basePath;
        fckEditor.create();               
</cfscript>
<input type="submit" onClick="checkLen(); return true;">
</form>

Open in new window

Author

Commented:
I'm still forced to use <cfmodule>.  Maybe this has something to do with the fact that I'm using includes?  The <cfscript> is callingfrom inside an include of the main page.  I know the javaScript is unhappy with the include structure.  In fact, my nav is broken b/c of the <cfincludes>.  Below is the <cfmodule> tag that does work, so you can see that the pathing for <cfscript> is correct:
<cfmodule
                template="../textEditor/fckeditor.cfm"
                basePath="	../fckeditor/"
                toolbarSet = "Basic"
                instanceName="brief_summary"
                value='#getform.brief_summary#'
                width="100%"
                height="120"
                validate="maxlength" 
                maxlength="500" 
                message="You have exceeded the 5 sentence limit (500 characters) for the BRIEF STATEMENT REGARDING THE SIP field.  Please edit the field."
                validateat="onSubmit">

Open in new window

CERTIFIED EXPERT
Commented:
firstly note that path sb

template="textEditor/fckeditor.cfm"
                basePath="      texteditor/"

and not ../ as that will look one level higher

there's no reason js should care about includes or cfscript for that matter attached works eaqually as well

btw...don't see how this

template="../textEditor/fckeditor.cfm"
                basePath="      ../fckeditor/"

could work in your last posted code as basePath sb textEditor (and not have ../)

i believe your issue is paths realative to the includes but without knowing your dir structure It's hard to say

this structure works for me

main
      includes
              texteditor


in main dir

index.cfm with one line
<cfinclude template="includes/pagewitheditor.cfm">      

pagewitheditor.cfm
is the text below








<script type="text/javascript">
function checkLen()
{
        var oEditor = FCKeditorAPI.GetInstance( "brief_summary" ) ; 
        var sContent= oEditor.GetXHTML( true ) ;
        
if (sContent.length > 50)
{
alert('You have exceeded the 5 sentence limit (500 characters) for the BRIEF STATEMENT.  Please edit the field.')
return false
}
else
{return true}
}
</script>
 
<form method="post" action="index.cfm">
 
<cfmodule
                template="textEditor/fckeditor.cfm"
                basePath="      texteditor/"
                toolbarSet = "Basic"
                instanceName="brief_summary"
                value=''
                width="100%"
                height="120"
                validate="maxlength" 
                maxlength="500" 
               >
				
<input type="submit" onClick="checkLen(); return true;">
</form>			

Open in new window

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.