Creating custom datatypes using the umbraco usercontrol wrapper

本篇文章介绍的是基于UmbracoCMS技术搭建的网站所使用的相关技术。

1.      需求

Umbraco CMS的dataType中有richTexhEditor控件，但是它不是太完善，比如没有对字体进行大小颜色等设置，所以需要对此控件进行替换，用一个功能更加完善一些的控件，从网上找到了一个第三方控件叫fckEditor，就是文本编辑器。

2.      添加步骤

1.            首先创建一个usercontrol，代码如下：

RichTextEditorControl.ascx

<%@ ControlLanguage="C#" AutoEventWireup="true"CodeFile="RichTextEditorControl.ascx.cs"

Inherits="UserControls_RichTextEditorControl" %>

<%@ RegisterAssembly="CKEditor.NET" Namespace="CKEditor.NET"TagPrefix="CKEditor" %>

<CKEditor:CKEditorControlID="CKEditor1" BasePath="~/ckeditor"runat="server" Height="450"

Width="590"></CKEditor:CKEditorControl>

RichTextEditorControl.ascx.cs

using System;

usingSystem.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

usingSystem.Web.UI.WebControls;

public partial classUserControls_RichTextEditorControl :System.Web.UI.UserControl,umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor

{

public string m_UmbracoValue;

protected void Page_Load(object sender,EventArgs e)

{

if (Page.IsPostBack)

{

m_UmbracoValue = CKEditor1.Text;

}

CKEditor1.Text = m_UmbracoValue;

//设置fckEditor的工具栏选项

CKEditor1.config.toolbar = new object[]

{

new object[] {"Source", "-", "NewPage", "Preview","-", "Templates" },

new object[] {"Cut", "Copy", "Paste", "PasteText","PasteFromWord"},

new object[] {"Undo", "Redo", "-", "Find", "Replace","-", "SelectAll", "RemoveFormat" },

"/",

new object[] {"NumberedList", "BulletedList", "-","Outdent", "Indent", "Blockquote"},

new object[] {"JustifyLeft", "JustifyCenter", "JustifyRight","JustifyBlock" },

new object[] {"Link", "Unlink", "Anchor" },

new object[] {"Image", "Table", "HorizontalRule","SpecialChar", "PageBreak", "Iframe" },

"/",

new object[] {"Bold", "Italic", "Underline"},

new object[] {"Styles", "Format", "Font", "FontSize"},

new object[] {"TextColor", "BGColor" }

};

}

public object value

{

get

{

returnm_UmbracoValue;

}

set

{

m_UmbracoValue = value.ToString();

}

}

}

2.            Xslt代码：

登录Umbraco后台选择Develeoper页签，创建一个DataType。

然后在renderControl中选择umbraco usercontrol wrapper并保存。

然后可以看到usercontrol的选择框，即选择我们创建的usercontrol即可。

到此为止我们就创建成功一个datatype，在Settings也页签中的Document type中就可以选择该DataType了。