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 .


  • Not sure what you're trying to achieve, but you cannot create page properties dynamically -  the properties must be part of the definition (the page type.).
    See also thread:
    http://www.episerverworld.com/Forum/Pages/Thread.aspx?id=16032&epslanguage=en

  • I want the users to create new pages without using the edit mode. There is an interface developed to accept the content entered in the WYSIWYG Editor and publish them on the site.

    Can you tell me how it needs to be done in CMS5.

  • Hi!

    The easiest way to get an editor on the page is to add a property web control. The control needs to be fed with a PropertyData object. This could be done either by setting the PropertyName-Property on the Property web control or by setting the InnerProperty-Property in code behind. For the first alternative you need to have a longstring property with the name on the actual page you are on.

    The editor in EPiServer CMS 5 has some dependancies to the ui. This means that some files in the ui need to be made public in order to have the entire editor working if the current user does not have access to the ui-folder. As far as I know you need to open up the javascript and editor/dialogs folder if you want the entire editor with all functionality. We also have some required javascript includes which are not loaded by the editor that you need to load by yourself (This is a bug that has been fixed in the SP2 release). These are the system.js, system.aspx and episerverscriptmanager.js located in the ui/javascript folder.

    Regards
    Linus Ekström
    EPiServer Development Team

  • Content is edited

    Anyone got this working. I added the javascripts manually but I get javascript error "EPi.Dialog is null or not an object"

    I'm logged in as administrator...

  • Hi again!

    First some background info:
    In the major refactoring from EPiServer CMS 4 and EPiServer CMS 5 we integrated the editor more tightly with the UI. There were two major changes that affects how the editor can be used outside the UI. One was to move many files into the "ui" folder that is normally protected by path access rights in the web.config file. The other was to rewrite how popups are handled to enable support for other web browswers than IE.

    With this in consideration, the editor in EPiServer CMS 5 is written to work when having access to the ui folder. It's possible to get it working by allowing access to certain parts of the UI as described in the section below. We have also had some bugs where we did not take into consideration that the editor could work outside the normal editor environment but these have been fixed to the SP2 release.

    Here is a more detailed walk through of how to get the editor working outside the UI:

    1. Enable edit mode for the property:
    2. Register the needed javascript includes for the editor (here in the code behind file) :
      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("episerverscriptmanager/system.js"));
    3. Add a css class in your style sheet for the cover dialog that is used for popups:
      /*
      EPi.Dialog cover class
      */
      iframe.epidialogcoverframe
      {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
          border: 0;
          background-color: transparent;
          z-index: 10000;
          display: none;
      }
    4. Enable access for the required files in the UI for non-authorized users:

             
                 
                     
                 

             

         

         
             
                 
                     
                 

             

         

    Step 2 and 3 wont be needed in EPiServer CMS 5 SP2. Regarding the access to files in step 4 this enables most of the files needed but you still might have to give access to more files depending on what functionality you want to enable in the editor. For instance, the file dialog requires files from the /ui/edit/ folder.

    I hope that this information is enough to understand how the editor works and how to get it working in your sites.

    Regards
    Linus Ekström
    EPiServer Development Team

    ps. I know that it's a bit strange that we have some properties that does not work out of the box when setting edit mode to true and not having access to the UI-folder. These includes long strings, datetime and page reference properties at the moment. We are aware of thisproblem and have a long time plan that all properties should work without any dependancies to the UI. ds.

  • Hello Linus!

    Thank you very much, your solution is very helpful! I hope next release of EPiServer will allow us to use editor much easier... Cool

  • This worked! Thank you Cool
  • 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());

  • 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

  • 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 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.

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

    Grady

  • 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

  • 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.

  • 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

  • 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 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

    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.

  • 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?

  • 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 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

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

First   1   Last