Adding TinyMCE to blogCFC admin area

Posted At : 10 October 2006 11:39 | Posted By : quiksilv
Related Categories: BlogCFC, Coldfusion

It's quite easy to get the admin entries editor to use tinyMCE. All you have to do is edit the textArea.cfm file which is found in /blog/tags/.

Updating the editor page

Add this code to the textArea.cfm page (just beneith the output tag)

<cfsavecontent variable="request.tinyMCE">


<script language="javascript" type="text/javascript" src="#application.rooturl#/includes/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
   tinyMCE.init({
      mode : "textareas",
      theme : "advanced",
      plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen",
      theme_advanced_buttons1_add : "fontselect,fontsizeselect",
      theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
      theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
      theme_advanced_buttons3_add_before : "tablecontrols,separator",
      theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_statusbar_location : "bottom"
   });
</script>



</cfsavecontent>
<cfhtmlhead text="#request.tinyMCE#" />

As the tinyMCS javascript needs to be in the header of the page we save the JS content to a variable called request.tinyMCE using cfsavecontent - we then post this to the header of the page using coldfusions cfhtmlhead tag.

Setting up tinyMCE - As easy as 1,2,3

1. Create a folder called 'tinymce' in the /includes/ folder (/blog/includes/)
2. Copy the jscripts folder (from your tinyMCE download) into the includes folder so you should have this structure /blog/includes/tinymce/jscripts/
3. Test - go into your admin area, click add entry watch it load.

You can call this textArea.cfm from the page.cfm and textblock.cfm

Remember to brake out of the cfoutput when calling this module.

What is TinyMCE

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB.

Comments (26) |

Print |

Send |

del.icio.us |

Linking Blogs | Digg | 11099 Views

Related Blog Entries

Adding report abusive comments to blogCFC (11 October 2006)
Changes to more tag in blogCFC for rich text editors (10 October 2006)

Comments

[Add Comment]

Nice one mate. I was just asking Ray about this the other day.

ta.

# Posted By Critter | 10/10/06 13:03 | Report abusive comment

I've been using fckeditor for quite a while with blogCFC, but I haven't tried TinyMCE ... do you like it better? why?
Adding fckeditor is as easy or more, because there's no need for anything to be in the header. just add (hopefully I can insert scripts here):
<cfscript>
   fckEditor = createObject("component", "fckeditor.fckeditor");
   fckEditor.instanceName="body";
   fckEditor.toolbarSet="blog";
   fckEditor.basePath="#GetDirectoryFromPath(script_name)#fckeditor/";
   fckEditor.value=form.body;
   fckEditor.width="500";
   fckEditor.height="300";
   // ... additional parameters ...
   fckEditor.create(); // create instance now.\
</cfscript>

That's all.

# Posted By Rob Gonda | 10/10/06 14:28 | Report abusive comment

Hi Rob, to use a previous comment on my blog:

<blockquote>
TimyMCE is very easy to integrate into any code. It just replaces <TEXTAREA> tag with the WYSIWYG-editor with a few lines of code. So thers no need to rewrite the code at all.
</blockquote>

Okay so you have to add the tag to put it into the header - but if you use the WYSIWYG sitewide then this would save you some time. The example I have loads a lot of the extra features - you don't need then all which would make your code smaller.

Critter - I'm glad to help.

# Posted By Nick Tong | 10/10/06 14:36 | Report abusive comment

just tried it and it looks similar to fckeditor... not sure if it has connectors in all languages (especially cf) for file uploading, browsing server, and such... I like the fact it works of Safari.

# Posted By Rob Gonda | 10/10/06 15:14 | Report abusive comment

Hi there.

How did you handle the "<code>" within tinyMCE?

# Posted By RJung | 23/01/07 10:38 | Report abusive comment

Hi RJung, I've not changed how the "code" tag works as the client that i installed tinyMCE for didn't require it. Without looking at the details i guess you will need to make a in the admin/entry.cfm page. Take a look at the change i made for the "more" tag as it might help: http://www.succor.co.uk/index.cfm/2006/10/10/Chang...

# Posted By nick tong | 23/01/07 14:14 | Report abusive comment

Implementing this has apparently disable the ability to insert an image using the the BlogCFC insert image link. Did you have this problem and if so, how did you fix it?

Thanks for posting this.

# Posted By Steve Walker | 05/02/07 10:26 | Report abusive comment

Hi Steve - i didn't get the error. What's the exact error you are getting and i'll see if i can help.

# Posted By nick tong | 05/02/07 10:52 | Report abusive comment

Thanks for your assistance. It's not an error per say, it just doesn't work. You click the insert link and it acts normally, but doesn't insert the image path or the image.
I have tried IE7 and FF2, on XP and Vista.

# Posted By Steve Walker | 05/02/07 11:19 | Report abusive comment

Image upload & insert is not functioning for me also. I can upload the image, but the image never makes it
into the BODY field. Too bad the TinyMCE image function can't upload.

# Posted By Jeff Fongemie | 11/03/07 21:49 | Report abusive comment

Jeff, you're right. This is why I went with FCKeditor. You can use its image uploading/placement functionality since any rich-text editor will disable BlogCFC's image tools.

Unless TinyMCE has image features I'm not aware of?

# Posted By Ryan | 14/03/07 07:48 | Report abusive comment

It looks like there should be a way to get the images working with Blogcfc.

Blogcfc Rocks!

# Posted By Nate S. | 30/03/07 20:53 | Report abusive comment

