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