Sorry for the bump ... but I really need some answers or suggestions on another solution ...

We are getting the same error you described in our custom section.  Did you ever figure this out?

Sadly, no. I then decided to base the system I was developing on the Document Types and nodes in the Umbraco system. That way I could use the Richtext editor without problems.

We have managed to use the control. But now we need to inherit the configuration from tinyMceConfig.config and also position the toolbar on top, as in the other umbraco sections.

We register the control like so:

<%@ Register TagPrefix="umb" Namespace="umbraco.editorControls.tinyMCE3.webcontrol" Assembly="umbraco.editorControls" %>

and then use it like this:

<umb:TinyMCEWebControl runat="server" id="rtxtJobDescription" 
            CssClass="guiInputText guiInputStandardSize" Width="480"  />

Has anyone figured out how to do that?

I just came accross this isse as well. If it is happening to you when using blog4umbraco, check out my answer on this post.

The problem is that umbraco_toolbar_id is always being set during the Load event of the TinyMCE control. So it is adding it after you add your ID and you get two ID's which for me looked like this: body_dashboardTabs_tab01layer_menu_sl,umbTinymceMenu_body_ctl00_bodyText (note the comma seperating the two).

Two solutions:

1. Don't add the umbraco_toolbar_id, just put a div on the page with the ID that is being set, this should be something similar to:
   <div id ="umbTinymceMenu_body_ctl00_bodyText" /> (You will need to use firebug to work out the ID)
2. Make sure you are adding the umbraco_toolbar_id after the load event of the tinyMCE control. I couldn't actually work out how to do this - I tried using different events and a few other things but no joy.

Hope that helps.

Hi there,

I had the same problem in my custom section ,,, but at the end i will figure out how to use it in my custom section ....

i have three TAB in my edit page and i try to use both Webcontrol TinyMCE and plain TinyMCE in the tab 2 and tab 3 respectively....

Here is the code for the front End : aspx page

<%@ Page Language="C#"  MasterPageFile="../masterpages/umbracoPage.Master" AutoEventWireup="true" CodeBehind="editEnta_node.aspx.cs" Inherits="Enta_Node.editEnta_node" %>

<%@ Register Namespace="umbraco.uicontrols" Assembly="controls" TagPrefix="umb" %>
<%@ Register Assembly="umbraco.editorControls" namespace="umbraco.editorControls.tinyMCE3.webcontrol" tagprefix="cc4" %>



<asp:Content ID="Content" ContentPlaceHolderID="body" runat="server">

  <umb:TabView ID="Tab" runat="server" Height="400" Width="400" />  
    
        <umb:Pane ID="Pane1" runat="server">
        
            <umb:PropertyPanel ID="PPanel1" runat="server" Text="Event Name">
                <asp:TextBox ID="txtnodename" runat="server" MaxLength="150"
                CssClass="guiInputText guiInputStandardSize"></asp:TextBox>
            </umb:PropertyPanel>
            
            <umb:PropertyPanel ID="PPanel2" runat="server" Text="Event Type">
                <asp:TextBox ID="txtnodetype" runat="server" MaxLength="150"
                CssClass="guiInputText guiInputStandardSize"></asp:TextBox>
            </umb:PropertyPanel>
            
            <umb:PropertyPanel ID="PPanel3" runat="server" Text="Event Description">
                <asp:TextBox ID="txtnodedescription" runat="server" TextMode="MultiLine"
                CssClass="guiInputText guiInputStandardSize"></asp:TextBox>
            </umb:PropertyPanel>
            
                       
                          
        </umb:Pane>
   
        <umb:Pane ID="Pane2" runat="server">
                <cc4:TinyMCEWebControl  ID="TinyMCEWebControl1" runat="server" Height="500" Width="600"></cc4:TinyMCEWebControl>
        </umb:Pane>

        <umb:Pane ID="Pane3" runat="server">                            
        </umb:Pane>
        
</asp:Content>

Back End Code to use TinyMCE : .CS file  Note : use the Page_init Function otherwise it wont work.

 private umbraco.editorControls.tinyMCE3.TinyMCE _tinymce = null;

protected void Page_Init(object sender, EventArgs e)
        {

            var FirstTab = Tab.NewTabPage("First");
            FirstTab.Controls.Add(Pane1);

            var SecondTab = Tab.NewTabPage("Second");
            SecondTab.Controls.Add(Pane2);                               

            var thirdTab = Tab.NewTabPage("Third TinyMCE");
            thirdTab.Controls.Add(Pane3);

            DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(-87);
            _tinymce = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
            _tinymce.ID = "T1";
            Pane3.Controls.Add(_tinymce);

            thirdTab.Menu.NewElement("div", "umbTinymceMenu_" + _tinymce.ClientID, "tinymceMenuBar", 0); // adds to menu bar

            ImageButton save = FirstTab.Menu.NewImageButton();
            save.ImageUrl = umbraco.GlobalSettings.Path + "/images/editor/save.gif";
            save.AlternateText = "Save";
            save.Click += new ImageClickEventHandler(save_Click);

            ImageButton save1 = SecondTab.Menu.NewImageButton();
            save1.ImageUrl = umbraco.GlobalSettings.Path + "/images/editor/save.gif";
            save1.AlternateText = "Save";
            save1.Click += new ImageClickEventHandler(save_Click);

            ImageButton save2 = thirdTab.Menu.NewImageButton();
            save2.ImageUrl = umbraco.GlobalSettings.Path + "/images/editor/save.gif";
            save2.AlternateText = "Save";
            save2.Click += new ImageClickEventHandler(save_Click);

        }

Did anyone find a solution to this? Jigs, is your code running well?

Hi Enkel,

my code is running smooth as highway ...... and i succsessfully added the tinyMCE in my third tab ......

