Using EpiServer Editor in CMS5

In 4.6 I used the EPiServer editor in view mode by using the code below. After migrating the code to CMS5, the editor is not appearing.  

override protected void OnInit(EventArgs e)
        {
 PropertyLongString editor = new PropertyLongString();
 editor.EditorSettings = Configuration.HasEditAccess ? EPiServer.SystemControls.EditorOption.All ^ EPiServer.SystemControls.EditorOption.ToggleHtml : (EPiServer.SystemControls.EditorOption)0;
 this.CurrentPage.Property.Add(editor);
 }

Can anyone please share the code to use the Editor in CMS5 .


  • Content is edited

    I've got a problem with updating the editor value after a postback. 

    What I wan't to do is give the user a list of pages to edit and when clicking an edit link a postback is performed and the pagereference is sent.

    I can get the pagereference ok, get the page but I can't get the editor to display the content.

    The edior is placed in a usercontrol and the code populating the editor is done in the usercontrols oninit event. It works if I set a hardcoded value the first time oninit is runt but changeing the value also in oninit but on a postback doesn't work.

     

    I do it like this:

    Editor.InnerProperty = new PropertyLongString("new value");

  • I am trying to build a "quick post" function where the logged in user can quickly post a new post.
    The editor is popping up in a fancybox and the data from the fancybox is sent to webservice for process. BUT!
    I have a problem.

    Anyone knows how to get the value from the Editor via Javascript/Jquery.
    I have tried with the following:

                var iframeID = $('iframe').attr('ID');
                var blogName = document.getElementById("<%=NewPostName.ClientID %>");
                var blogBody = String($("#" + iframeID + "").contents().find("body").html());
                var f = document.getElementById(iframeID);
                alert(f.contentWindow.document.body.innerHTML);

     var iframeID = $('iframe').attr('ID'); //Get the iframeID 
     var bodyOfEditor = String($("#" + iframeID + "").contents().find("body").html());
     alert(bodyOfEditor);

    all I get is (via javascript alert)



    but if i via "firebug" (i'm using IE) right klick on the body and choose i copy innerHTML i get

    my input text

     

    HELP?!

     

  • Content is edited

    Content removed by user

    I am trying to build a "quick post" function where the logged in user can quickly post a new post.
    The editor is popping up in a fancybox and the data from the fancybox is sent to webservice for process. BUT!
    I have a problem.

    Anyone knows how to get the value from the Editor via Javascript/Jquery.
    I have tried with the following:

                var iframeID = $('iframe').attr('ID');
                var blogName = document.getElementById("<%=NewPostName.ClientID %>");
                var blogBody = String($("#" + iframeID + "").contents().find("body").html());
                var f = document.getElementById(iframeID);
                alert(f.contentWindow.document.body.innerHTML);

     var iframeID = $('iframe').attr('ID'); //Get the iframeID 
     var bodyOfEditor = String($("#" + iframeID + "").contents().find("body").html());
     alert(bodyOfEditor);

    all I get is (via javascript alert)



    but if i via "firebug" (i'm using IE) right klick on the body and choose i copy innerHTML i get

    my input text

     

    HELP?!

  • I'm trying to use a datetime property in CMS 5 R2 SP2 but run in to the missing javascript problem. By manually registering the scripts as described in Linus' post I can work around the problem, but that should not be needed for this version? I am adding the property controls dynamically, could that be a cause of the problem?

  • Hi

    I have the same  problem as Joakim Mahler writes about. The editor works great but to get the tollbox 'EditorToolOptions' to work requires that users have rights to [u]/edit. This means that they also have access to right-click menu, which is not desirable.

    Anybody know how to fix this.

  • Hi Amalnatch,

    I know that this post hasn't been touched from a long time but I was looking for the solution of this problem recently and I haven't found any.

     I finally managed to create one on my own so if anyone is interested in it see here:

     http://marekmusielak.blogspot.com/2009/03/episerver-rich-text-editor.html

    It uses some concepts from this post and has working source code attached.

  • Hi Toan-Hang,

    Could you check in your "Permissions for Functions" and see that you aren't a member of any groups added in the "All functions available in the Editor".

     

  • Hi everyone!

    I've managed to get the editor working by using the suggested solution

    The aspx page



        Edit page
     


       
      
       

      

      
      

      

       

    and in the code behind page

      protected override void OnInit(EventArgs e)
      {
       base.OnInit(e);
       if (!IsPostBack)
       {
        if (Request["epid"] != null)
        {
         int pageId = Convert.ToInt32(Request["epid"]);
         hfPageId.Value = pageId.ToString();
         PageData pd = DataFactory.Instance.GetPage(new PageReference(pageId));
         string mainBody = pd.Property["MainBody"].Value as string;
         string heading = pd.Property["Heading"].Value as string;
         // Set value from page data to the property controls
         txtHeading.Text = heading;
         PropertyLongString oEditor = new PropertyLongString(mainBody);
         oEditor.EditorToolOptions = EPiServer.Editor.EditorToolOption.All;
         ctlHtmlEditor.InnerProperty = oEditor;
         if (!Page.ClientScript.IsClientScriptIncludeRegistered("system.js"))
         {
          Page.ClientScript.RegisterClientScriptInclude("system.js", ((PageBase)Page).ResolveUrlFromUI("javascript/system.js"));
          Page.ClientScript.RegisterClientScriptInclude("system.aspx", ((PageBase)Page).ResolveUrlFromUI("javascript/system.aspx"));
          Page.ClientScript.RegisterClientScriptInclude("episerverscriptmanager.js", ((PageBase)Page).ResolveUrlFromUtil("javascript/EPiServerScriptManager.js"));
         }
        }
       }
      }
      protected void btnSave_Click(object sender, EventArgs e)
      {
       // Get the page
       int pageId = Convert.ToInt32(hfPageId.Value);
       PageData pdCurr = CurrentPage.CreateWritableClone();
       PageReference pl = new PageReference(pageId);
       PageData pd = DataFactory.Instance.GetPage(pl);
       // Create a writable clone for editing
       PageData editedPd = pd.CreateWritableClone();
       // Get the new value of the properties
       string heading = txtHeading.Text;
       editedPd.Property["Heading"].Value = heading;
       string mainBody = pd.Property["MainBody"].Value as string;
       if (ctlHtmlEditor.PropertyValue != null)
       {
        mainBody = ctlHtmlEditor.PropertyValue as string;
       }
       else if (Request.Form[ctlHtmlEditor.ID + "$ctl00$" + ctlHtmlEditor.PropertyName] != null)
       {
        mainBody = Request.Form[ctlHtmlEditor.ID + "$ctl00$" + ctlHtmlEditor.PropertyName] as string;
       }
       // Save the new values to the page
       editedPd.Property["MainBody"].Value = mainBody;
       DataFactory.Instance.Save(editedPd, EPiServer.DataAccess.SaveAction.Publish, EPiServer.Security.AccessLevel.NoAccess);
       // Redirect back to display the page
       Response.Redirect(pd.LinkURL);
      }
     }

    But I can't control the editor tool options. It always show all tools despite the code I change the tool options, e.g.

    oEditor.EditorToolOptions = EPiServer.Editor.EditorToolOption.All ^ EPiServer.Editor.EditorToolOption.InsertImage ^ EPiServer.Editor.EditorToolOption.InsertDoc;

    Has anyone any idea to solve this?

    Toan-Hang

  • I got this working but editor always displays as textbox, only way I found to fix this is
    giving access rights to folder [ui]/edit, which will then show the right click menu
    for all these users :(

     Anybody know how to fix this.

  • Anytime I postback and try to get the value of the editor, the innerproperty is null. I can set the value of the editor via the innerproperty without any problems. Is there something I'm missing? Thanks!

    Grady

  • That did it. Thanks for your combined efforts Linus & Per!

    Grady

  • Hi Gary

    I can think of two reasons that the property is rendered as a textbox instead of an editor.

    1. You're viewing it in FireFox. Our html editor only support IE, so you'd get a textbox instead.

    2. Your PropertyLongString has no editor tools enabled. A long string without any tools will be rendered as a regular textbox. To fix that simply change the code in OnInit to:

    base.OnInit(e);
    PropertyLongString myLongString = new PropertyLongString(string.Empty);
    myLongString.EditorToolOptions = EditorToolOption.All;
    this.Body.InnerProperty = myLongString;

    Regards
    Per Gunsarfs
    EPiServer Development Team

    ps.
    Untested code, I might have missed something obvious ;)
    ds.

  • Thanks Linus. That got it to render without errors, but it renders as a normal textbox instead of html editor. Any suggestions? My code is below...

    protected override void OnInit(EventArgs e)
    {
    base.OnInit(e);
    this.Body.InnerProperty = new PropertyLongString(string.Empty);
    }

  • Hi Grady!

    The property web control needs a PropertyData object to load and save data to. Normally this is assigned by the control itself depending on one or several of the properties PropertyName, PageLink and PageLinkProperty. You can however, assign the property yourself by setting the property InnerProperty. This has to be done early in the page load process. Here is an example of how you can feed the editor with some default text:

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);

        MainBodyProperty.InnerProperty = new PropertyLongString("Edit me!");
    }

    I have removed the PropertyName property from the property web control and set the id for it to "MainBodyProperty".

    Regards
    Linus Ekström
    EPiServer Development Team

  • Content is edited

    I want to manually create a new page using the WYSIWYG Editor, but I don't think I can use the method explained because the property control requires propertyname. Of course when creating a new page I don't have a pagereference, therefore I don't have a propertyname. If you already explained this above could you please help me to better understand?

    Is there any way to get the following to work?
    placeholder.Controls.Add(new EPiServer.Editor.HtmlEditor());

First   1 2   Last