TinyMCE error after upgrading to Umbraco 6

Question

I just upgraded from Umbraco 4.7.1 to 6.1.6

I have a TinyMCE control in my custom section. It stopped working after the upgrade.
Here is part of my code for the page in the custom section:

public partial class MyCustomPage : UmbracoEnsuredPage
{
  private TinyMCE txtLongDesc;

  protected UmbracoPanel UmbPanel { get { return Web.FindControlRecursive(Master, "umpContent") as UmbracoPanel; } }

  protected override void Page_Init(object sender, EventArgs e)
  {
    base.Page_Init(sender, e);

    PutTinyMce(ref txtLongDesc, "txtLongDesc", phLongDesc, UmbPanel);
  }

  public static void PutTinyMce(ref TinyMCE control, string controlId, PlaceHolder placeHolder, UmbracoPanel panel)
  {
    DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(2710); // My custom TinyMCE DataType

    control = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
    control.ID = controlId;
    placeHolder.Controls.Add(control);
    panel.Menu.NewElement("div", "umbTinymceMenu_" + control.ClientID, "tinymceMenuBar", 0); // Add TinyMCE controls to menu bar
  }
}

When the page is rendered, the textarea is hidden, but the TinyMCE is not shown.
This is the JavaScript error I got:

TypeError: document.getElementById(...) is null @ .../umbraco/plugins/tinymce3/tinymce3tinymceCompress.aspx?rnd=00000000-0000-0000-0000-000000000000&module=gzipmodule&themes=umbraco&plugins=contextmenu,umbracoimg,paste,inlinepopups,table,umbracocss,advlink,umbracoembed,spellchecker,noneditable,umbracomacro,umbracopaste,umbracolink,umbracocontextmenu&languages=en:19803

This is the line causing the error (line 19803)

document.getElementById(ed.getParam("umbraco_toolbar_id", "*")).appendChild(c);

Has anyone experienced this problem? Any idea how to fix it?

Aximili Aximili · Accepted Answer · 2013-11-08T01:58:19

After fiddling with it, I managed to fix it, although I don't really understand why.

Apparently in Umbraco 6.1.6 you have to add umbraco_toolbar_id manually, so I added these 2 lines

control.ClientIDMode = ClientIDMode.Static;
control.config.Add("umbraco_toolbar_id", "umbTinymceMenu_" + control.ClientID);

to this function, which becomes

public static void PutTinyMce(ref TinyMCE control, string controlId, PlaceHolder placeHolder, UmbracoPanel panel)
{
  DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(Static.DTD_ID_SMALL_RTE); // Custom TinyMCE DataType

  control = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
  control.ID = controlId;
  control.ClientIDMode = ClientIDMode.Static;
  control.config.Add("umbraco_toolbar_id", "umbTinymceMenu_" + control.ClientID);
  placeHolder.Controls.Add(control);
  panel.Menu.NewElement("div", "umbTinymceMenu_" + control.ClientID, "tinymceMenuBar", 0); // Add TinyMCE controls to menu bar
}

That fixed it. My TinyMCE appears again :)

TinyMCE error after upgrading to Umbraco 6

1 Answers