I have integrated tinymce with BlogCFC for several sites and had no problems with uploading images. There was one quirk that if the BlogCFC's ini file has the blor url without www and I used www (control enter) automatically, then the upload function would not work at all.

Now, I have a problem with a SWF file. I embed it but when I save, the "object" code is not there. Not sure if this is tinymce or blogCFC doing.

# Posted By cyrill | 10/04/07 17:27 | Report abusive comment

HI cyrill,

I know it's not blogCFC as i have used flash on several blog posts. Check out this post, maybe you need the admin component for tinyMCE: http://forum.mamboserver.com/showthread.php?t=3711...

# Posted By nick tong | 10/04/07 18:33 | Report abusive comment

Thanks for creating this "How-to".

I am using the FCKeditor.

I am having a problem. I have FCKeditor running. However, when I post an entry, I am seeing the html converted out to extended characters. Thus "Testing" shows up as "<p>Testing</p>".

When I view source in FCKeditor, I see "<p> lt;p gt; Testing lt;/p gt; </p>". & character removed to keep from being viewed as html.

Any ideas on fixing this or what I might be doing wrong?

I am going to cross post this to see if others might have an idea also. Please forgive me if that is offensive to you...

Regards,

Josen

# Posted By Josen Ruiseco | 24/06/07 16:02 | Report abusive comment

Problem solved:

In fckeditor.cfc line 167 needs changing from:

input type="hidden" id="#this.instanceName#" name="#this.instanceName#" value="#HTMLEditFormat(this.value)#" style="display:none" /

to:

input type="hidden" id="#this.instanceName#" name="#this.instanceName#" value="#this.value#" style="display:none" /

# Posted By Josen Ruiseco | 24/06/07 16:56 | Report abusive comment

Hi. Thanks for the information. for the past few hours I've been playing with BlogCFC and succesfully implemented the tinymce. My problem now is because anything I had inside <code></code> tag got messed up. I tried to edit the htmlby hand no luck. Any suggestions in how to work this problem out? Thanks.

# Posted By Emanuel Costa | 12/07/07 18:19 | Report abusive comment

How about using this:
apply_source_formatting: true,
remove_linebreaks: false,

more info here: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/apply_source_formatting

# Posted By Nick Tong | 13/07/07 17:47 | Report abusive comment

I made a modification to BlogCFC to support {code} and {/code} tags in visual mode. Seems to work quite well, so might help. I couldn't get the source formatting option Nick posted above to work:

http://jamesallen.name/index.cfm/2007/11/19/Fixing...

# Posted By James Allen | 20/11/07 20:00 | Report abusive comment

Nick ... I have followed your demo but the editor does not show up ... when I load "Add Entry" ... the " body: " area is simply empty ... here is my code from the textarea.cfm page ...

<code>

<cfsetting enablecfoutputonly=true>
<cfprocessingdirective pageencoding="utf-8">





<cfparam name="attributes.fieldname">

<cfparam name="attributes.value" default="">

<cfparam name="attributes.class" default="">



<cfoutput>


<cfsavecontent variable="request.tinyMCE">


<script language="javascript" type="text/javascript" src="#application.rooturl#/includes/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});
</script>



</cfsavecontent>
<cfhtmlhead text="#request.tinyMCE#" />

<cfsetting enablecfoutputonly=false>

</cfoutput>

</code>

Can you tell me what the problem is?

# Posted By Edward | 29/02/08 20:47 | Report abusive comment

Nick sorry for the large code post ...

*** the editor does not show up ***

Solved

# Posted By Edward | 01/03/08 02:57 | Report abusive comment

Hi Edward, i like those fixes :)

# Posted By nick tong | 02/03/08 19:44 | Report abusive comment

When I use your code in textarea.cfm and make appropriate changes to page.cfm my page.cfm has two textarea boxes. The first box is the tinymce editor, the second is a regular textarea box.

The html generated contains two
<code>


<script language="javascript" type="text/javascript" src="http://john.stottlemire.com/includes/tinymce/jscri..."></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen",
width : "100%",
height : "500",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom"
});
</script>


</code>

and also contains two
<code>
<textarea name="body" id="body" class="txtArea"></textarea>
</code>

I've examined the page.cfm and textarea.cfm pages and cannot figure out why this happens.

The code works fine for adding new entries to the blog.

Any ideas why this may be happening?

-john

# Posted By John Stottlemire | 22/03/08 21:57 | Report abusive comment

@Nick
"I Like Those Fixes ... "

Sorry, I had left out a comma in the JS code ... that was all ...

However, I solved that problem only for but a short period later, have another develop ... The <code> tag issue ...

I have gone through the moxie wiki, and there are numerous references regarding the addition of the <a href="http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/extended_valid_elements">"extended_advanced_elements" </a> options in the tinyMCE init() function as such ...

tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen",
width : "100%",
height : "500",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
<strong>extended_valid_elements </strong>: "code[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
+"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
+"|title]",
});

Yet, that still did not provide the solution ...

Another matter apart from the <code> tag matter, is of a default text size ...

In the documentation, there is a reference to <a href="http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_font_sizes">Advanced font sizes </a> but all the solutions I have tried have not worked ...

The documentation is not too easy to navigate either ...the examples are not all that helpful.

Moreover, the forum support is not what you might call, inviting.

Again, sorry for not posting the resolution, in essence ~ I haven't found that the editor is practical enough to merit using, and I may try to use FCK Editor ... If that fails, hell with it ... I 'll hand code my posts, or simply use Live Writer ...

# Posted By Edward Beckett | 23/04/08 05:31 | Report abusive comment