sharepoint 2010 扩展富文本框上传图片功能extend InputFormTextBox for uploading image

在sharepoint开发中，我们有时候会用到一个叫富文本框的控件InputFormTextBox，这个控件非常好用，只是有一个地方不太人性化，就是插入上传图片的时候，只能是插入一个图片地址，而没有选择本地图片的功能。我们看看原来的界面时什么样的。

首先，在页面或者是webpart上面，添加一个富文本框InputFormTextBox的控件

<SharePoint:InputFormTextBoxTitle="" ID="txtContents" runat="server"TextMode="MultiLine"

                            Rows="15"RichText="true" AllowHyperlink="true" RichTextMode="FullHtml" Width="98%" />

运行后的效果如下图，并点击一下插入图片的小按钮

这个时候会show出一个插入图片的页面。

发现不能直接使用上传本地图片的操作，只能插入一个服务器图片链接，很明显做得不够人性化。

这次主要是扩展下这个页面，扩展成可以添加浏览本地图片的功能，如下图：

下面是这个功能的具体做法。

在做这个功能之前，首先需要在网站上面创建一个图片库列表（图片资源）
富文本框页面代码：

<asp:ContentID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <script>

        function RTE_ModalDialog(

    strBaseElementID,

    strDialogName,

    width,

    height,

    dialogArg) {

            ULSopi: ;

            var variables = RTE_GetEditorInstanceVariables(strBaseElementID);

            if (strDialogName == "InsertImage") {

                return showModalDialog(

                variables.aSettings.urlWebRoot + "/_layouts/SharePointProject1/ApplicationPage2.aspx?IsDlg=1&Dialog=" + strDialogName +"&LCID=" + RTE_GetWebLocale(strBaseElementID) +"&IsDlg=1",

                dialogArg,

                "resizable: no; status: no; help: no; " +"scroll:no;center: yes; dialogWidth:" + width +"px; " + "dialogHeight:" + height +"px;");

            }

            else {

                return showModalDialog(

        variables.aSettings.urlWebRoot + "/_layouts/RteDialog.aspx?Dialog=" + strDialogName + "&LCID=" + RTE_GetWebLocale(strBaseElementID),

        dialogArg,

        "resizable: yes; status: no; help: no; " +"center: yes; dialogWidth:" + width + "px; " + "dialogHeight:" + height + "px;");

            }

        }

    </script>

    <SharePoint:InputFormTextBoxTitle="" ID="txtContents" runat="server"TextMode="MultiLine"

        Rows="15"RichText="true" AllowHyperlink="true" RichTextMode="FullHtml" Width="98%" />

</asp:Content>

弹出页面代码：

<asp:ContentID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead"runat="server">

    <basetarget="_self">

</asp:Content>

<asp:ContentID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">

    function ReturnPageValue(imgurl, des)

    {

        var array = new Array();

        array[0] = imgurl;

        array[1] = des;

        window.returnValue = array;

        window.close();

    }

    <styletype="text/css">

        .TdNowrap

        {

            white-space: nowrap;

            vertical-align: top;

        }

    </style>

    <divstyle="">

        <tablestyle="margin: auto;width: 250px;">

            <trclass="TdNowrap">

                <td>

                    请选择你要上传的图片

                </td>

            </tr>

            <tr>

                <tdclass="TdNowrap">

                    文字描述：<inputid="txtDes" type="text" runat="server"/>

                </td>

            </tr>

            <tr>

                <tdclass="TdNowrap">

                    <asp:FileUploadID="flUpload" runat="server" />

                </td>

            </tr>

            <tr>

                <tdclass="TdNowrap" align="center">

                    <asp:ButtonID="BtnSubmit" runat="server" Text="提交"OnClick="btnSave_Click"/>

                    <inputid="BtnClose" type="button" value="关闭"onclick="window.close();"/>

                </td>

            </tr>

        </table>

    </div>

</asp:Content>

弹出窗口后台代码：

protected void btnSave_Click(object sender, EventArgs e)

 {

            SPSecurity.RunWithElevatedPrivileges(delegate()

            {

                byte[] imageData =null;

                if ((flUpload.PostedFile !=null) && (flUpload.PostedFile.ContentLength > 0))

                {

                    Stream MyStream = flUpload.PostedFile.InputStream;

                    long iLength = MyStream.Length;

                    imageData = newbyte[(int)MyStream.Length];

                    MyStream.Read(imageData, 0, (int)MyStream.Length);

                    MyStream.Close();

                    string filename = System.IO.Path.GetFileName(flUpload.PostedFile.FileName);

                    SPWeb web =SPContext.Current.Web;

                    SPPictureLibrary pic = (SPPictureLibrary)web.Lists["图片资源"];

                    SPFile archivoSubir = pic.RootFolder.Files.Add(filename, imageData);

                    string imageurl = archivoSubir.ServerRelativeUrl;

                    web.Dispose();

                    ClientScript.RegisterStartupScript(ClientScript.GetType(),"myscript", "<script>ReturnPageValue('" + imageurl +"');</script>");

                }

            });

        }

这个功能最关键的地方，就是重写了一个js的方法：RTE_ModalDialog