Fixing FCKeditor To Work With BlogCFC, And Vice-Versa
In a previous article, we had configured FCKeditor to work with BlogCFC. After a couple of posts, however, we realized that FCKeditor was having problems with both "tags" we could use: <more/> and <code></code>. When switching from WYSIWYG to Source mode, FCKeditor would break all of our formatting, breaking the <more/> tag and destroying the <code> tag and it's content. After a little googling, here is what I was able to put together.
To achieve a workable result, the first thing we have to do is to obfuscate our tags. We want to maintain the functionality of our <more/> and <code> tags, but we don't want FCKeditor to think they're HTML tags. To do so, we simply replace the chevrons ( < > ) with square brackets ( [ ] ).
This is what people see when they click to read more!
If we want to get this to work, however, we first have to make a few changes to how BlogCFC saves and retrieves entries for editing. Open up /admin/entry.cfm, and towards line 17 you should find this line:
Change it to this:
This change makes sure that we send the bracketed version for editing and to FCKeditor. The next step is making sure BlogCFC recognizes the new format and saves our post accordingly. Towards line 156, make the following change:
Becomes:
Now BlogCFC recognizes our modified more tag and can react accordingly. Next we'll need to make similar changes for the code tag. Always in the entry.cfm file, add this at line 19 right before all those cfparams:
Again we ensure that FCKeditor gets a bracketed tag. We need to make sure we convert it back to chevrons before saving it to the database. Towards line 150 (right after the smart quote fix) add this line:
With this line added BlogCFC is ready to work with our new changes. However, we now want to make sure that FCKeditor will not break the text within code tags. To do so, we'll use FCKeditor's ProtectedSource object, and it's Add method:
And that's all there is to it! Enjoy your unbroken FCKeditor implementation 
.
I lik-a do da cha-cha.
It's like the FCKeditor needs to refresh after the insert. Below is the function in camdens code that works, but not until I refresh the page and BlogCFC pulls the stored textarea value from the cookie (which is actually there in case the browser crashes mid-post).
function newImage(str) {
var imgstr = '<img src="/img/blog/' + str + '">';
var textbox = Spry.$("body");
textbox.value = textbox.value + '\n' + imgstr;
}
I haven't had the chance to play with those links, so I haven't tested this. Try modifying Ray's function with this:
function newImage(str) {
var imgstr = '<img src="/img/blog/' + str + '">';
var textbox = Spry.$("body");
textbox.value = textbox.value + '\n' + imgstr;
// add these 2 lines
var oEditor = FCKeditorAPI.GetInstance('InstanceName');
oEditor.InsertElement(imgstr);
}
In theory, this should retrieve the editor's instance and insert the IMG element at the cursor's position, without affecting Ray's working code.
Let me know if this works out.
hth
I got the [more] tag to work, but still cannot get the [code] tag to work - it displays <cfoutput>#variable#</cfouput>
You want to find the line in entry.cfm where it calls the textarea custom tag. Here's what Scott P posted on the original article:
begin quote
change line 302 of entry.cfm
<cfmodule template="../tags/textarea.cfm" fieldname="body" value="#htmlEditFormat(form.body)#" class="txtArea">
Take out the htmlEditFormat(form.body) and just use form.body.
The line numbers maybe off since this is old but it should get you close.
/quote
Unfortunately, the below produces this error:
String contains an invalid character" code: "5
function newImage(str) {
var imgstr = '<img src="/img/blog/' + str + '">';
var textbox = Spry.$("body");
textbox.value = textbox.value + '\n' + imgstr;
var oEditor = FCKeditorAPI.GetInstance('body');
oEditor.InsertElement(imgstr);
}
I found the cause for the trouble. Replace the InsertElement method with InsertHtml, like so:
function newImage(str) {
var imgstr = '<img src="/img/blog/' + str + '">';
var textbox = Spry.$("body");
textbox.value = textbox.value + '\n' + imgstr;
var oEditor = FCKeditorAPI.GetInstance('body');
oEditor.InsertHtml(imgstr);
}
I've tested it on my end and it works, let me know if it solves the problem on your side.
On to the next stage of BlogCFC customization!
p.s. I'm using blog CFC integrated into another application. I've basically changed everything from application.x to application.blog.x or application.blog.theBlog.getX()
I've integrated the admin part into the existing application admin and have all the blog code stored elsewhere. It works pretty nicely this way. Admin and the blog share the base code which is stored above wwwroot.
I'm doing the same thing with Galleon.