Creating custom datatypes using the umbraco usercontrol wrap

This article describes the technologies used to build websites based on UmbracoCMS.

1. Requirements
The richTexhEditor control is available in the dataType of Umbraco CMS, but it is not perfect. For example, the font size and color are not set. Therefore, you need to replace this control with a more functional control, A third-party control called fckEditor is found on the Internet, which is a text editor.

2. Add steps
1. Create a usercontrol with the following code:
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;

// Set toolbar options for 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 code:
Log on to the Umbraco background and select the develetypes tab to create a ype.

 

Select umbraco usercontrol wrapper in renderControl and save the settings.

Then we can see the selection box of usercontrol, that is, select the usercontrol we created.

 

So far, we have created a datatype. You can select this DataType in the Document type Tab Of the Settings tab.