Cognifide Blog
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;
}
}
}
March 13, 2009 at 10:50 AM
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;
}
March 25, 2009 at 10:12 AM
Is this cross-browser compatible? If not you might want to consider some free 3rd parts like FCKEditor and TinyMCE.
-Kjetil Simensen
March 25, 2009 at 12:00 PM
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.
May 12, 2009 at 12:48 PM
May 13, 2009 at 11:13 AM
// Daniel
May 13, 2009 at 12:20 PM
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
May 13, 2009 at 2:10 PM
It worked just like I wanted it to
// Daniel
July 2, 2009 at 10:28 AM
December 14, 2009 at 11:17 AM
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.
February 10, 2011 at 5:11 PM
I can set the initial value but after a postback I fail to update it with a new value.
/Per
February 10, 2011 at 5:47 PM
The link should work now.