Shaun Mccran

My digital playground


Fck editor inserting xhtml and browser specific code

I've been using the fck editor to handle my rich text areas in a content management application. I have to say I like the way it works, and it integrates easily with a Coldfusion platform. It does however have a few issues. This article deals with fck editor using xhtml code, and the editor using a few browser specific html rewrites.

Note: I can't have xhtml code in my site, as the definition type is not xhtml, and it fails an accessibility check if any is present.

I have an article here that deals with how to set the html that is used when a user hits the carriage return. By doing this you can edit whether the fck editor uses 'P' tags, 'div' tags or 'br' tags. The only issues from here is that it uses xhtml breaks.


view plain print about
1<br />

It also changes the formatting of the last carriage return in the textarea to be browser specific in some instances. In this case firefox. You can edit each config.js file (there is one per browser and version) in your fck server directory, or you could intercept the request and clean it, which is what I've done.

view plain print about
1<cffunction name="cleanString" access="public" output="true" returntype="string" hint="Cleans the string that is sent in, IE removes or alters evil string fragments">
3<cfargument name="strToClean" type="string" required="true" hint="this is the string to clean">
5<cfset var cleanedString = arguments.strToClean>
6<cfset var listIndex = "">
7<cfset var replacementString = '<br/>,<br />,<br type="_moz" />'>

9<cfdump var="#cleanedString#" label="before">
11<cfloop list="#replacementString#" index="listIndex">
12<cfset cleanedString = replaceNoCase(cleanedString, listIndex, '<br>','all')>
15<cfdump var="#cleanedString#" label="after">
17<cfreturn cleanedString>

This function accepts a string, and loops through a list, replacing each value with a non xhtml 'br' tag. The output changes as per below.

view plain print about
1first line<br /> <br /> second line<br /> <br /> <br type="_moz" />
2first line<br> <br> second line<br> <br> <br>

I'd rather do this at a server level but there doesn't seem to be a straightforward way of doing it.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
rolex replica's Gravatar It is probably a good idea to also do a little digging and find out everything you can about the company that is selling you the product. Check the contact information; verify client feedback and the time that the company has been around.
# Posted By rolex replica | 22/12/2015 22:58
Alexander Warren's Gravatar To clarify 'supported browsers' I mean almost everything post Internet Explorer 6. I totally agree with the 'kill IE 6' campaign and unless someone makes a serious case as to why I should, I do not support it anymore. I've come around to thinking that it is ok now to point people towards upgrading their browser as they will have a poor experience using legacy browsers.
# Posted By Alexander Warren | 21/07/2016 11:28
Jessica Ellis's Gravatar I disagree. I firmly believe that with a good understanding of the structure of CSS elements and how they interact with each other you can develop a completely cross-browser non JavaScript baseline template. This article explains how I have approached creating a HTML 5 layout file, that works across legacy browsers just as well as the more modern interpreters.
# Posted By Jessica Ellis | 21/07/2016 11:30
Back to top