Steps to upgrade tinyMCE?

Mar 1, 2009 at 3:46 AM
I tried upgrading my tinyMCE to the latest version by simply copying & pasting over the entire "tinyMCE" directory in my web directory however I'm experiencing a bunch of javascript errors.  Do I need to perform any updates to the dotnetblogengine code itself to accomodate the latest version of tinyMCE?  If so, what steps do I need to take? 

Thanks.

-Goalie35
Mar 13, 2009 at 2:17 AM
You want the good news or the bad news?  :)

BlogEngine works great with TinyMCE 3.x. You have two options, until the next release of BlogEngine. You can download the latest source code and run that (there are no guarantees, but I have version 1.4.5.14 running just fine at http://blog.cudjoebill.com) or you can install the latest TinyMCE into your "BlogEngine.Web/editors/tiny_mce3" directory and then edit your BlogEngine source files to point to the new location of TinyMCE (tiny_mce3). Doing a quick scan of the source files, you would need to change approx 77 lines of code in 37 files. I don't think you can just copy over the old directory, since the TinyMCE script files are looking for the the individual components in the new directory.

I chose to get the latest source code, backup my existing directory (just in case), and then copy the new code over to my existing directory structure. Of course, if you have made custom edits to the configs, themes, or any page code, you will need to manually merge your changes into the new files. I used WinMerge for that. Was it a little painful? Yes. Was it worth it? By all means.

I also chose to edit the "BlogEngine.Web/admin/tinyMCE.ascx" file. I wanted the extra formatting options available with TinyMCE 3.x. I changed it

from:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="tinyMCE.ascx.cs" Inherits="admin_tinyMCE" %>
<%@ Import Namespace="BlogEngine.Core" %>

<script type="text/javascript" src="<%=Utils.RelativeWebRoot %>editors/tiny_mce3/tiny_mce.js"></script>
<script type="text/javascript">
 tinyMCE.init({
  // General options
  mode: "exact",
  elements : "<%=txtContent.ClientID %>",
  theme: "advanced",
  plugins : "inlinepopups,fullscreen,contextmenu,cleanup,emotions,table,iespell,advlink",
  convert_urls: false,
  
   // Theme options
  theme_advanced_buttons1: "fullscreen,code,|,cut,copy,paste,|,undo,redo,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent,|,iespell,link,unlink,sub,sup,removeformat,cleanup,charmap,emotions,|,formatselect,fontselect,fontsizeselect",
  theme_advanced_buttons2: "",
  theme_advanced_toolbar_location: "top",
  theme_advanced_toolbar_align: "left",
  theme_advanced_statusbar_location: "bottom",
  theme_advanced_resizing: true,
  
  tab_focus : ":prev,:next"
 });
</script>

<asp:TextBox runat="Server" ID="txtContent" CssClass="post" Width="100%" Height="250px" TextMode="MultiLine" />

to:

%@ Control Language="C#" AutoEventWireup="true" CodeFile="tinyMCE.ascx.cs" Inherits="admin_tinyMCE" %>
<%@ Import Namespace="BlogEngine.Core" %>

<script type="text/javascript" src="<%=Utils.RelativeWebRoot %>editors/tiny_mce3/tiny_mce.js"></script>
<script type="text/javascript">
 tinyMCE.init({
  // General options
  mode : "exact",
  elements : "<%=txtContent.ClientID %>",
  theme : "advanced",
  plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
  convert_urls: false,
  
  // Theme options
  theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
  theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
  theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
  theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_resizing : true,

  tab_focus : ":prev,:next"  
   
 });
</script>

<asp:TextBox runat="Server" ID="txtContent" CssClass="post" Width="100%" Height="250px" TextMode="MultiLine" />

This gives me the extra formatting buttons that I wanted when entering posts.

I HAVE NOT FULLY DEBUGGED THIS. But so far, so good.

CudjoeBill