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

FCKEditor SharePoint 集成

Drasko Popovic
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.64/5 (7投票s)

2008年10月28日

CPOL

6分钟阅读

viewsIcon

70562

downloadIcon

1152

如何将 FCKEditor 与 SharePoint 集成。

引言

本文介绍如何将 FCKEditor 作为 Web 部件集成到 SharePoint 中。此外，本文还帮助您为此 Web 部件实现自定义图像浏览器。

背景

我曾多次在互联网上搜索如何将 TinyMCE 或 FCKEditor 等所见即所得编辑器与 SharePoint 平台集成，但未果。于是，我决定自己动手。

为什么要费心？SharePoint Server (MOSS 2007) 和免费版 WSS 3.0 都集成了所见即所得编辑器。但它们缺少一些功能：

  • WSS 3.0 所见即所得编辑器无法上传图片
  • 两个版本都无法插入 Flash 文件
  • 它们在处理表格方面表现不佳
  • 任何自定义（例如自定义文件浏览器、链接管理）都非常难以实现

因此，我尝试实现世界上最常用的所见即所得编辑器之一 FCKEditor。您可以在此处下载它。对于本项目，我使用了 FCKeditor.Net 控件来创建 Web 部件和 FCKEditor 2.6.3 核心脚本。

这个想法很简单；使用 FCKEditor 替代内容编辑器 Web 部件。

使用代码

fckeditor.zip 是完整的 FCKeditor，包含 fileUpload ASPX 页面和代码。FCKMossEditor 是一个 Web 部件 VS2005 项目。

步骤 1：创建 Web 部件

因此我们需要一个 Web 部件。我不会在这里描述什么是 Web 部件，因为我假设每个使用 SharePoint 的人都知道什么是 Web 部件。在显示模式下，我们的 Web 部件将向 SharePoint 用户渲染 HTML；在编辑模式下，我们将使用 FCKEditor 管理内容。

我在 Visual Studio 2005 中创建了一个 Web 部件。最简单的方法是下载 Windows SharePoint Services 3.0 工具：Visual Studio 2005 扩展 并安装它。然后，只需使用新建>项目>C#>SharePoint>Web 部件项目模板。

NewProject.jpg

  1. 选择一个好名字，然后单击“确定”。我选择了 FCKMossEditor，它在 VS2005 中看起来是这样的：
    2. using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace FckMossEditor
{
    [Guid("9edcd0c0-c649-48d1-8acd-bd6c9b01a030")]
    public class FckMossEditor : System.Web.UI.WebControls.WebParts.WebPart
    {
        public FckMossEditor()
        {
            this.ExportMode = WebPartExportMode.All;
        }

        protected override void Render(HtmlTextWriter writer)
        {
        // TODO: add custom rendering code here.
        // writer.Write("Output HTML");
        }
    }
}
  2. 您需要添加对之前下载的 FCKEditor.Net 控件的引用。因此，在解决方案资源管理器中单击“引用”，然后单击“添加引用”。导航到您解压 FCKEditor.Net 控件的目录，并将其添加到您的项目中。
  3. 您需要创建 EditorPart 类。在 EditorPart 类中，我们告诉 SharePoint 我们想要在内容编辑器 Web 部件的编辑器区域中显示什么。以下代码的所有功劳归功于 Sahil Malik，他撰写了这篇精彩的文章：《为 WebParts 编写自定义编辑器》。只不过，他使用了 Telerik RAD 编辑器，而我在这里使用的是 FCKEditor。如果您计划为 SharePoint 开发 Web 部件，您将需要这篇文章。说到 Sahil Malik，如果您对使用 VS2005 开发工作流感兴趣，他有一些很棒的文章（SharePoint 2007 工作流 - 设置您的环境）。

    好的，让我们回到我们的 Web 部件。创建一个名为 HtmlEditor 的新类。以下是代码：

    using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls.WebParts;
using FredCK.FCKeditorV2;

namespace FckMossEditor
{
    class HtmlEditor : EditorPart
    {
        private FCKeditor htmlContentTxt;
        public HtmlEditor()
        {
            this.ID = "HtmlEditor";
        }
        protected override void CreateChildControls()
        {
            htmlContentTxt = new FCKeditor();
            htmlContentTxt.ImageBrowserURL = "/fckeditor/fileUpload.aspx";
            htmlContentTxt.ToolbarSet = "MyToolbar";
            htmlContentTxt.Width = 525;
            htmlContentTxt.Height = 500;
            Controls.Add(htmlContentTxt);
        }
        public override bool ApplyChanges()
        {
            EnsureChildControls();
            FckMossEditor part = WebPartToEdit as FckMossEditor;
            if (part != null)
            {
                part.DisplayText = htmlContentTxt.Value;
            }
            else
            {
                return false;
            }
            return true;

        }
        public override void SyncChanges()
        {
            EnsureChildControls();
            FckMossEditor part = WebPartToEdit as FckMossEditor;
            if (part != null)
            {
                htmlContentTxt.Value = part.DisplayText;
            }

        }

    }
}

    这里只有三个方法。CreateChildControls 创建一个新的 FCKEditor.Net 控件并为其设置一些属性。ImageBrowserURL 是最重要的一个。在这里，我们告诉 FCKEditor 我们的文件浏览器页面在哪里。是的，我们将在步骤 3 中创建一个带有上传功能的自定义文件浏览器页面。图片将保存在 SharePoint 服务器上。我们使用 Toolbarset 属性来控制将显示哪些工具栏按钮。还有更多 FCKEditor 属性可以设置，请自行探索。

  4. 然后，返回主类（在我的例子中是 FckMossEditor.cs）并进行编辑。以下是代码：
    5. using System;
