本篇文章介紹的是基於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了。