65.9K
CodeProject 正在变化。 阅读更多。
Home

FCKEditor – SharePoint 集成，创建自定义字段类型

Drasko Popovic
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.80/5 (10投票s)

2009年1月27日

CPOL

6分钟阅读

viewsIcon

84265

downloadIcon

848

如何在 SharePoint 中创建新的字段类型。一个使用 FCKEditor 作为编辑器的 HTML 多行文本字段。

引言

这个项目受到了我关于 SharePoint 集成 FCKEditor 文章评论的启发。在那篇文章中，我们创建了一个自定义 Web 部件（替代内容编辑器 Web 部件），它使用 FCKEditor 作为 Web 编辑器。这还不错，但如果你想要更多呢？如果你想使用 FCKEditor 而不是 SharePoint 和 WSS 自带的富 HTML 编辑器呢？这还不够。与其修改*core.js*，我为你提供一个更简洁的解决方案：创建你自己的字段类型（这样你可以在未来使用它创建的任何列表），并将 FCKEditor 设置为默认的 Web 编辑器。你需要做什么？

  • Visual Studio 2005 和 Visual Studio 2005 Extensions for Windows SharePoint Services 3.0, Version 1.1。

    我没有在旧版本上尝试过，但正如我在关于这个主题的文章中所见，1.1 版本是一个改进。我不需要手动添加文件和包含（Visual Studio 已经为我完成了）。

  • WSS 3.0 或 SharePoint Server 2007。
  • FckEditor – 你可以从我之前的文章下载 FckEditor。它完全相同，并且我在这里也使用了我在那篇文章中制作的文件浏览器。

    有关如何将 FckEditor 文件添加到 SharePoint 网站的说明，请参阅我之前的文章。

    • 步骤 2：配置 FCKEditor，项目 1 和 2。
    • 步骤 3：自定义文件浏览器。

背景

基本思路是在 SharePoint 列表中拥有带有自定义所见即所得编辑器的多行文本列。在这篇文章中，我在这个自定义列中实现了 FCKEditor。

好处多多

  • 对非 IE 浏览器的更好支持
  • 自定义或默认文件管理器，随处可用
  • 自定义工具栏
  • 更高级的 Web 编辑器

使用代码

CustomWeb 是一个即用型、VS2005 解决方案。文章中的所有示例都包含在该解决方案中。准备好 FCKEditor 后，你只需构建并部署此解决方案。

步骤 1：创建一个新的 SharePoint 项目

  1. 在 Visual Studio 2005 中，从“文件”菜单选择“新建项目”。
  2. 在“新建项目”对话框中，在“项目类型”窗口中选择 SharePoint。（如果窗口中没有 SharePoint 项目选项，我建议你安装 Visual Studio 2005 Extensions for Windows SharePoint Services 3.0, Version 1.1。）从 SharePoint 模板中选择“空模板”。
  3. 对于名称，你可以输入任何你喜欢的名字，我输入了 CustomWeb。
  4. 按“确定”，你将看到你的空项目。在“解决方案资源管理器”中，右键单击项目名称（对我来说是 CustomWeb），然后选择“添加”，再选择“新建项”。
  5. 在“SharePoint”类别中，选择“字段控件模板”。
  6. 在“名称”框中，键入你为项目选择的名称（对我来说是 CustomWeb）。
  7. 点击“添加”。这将为你创建两个文件：*CustomWeb.Field.cs* 和 *CustomWeb.FieldControl.cs*，它们位于*CustomWeb*文件夹中。

步骤 2：创建控件

  1. 打开*CustomWeb.Field.cs*文件。默认情况下，此类继承自SPFieldText。如果你想继承自其他类，可以更改它。在这种情况下，我不在乎，因为我使用的是自己的控件，所以我省略了SPFieldText引用。也许，继承自基类SPField会更清晰；如果有人想尝试，那太好了！
  2. 打开*CustomWeb.FieldControl.cs*。默认情况下，此类继承自TextField。对于这个项目，我们将不使用任何标准控件，因此我们将将其更改为BaseFieldControl。
  3. 你的 using 部分应该看起来像这样
    using System;
using System.Runtime.InteropServices;
using System.Web.UI.WebControls;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using FredCK.FCKeditorV2;
  4. 现在，我们将向控件添加一个字段。我们将添加我们的 .NET 版 FCKEditor 控件。你可以从 FCKEditor 网站免费下载。
    protected FCKeditor WebEditor;
