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