Musielak Marek

Posted on Thursday, March 12, 2009 by Marek Musielak

EPiServer rich text editor

PropertyLongString and XHTML String are probably the most frequently used types of properties in all EPiServer sites. They are used on nearly all content pages. However I wanted to use the editor control on the standard aspx page. I thought it would be really easy - just put HtmlEditor control on my page and voila. It was a little bit more complex but finally I managed to do what I needed.


Lets start with an aspx page. What we need to do is to put <EPiServer:Property /> on the page and set EditMode attribute to true. I set Width and Height attributes as well but this is optional. Remember not to forget about setting runat="server" property. I also put message panel and button on the page so I can show how to access the text put into the wysiwyg editor. Here is my aspx page:

<%@ Page Language="C#" AutoEventWireup="True" CodeBehind="HtmlEditorPage.aspx.cs" Inherits="MyProject.HtmlEditorPage" %>
<!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 runat="server">
<title>Html Editor Page</title>
<link rel="stylesheet" type="text/css" href="/App_Themes/Default/Styles/system.css" />
</head>
<body>
<form runat="server" method="post">
<asp:Panel ID="pnlMessage" runat="server" Visible="false" CssClass="EP-systemMessage">
<asp:Literal ID="litMessage" runat="server" />
</asp:Panel>
<EPiServer:Property id="myHtmlEditor" Width="500" height="350" EditMode="true" runat="server" />
<asp:Button ID="btnSend" runat="server" Text="Send" OnClick="btnSend_Click" />
</form>
</body>
</html>


Now it's time to write something in code behind. First we need to register scripts that are required by the editor. I used ResolveUrlFromUI and ResolveUrlFromUtil methods but if you know your UI and Util directories then you can put whole paths without using those methods. Now lets create new PropertyLongString. We can select chosen editor options for the property or just select EditorToolOption.All. If you don't want to use any of them you don't have to set it at all. Next set Name of your property and assign it to the InnerProperty of the editor. That's all .You have pretty HtmlEditor on your page.

The last thing is accessing the data from the editor. I tried several ways of accessing it but only one worked for me: retrieving content of the property by using value from Request.Form. If you know any smarter way, let me know. So here is code behind (source code can be downloaded from here: source code):

#region

using System;
using EPiServer;
using EPiServer.Core;
using EPiServer.Editor;

#endregion

namespace MyProject
{
public partial class HtmlEditorPage : SimplePage
{
protected override void OnInit(EventArgs e)
{
base.OnInit(e);

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

PropertyLongString longString = new PropertyLongString();

// select chosen options or use EditorToolOption.All
longString.EditorToolOptions = EditorToolOption.Bold | EditorToolOption.Italic | EditorToolOption.Underline;
longString.Name = "MyLongStringProperty";
myHtmlEditor.InnerProperty = longString;
}

protected void btnSend_Click(object sender, EventArgs e)
{
// yeah this is the only way of accessing what you put in the editor
litMessage.Text = Request.Form[myHtmlEditor.ID + "$ctl00$" + myHtmlEditor.PropertyName];
pnlMessage.Visible = true;
}
}
}


Shout it
Read More »

Related Posts:


11 Responses to EPiServer rich text editor

  1. Marek Musielak
    March 13, 2009 at 10:50 AM
    I just found out that you don't have to access the data from editor using Request.Form.

    You can use SetValuesForPropertyControl and then access PropertyValue directly:

    protected void btnSend_Click(object sender, EventArgs e)
    {
    SetValuesForPropertyControls(myHtmlEditor);
    litMessage.Text = myHtmlEditor.PropertyValue as string;
    pnlMessage.Visible = true;
    }
  2. Anonymous
    March 25, 2009 at 10:12 AM
    Hi,

    Is this cross-browser compatible? If not you might want to consider some free 3rd parts like FCKEditor and TinyMCE.

    -Kjetil Simensen
  3. Marek Musielak
    March 25, 2009 at 12:00 PM
    Hi Kjetil,

    You're right. HtmlEditor used by the EPiServer is not cross-browser compatible atm. What I needed was to use it for editors and they are using IE anyway.

    However, if you need to allow to use rich text editors in all browsers then you surely need to use some 3rd party editor.
  4. Anonymous
    May 12, 2009 at 12:48 PM
    Do you know if you can set a default folder for the image button?
  5. Anonymous
    May 13, 2009 at 11:13 AM
    How do you load content in the editor on a button click?

    // Daniel
  6. Marek Musielak
    May 13, 2009 at 12:20 PM
    @Daniel

    I saw your post on EPiServer forum so if I understand correctly you need to fill html editor with the content depending on the option from dropdownlist.

    Here you can find source code with filling the editor
    source
  7. Anonymous
    May 13, 2009 at 2:10 PM
    Thank you Marek.

    It worked just like I wanted it to

    // Daniel
  8. sulumits retsambew
    July 2, 2009 at 10:28 AM
    your article is very good nice post thank you, keep posting
  9. Anonymous
    December 14, 2009 at 11:17 AM
    Hi

    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.
  10. Anonymous
    February 10, 2011 at 5:11 PM
    The link to the source for filling the editor is broken.

    I can set the initial value but after a postback I fail to update it with a new value.

    /Per
  11. Marek Musielak
    February 10, 2011 at 5:47 PM
    Hi Per,

    The link should work now.

Post a Comment