// protected Label WebEditorPrefix;

    如果你想在新建或编辑表单中使用Label，只需取消注释此行。我不需要它。

  5. 接下来，你需要重写CreateChildControls方法
    protected override void CreateChildControls()
{
    if (this.ControlMode == SPControlMode.Edit || this.ControlMode == SPControlMode.New)
    {
        // Make sure inherited child controls are completely rendered.
        base.CreateChildControls();
        this.WebEditor = new FCKeditor(); ;
        //this.WebEditorPrefix = new Label(); //If you want your own label for a control
        /**** If You use ascx template use this two lines instead 2 above
        // (Label)TemplateContainer.FindControl("WebEditorPrefix");
        //if (TemplateContainer.FindControl("WebEditor")!=null) 
        //this.WebEditor = (FCKeditor)TemplateContainer.FindControl("WebEditor");
        */
        if (!this.Page.IsPostBack)
        {
            if (this.ControlMode == SPControlMode.New)
            {
                this.WebEditor.Value = "";
            } // end assign default value in New mode
            this.WebEditor.ImageBrowserURL = "/fckeditor/fileUpload.aspx";
            this.WebEditor.ToolbarSet = "MyToolbar";
            this.WebEditor.Width = 680;
            this.WebEditor.Height = 500;
        }// end if this is not a postback

    我们在这里做什么？如果控件处于Edit或New模式（当用户在 SharePoint 列表中打开新建或编辑表单时），我们将渲染我们的 FCKEditor 控件。在Display模式下，我们将渲染 HTML（我们将在本文后面的RenderPattern标签中指定）。如果项目是新的，我们将值设置为空字符串；否则，它应该从 SharePoint 列表中加载值。我们稍后设置的属性是 FCKEditor 特有的，我们设置了ImageBrowserURL（即我们的自定义文件浏览器）、工具栏（也是自定义的）、宽度和高度。

  6. 添加以下Value属性的重写，这是字段在 UI 中的属性。
    public override object Value
{
    get
    {
        //EnsureChildControls();
        return this.WebEditor.Value;
    }
    set
    {
        //EnsureChildControls();
        this.WebEditor.Value = (String)value;
    }
}

步骤 3：创建字段类型定义

你的字段类型定义已在*Templates/xml*文件夹中为你创建。如果你将项目命名为 CustomWeb，则它名为*fldtypes_CustomWeb.xml*。这是使用 WSS Extensions 1.1 for Visual Studio 的一个优点。否则，你应该自己创建这个文件。只需构建项目，Visual Studio 就会添加除RenderPattern之外的所有内容。这部分永远不应手动输入。因为我们只想显示 HTML，所以这非常简单，只需添加

<RenderPattern Name="DisplayPattern" DisplayName="DisplayPattern">
<Column AutoNewLine="TRUE" />
</RenderPattern>

在</FieldTypes>标签之前。另外，还有一件事。如果你想在控件中存储超过 255 个字符，你应该将控件的ParentType更改为Note。

最后，你的 XML 文件应该看起来像这样

<?xml version="1.0" encoding="utf-8"?>
<FieldTypes>
<FieldType>
<Field Name="TypeName">CustomWebField</Field>
<Field Name="TypeDisplayName">CustomWebField</Field>
<Field Name="TypeShortDescription">CustomWebField</Field>
<Field Name="ParentType">Note</Field>
<Field Name="UserCreatable">TRUE</Field>
<Field Name="FieldTypeClass">6dee03df-80d1-4a5b-abb2-3aa1ea2ad19e</Field>
<RenderPattern Name="DisplayPattern" DisplayName="DisplayPattern">
<Column AutoNewLine="TRUE" />
</RenderPattern>
</FieldType>
</FieldTypes>

步骤 4：整合

现在，你已准备好部署解决方案。只需点击“部署”，你的字段就会被添加到 SharePoint。你可以在列表的“创建列”选项中看到你的新字段类型（见下图）

fck1.jpg

你的新字段类型应该位于所有已知 SharePoint 字段类型（文本、选项、超链接…）的末尾。为它起一个好名字，然后选择 CustomWebField 作为你的字段类型。从现在开始，一切都很简单。你像使用其他列类型一样使用这种类型的列。因此，当你在新建表单中打开列表项时，它看起来像这样

fck2.jpg

如果你下载了我版本的 FCKEditor，你也应该拥有 SharePoint 文件浏览器（否则，你应该拥有默认的文件浏览器）

fck4.jpg

在显示模式下，我们的字段类型只是渲染 HTML（记住字段定义 XML 中的RenderPattern标签）

fck5.jpg

接下来做什么？

正如你所见，我注释掉了引用模板容器的代码行。那都是关于什么的？你可以创建一个 ASCX 页面并使用 UI 来创建你的控件。而不是使用 Controls.Add(this.WebEditor);，你可以创建一个 ASCX 文件并将你项目所需的控件拖放到其中。你应该将此 ASCX 文件放在项目的根目录中。

然后，在*CustomWeb.FieldControl.cs*中，你应该重写DefaultTemplateName属性

protected override string DefaultTemplateName
{
    get
    {
        return "CustomFieldControl";
    }
}

其中*CustomFieldControl*是你*CustomFieldControl.ascx*文件的名称。请记住，部署后，你的 ASCX 文件应位于*C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\CONTROLTEMPLATES*文件夹中。

这是一个相当简单的控件，所以我选择不为模板使用 ASCX。

© . All rights reserved.