using System.Runtime.InteropServices;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;
using System.Collections.Generic;

namespace FckMossEditor
{
    [Guid("7de64613-aa8e-46bb-a7cd-ed36ea03f159")]
    public class FckMossEditor : 
           System.Web.UI.WebControls.WebParts.WebPart, IWebEditable
    {
        public FckMossEditor()
        {
            this.ExportMode = WebPartExportMode.All;
        }

        private string displayText = "Hello World!";
        [WebBrowsable(true), Personalizable(true)]
        public string DisplayText
        {
            get { return displayText; }
            set { displayText = value; }
        }
        protected override void Render(System.Web.UI.HtmlTextWriter writer)
        {
            writer.Write(displayText);
        }

        #region IWebEditable Members
        EditorPartCollection IWebEditable.CreateEditorParts()
        {
            List editors = new List();
            editors.Add(new HtmlEditor());
            return new EditorPartCollection(editors);
        }
        object IWebEditable.WebBrowsableObject
        {
            get { return this; }
        }
        #endregion
    }
}

    在这里，我们有一个 DisplayText 属性，它将保存 Web 部件的值。我们使用 IWebEditable 接口扩展我们的类，该接口为开发人员提供了一个接口，用于指定与 Web 部件控件关联的自定义编辑控件。我们将 HtmlEditor 类声明为我们 Web 部件的编辑器类，因此当用户选择编辑我们的 Web 部件时，将显示 HtmlEditor 类的一个实例（它渲染 FCKEditor）。最后，在 Render 方法中，我们向 SharePoint 访问者显示 DisplayText 属性。

步骤 2：配置 FCKEditor

  1. 首先，将 FCKEditor（您在本文开头下载的那个）复制到 SharePoint 应用程序文件夹。在我的例子中，它位于 C:\Inetpub\wwwroot\wss\VirtualDirectories\80。它看起来像这样：

    2. jsfolder.jpg

  2. 我将自己的工具栏 (MyToolbar) 添加到配置文件 (fckconfig.js) 中。默认情况下有两个工具栏（Basic 和 Default），但默认的太多了，Basic 又太基础了，所以我自己做了一个。
    3. FCKConfig.ToolbarSets["MyToolbar"] = [ 
['Cut','Copy','Paste','PasteText','PasteWord'], 
['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'], 
'/', 
['OrderedList','UnorderedList','-','Outdent','Indent'], 
['Link','Unlink','Anchor'], 
['Style'], 
['Table','Image','Flash','Rule','SpecialChar'], 
['About'] 
] ;
  3. 此时，您可以部署您在步骤 1 中构建的 Web 部件（在 VS2005 中单击“生成”>“部署 FCKMossEditor”），一切都将正常工作。您可以将您的新 Web 部件添加到 SharePoint 页面：

    4. addwebpart.jpg

    而且，当您修改共享的 Web 部件时，FCKEditor 将出现：

    display.jpg

    您只有一个问题。图像和 Macromedia Flash 文件的文件浏览器将尝试将您的媒体上传到您的 Web 应用程序中的 /UserFiles/ 文件夹。如果您使用 SharePoint，将媒体存储在 SharePoint 中将是自然的。所以，请等待步骤 3。

步骤 3：自定义文件浏览器

我们希望将媒体文件存储到 SharePoint 服务器。这是一种快速方法。

  1. 打开 fckconfig.js。
  2. 找到 var _FileBrowserLanguage 并更改它。它应该看起来像这样：
    3. var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py 
