Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Árni Gunnar Ragnarsson 31 posts 51 karma points
    Feb 24, 2011 @ 21:52
    Árni Gunnar Ragnarsson
    0

    Using tinyMCE in custom section

    Hi all.

    I am creating a custom section in Umbraco 4.6.1, where I need to use the tinyMCE editor for some content. I have searched this forum like crazy, but not found anything useful.

    TabPage tab = ItemTabView.NewTabPage("Content");
    
    tab.Menu.NewElement("div""tinymce_toolbar""tiny-mce", 0);
    DataTypeDefinition dataTypeDefinition = DataTypeDefinition.GetDataTypeDefinition(-87);
    umbraco.editorControls.tinyMCE3.TinyMCE editor = (umbraco.editorControls.tinyMCE3.TinyMCE)dataTypeDefinition.DataType.DataEditor;
    if (editor.config["umbraco_toolbar_id"] != null) {
    editor.config.Remove("umbraco_toolbar_id");
    }
    editor.config.Add("umbraco_toolbar_id""tinymce_toolbar");
    tab.Controls.Add(editor);

    The error I am getting is this:

    document.getElementById(ed.getParam("umbraco_toolbar_id", "*")) is null
    document.getElementByI...o_toolbar_id", "*")).appendChild(c);

    Any of you guys and gals have any idea what is going on ?

  • Árni Gunnar Ragnarsson 31 posts 51 karma points
    Mar 08, 2011 @ 14:09
    Árni Gunnar Ragnarsson
    0

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

  • Gary Prothero 14 posts 34 karma points
    Apr 07, 2011 @ 21:22
    Gary Prothero
    0

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

  • Árni Gunnar Ragnarsson 31 posts 51 karma points
    Apr 08, 2011 @ 11:28
    Árni Gunnar Ragnarsson
    0

    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.

  • Dimitris Chrysomallis 23 posts 137 karma points
    Jun 10, 2011 @ 13:40
    Dimitris Chrysomallis
    0

    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?

  • Zac 39 posts 61 karma points
    Jul 19, 2011 @ 20:14
    Zac
    0

    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.

  • Jigs 40 posts 63 karma points
    Sep 01, 2011 @ 08:00
    Jigs
    1

    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);

            }

     

     

  • Markus Johansson 1808 posts 5375 karma points c-trib
    Sep 21, 2011 @ 08:26
    Markus Johansson
    0

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

  • Jigs 40 posts 63 karma points
    Sep 21, 2011 @ 08:34
    Jigs
    0

    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

  • Markus Johansson 1808 posts 5375 karma points c-trib
    Sep 22, 2011 @ 07:23
    Markus Johansson
    0

    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);


     

  • Jigs 40 posts 63 karma points
    Sep 22, 2011 @ 07:45
    Jigs
    0

    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

     

  • Aximili 177 posts 278 karma points
    Oct 04, 2011 @ 08:04
    Aximili
    0

    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.

  • Robert Hughes 87 posts 110 karma points
    Dec 13, 2011 @ 00:22
    Robert Hughes
    0

    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,

     

  • Jigs 40 posts 63 karma points
    Dec 13, 2011 @ 00:33
    Jigs
    0

    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

  • Robert Hughes 87 posts 110 karma points
    Dec 13, 2011 @ 01:33
    Robert Hughes
    0

    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

     

     

     

  • Jigs 40 posts 63 karma points
    Dec 13, 2011 @ 02:15
    Jigs
    0

    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

  • Robert Hughes 87 posts 110 karma points
    Dec 13, 2011 @ 05:01
    Robert Hughes
    0

    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?

  • Jigs 40 posts 63 karma points
    Dec 13, 2011 @ 06:44
    Jigs
    0

    Hi Robert,

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

    Cheers,

    Jigs

  • Robert Hughes 87 posts 110 karma points
    Dec 14, 2011 @ 01:10
    Robert Hughes
    0

    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.

  • Jeroen Breuer 4902 posts 12234 karma points MVP 3x admin c-trib
    Oct 17, 2012 @ 15:22
  • Aximili 177 posts 278 karma points
    Nov 08, 2013 @ 03:19
    Aximili
    1

    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

Please Sign in or register to post replies

Write your reply to:

Draft