If you have any problem ..... i can help .........

Cheers,

Jigs

Awesome Jigs!

Just want to share a tip. I added a new Richtext-DataType in the developer-section to be able to use special settings for TinyMCE in my custom section. Then I just changed this row and used the new datatype-id:

DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(newId);

Hi Enkel,

Thanks for the tip ...... I thought that before but it works for me old way ...

I just want plain MCE in my tab for add some content .... there is no special settings ....

anyway .... that code help someone ..... good

Cheers,

Jigs

I was struggling with this too. Thanks Jigs it helped me. What I needed was only a simple function. Here it is.

In .ascx file:

<asp:PlaceHolder ID="phLongDesc" runat="server"></asp:PlaceHolder>

In .cs file:

using umbraco.uicontrols;
using umbraco.editorControls.tinyMCE3;

  private TinyMCE txtLongDesc;

  protected void Page_Init(object sender, EventArgs e)
  {
    TabPage tabProducts = (TabPage)Web.FindControlRecursive(this.Page.Master, "dashboardTabs_tab01layer"); // The tab in Umbraco custom section
    PutTinyMce(ref txtLongDesc, "txtLongDesc", phLongDesc, tabProducts);
  }

  /// <summary>
  /// Adds/puts a TinyMCE control onto the page.
  /// </summary>
  /// <param name="control">The Umbraco TinyMCE control</param>
  /// <param name="controlId">Whatever you want to name it (eg. txtDescription)</param>
  /// <param name="placeHolder">The PlaceHolder control, in which you want to put this TinyMCE</param>
  /// <param name="tab">The Umbraco tab (custom section) in which menu bar you want to put the TinyMCE controls</param>
  private static void PutTinyMce(ref TinyMCE control, string controlId, PlaceHolder placeHolder, TabPage tab)
  {
    DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(-87); // TinyMCE DataType (could be your own datatype)

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

Hope it helps someone.

Hi everyone,

I have been pouring over this and another post on this issue and am no closer to using the Umbraco TinyMCE (with its associated media and macro pickers etc.) in my own custom control. I have tried a number of code snippets from here but they are all failing for me.

Can someone post the definitive answer to this - maybe a single ascx/cs that works and what version of Umbraco it works in.

I appreciate all this work but I feel this thread is not helping just yet.

cheers,

Hi Robert,

can you explain more, .... where you geting error .....or post error tarce here so someone can help you .....

As you mentioned ,,,, i already posted ascx/cs code in this post .......if you follow axactly .....i think it shoud work ...!!!

Hope it helps,

cheers,

jigs

Thanks Jigs - that was an amazingly quick reply.

I have added a custom aspx using the code you added and am getting something. I do get a mess when I select the the image insert icon however. (see below). 

\

cheers,

Robbert

Hi Robert,

Ok, .... that was the webcontrol of tinymce ...which is messy and not working well .... but if you carefully analyse the code ...

I added plain tinymce programetically in .CS file to tab- 3 ... which is the way to add tinymce programetically to the user control .....

in your ascx file .... just put

  <%@ Register Namespace="umbraco.uicontrols" Assembly="controls" TagPrefix="umb" %>

<asp:Content ID="Content" ContentPlaceHolderID="body" runat="server">

  <umb:TabView ID="Tab" runat="server" Height="400" Width="400" />  
       
        <umb:Pane ID="Pane3" runat="server">                            
        </umb:Pane>
        
</asp:Content>

and in your .CS file put this code....

private umbraco.editorControls.tinyMCE3.TinyMCE _tinymce = null;

protected void Page_Init(object sender, EventArgs e)
        {

            var thirdTab = Tab.NewTabPage("Third TinyMCE");
            thirdTab.Controls.Add(Pane3);

            DataTypeDefinition d = DataTypeDefinition.GetDataTypeDefinition(-87);
            _tinymce = (umbraco.editorControls.tinyMCE3.TinyMCE)d.DataType.DataEditor;
            _tinymce.ID = "T1";
            Pane3.Controls.Add(_tinymce);

            thirdTab.Menu.NewElement("div", "umbTinymceMenu_" + _tinymce.ClientID, "tinymceMenuBar", 0); // adds to menu bar
          
            ImageButton save2 = thirdTab.Menu.NewImageButton();
            save2.ImageUrl = umbraco.GlobalSettings.Path + "/images/editor/save.gif";
            save2.AlternateText = "Save";
            save2.Click += new ImageClickEventHandler(save_Click);

        }

Now the save_click event is the event handler for save image click event so you can write your code to save value of the tinymce to however you want ...!!!

Cheers,

Jigs

Sadly I have the same problem Jigs. With now just the one code-behind-loaded TinyMce I still have the broken image dialog with no sign of the media picker. Am I missing something on the page? Any more ideas?

Hi Robert,

if you can post your code here ,,, may be i will help you .....

Cheers,

Jigs

Actually - I just got it working -sort of. I did not have my page inside the Umbraco folder. As soon as I moved it there the media picker worked and the insert macro button appears. The only issue is the 'create new' option opens the node picker behind the current modal popup making it impossible to select.

I have a feeling there are too many dependencies to re-use this control which is sad because the ability to add and store html content outside the standard tree is quite useful.

Added another workaround here: http://our.umbraco.org/projects/collaboration/blog-4-umbraco/using-blog-4-umbraco/18559-TinyMCE-not-showing-up-on-Blog-dashboard-on-v470?p=0#comment128842.

Jeroen

After upgrading from 4.7.1 to 6.1.6, I got the same error (as what the OP posted). Googling about it, I came across this thread.

I have found the solution to my error so let me share it here, it may help someone
http://stackoverflow.com/questions/19826465/tinymce-error-after-upgrading-to-umbraco-6/19850274

is working on a reply...