var _QuickUploadLanguage = 'aspx' ;
  3. 将 FCKConfig.ImageUpload 设置为 false (FCKConfig.ImageUpload = false;)。
  4. 如果您还记得，当我们创建 Web 部件时，我们将此行添加到 HtmlEditor 类中：
    5. htmlContentTxt.ImageBrowserURL = "/fckeditor/fileUpload.aspx";

    所以我们需要这个文件。我创建了带有代码后置页面的 fileUpload.aspx 页面。

    我添加了一个 TreeView 控件、一个 Image 控件、一个文件控件和两个按钮，它看起来像这样：

    browser.jpg

    我做了一个简单的解决方案，将所有图像放到 SharePoint 的 Pics 文件夹中。当您选择现有图像时，图像会显示出来，您可以选择将其添加到 FCKEditor 控件中：

    selectimage.jpg

    按钮点击事件的代码：

    sendImage = true; 
slika = Image1.ImageUrl;

    或者，您可以通过浏览图像并单击“上传”按钮将图像上传到 SharePoint。这是上传按钮的点击事件：

    SPWeb sourceWeb; 
SPSite sourceSite = SPControl.GetContextSite(Context); 
sourceWeb = sourceSite.AllWebs["/"]; 
sourceWeb.AllowUnsafeUpdates = true; 

SPFolder destFolder = sourceWeb.GetFolder("Pics"); 
if (!destFolder.Exists) destFolder = sourceWeb.Folders.Add("Pics"); 
try 
{ 
    if (File1.PostedFile == null)return; 

    string strFileName = File1.PostedFile.FileName.Substring(
           File1.PostedFile.FileName.LastIndexOf("\\") + 1); 
    Stream fStream = File1.PostedFile.InputStream; 
    byte[] contents = new byte[fStream.Length]; 
    
    fStream.Read(contents, 0, (int)fStream.Length); 
    fStream.Close(); 
    
    destFolder.Files.Add(strFileName, contents,true); 
    Response.Write("UploadDocFile :: Success" + strFileName); 
    
    sourceWeb.Dispose(); 
} 
catch (Exception ex)
{ 
    Response.Write("UploadDocFile ::" + ex.Message); 
}
  5. 您还需要编写 Page_load 事件。在这里，我们使用 SharePoint Pics 文件夹中的图像填充 treeview 控件：
    6. public Boolean sendImage; 
public string slika="", align="", opis=""; 
protected void Page_Load(object sender, EventArgs e) 
{ 
    //if (!Page.IsPostBack) 
    // { 
    Image1.Visible = false; 
    Label1.Visible = false; 
    Button2.Visible = false; 
    SPWeb sourceWeb; 
    List<spdocumentlibrary> docLibs; 
    SPSite sourceSite = SPControl.GetContextSite(Context);
    //new SPSite("https://"); 
    
    sourceWeb = sourceSite.AllWebs["/"]; 
    sourceWeb.AllowUnsafeUpdates = true; 
    
    docLibs = new List<spdocumentlibrary>(); 
    SPFolder destFolder = sourceWeb.GetFolder("Pics"); 
    
    if (!destFolder.Exists) destFolder = sourceWeb.Folders.Add("Pics"); 
    
    folderTree.Nodes.Clear(); 
    
    foreach (SPFile file in destFolder.Files)
    { 
        TreeNode t = new TreeNode();     
        t.Text = file.Title; 
        t.Value =sourceSite.Url.ToString()+"/"+ file.Url.ToString(); 
        folderTree.Nodes.Add(t); 
    } 
    
    sourceWeb.Dispose(); 
}
  6. public boolean sendImage 又是什么呢？这是一个发送信息回 FCKEditor 的小技巧，我们在 fileUpload.aspx 中使用了它。我们有这个：
    7. <% if (sendImage) 
{ %> 
<script type="text/javascript">
//alert(window.opener.location.href); 
var alt="";hspace="";vspace="";width="";height=""; 
var lresult = new Array(); 
lresult['src'] = "<%=slika %gt;"; 
lresult['align'] ="<%=align %>"; 
//alert(lresult['src']); 
lresult['alt'] = "<%=opis %>"; 
lresult['border'] = "0"; 
lresult['hspace'] = "5"; 
lresult['vspace'] = "5"; 
//parent.returnValue=lresult; 
window.opener.SetUrl( "<%=slika %>", 110, 120, "<%=opis %>" ); 
self.close(); 
//alert(lresult['src']); 
//parent.self.close(); 
</script>
<% } %>

sendImage = true; slika = Image1.ImageUrl;

    不要对变量 slika 感到困惑；它在塞尔维亚语中是图像的意思。

  7. 您可以在此处下载 fileUpload.aspx 和 fileUpload.aspx.cs 文件。您可以直接将它们放到 SharePoint 应用程序的 FCKEditor 文件夹中。

  8. 您也可以对 Flash 文件浏览器和链接浏览器页面做同样的事情。
  9. 此外，您可以扩展树状视图以处理多个文件夹。

历史

如果 sendImage 变量为 true，则将图像文件名发送回 FCKEditor。当然，sendImage 仅在您单击“选择”按钮时才为 true。请记住，我们在“选择”按钮的 onClick 事件中包含它：

© . All rights reserved.