Using EpiServer 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

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: <EPiServer:Property PropertyName="MainBody" EnableViewState="false" runat="server" EditMode="true" />
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:
   <location path="[YourUIPath]/javascript">
           <system.web>
               <authorization>
                   <allow users="*" />
               </authorization>
           </system.web>
       </location>
       <location path="[YourUIPath]/editor/dialogs">
           <system.web>
               <authorization>
                   <allow users="*" />
               </authorization>
           </system.web>
       </location>

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

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

<episerver:property id="Body" editmode="true" enableviewstate="false" runat="server" />

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head1" runat="server">
    <title>Edit page</title>
 <style type="text/css">
  /*
  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;
  }
    </style>
</head>
<body>
    <form runat="server" id="form1">
  <asp:HiddenField ID="hfPageId" runat="server" />
    <div>
  <asp:TextBox runat="server" ID="txtHeading"></asp:TextBox><br />
  <EPiServer:Property DisplayMissingMessage="false" id="ctlHtmlEditor" Width="300" height="400" EditMode="true" runat="server" />
  <br />
  <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" Width="83px" /></div>
    </form>
</body>
</html>

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