SharePoint2010 富文本框添加图片功能的扩展

从上面图片可以看出 InputFormTextBox自带的上传图片功能不太尽人意，只能粘帖 链接地址。

我们可以重新定制 选择图片对话框，实现从本地上传图片功能：

主要是实现InputFormTextBox 弹框的JS函数 RTE_ModalDialog方法的重写 。

直接贴上代码：

 在 InputFormTextBox 页面上重写 RTE_ModalDialog 方法：

<script type="text/javascript">
    function RTE_ModalDialog(
    strBaseElementID,
    strDialogName,
    width,
    height,
    dialogArg) {
        ULSopi: ;
        var variables = RTE_GetEditorInstanceVariables(strBaseElementID);
        if (strDialogName == "InsertImage") {
            return showModalDialog(
                variables.aSettings.urlWebRoot + "/_LAYOUTS/UpLoadPic.aspx?&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>

然后在LAYOUTS下创建我们自定义的页面UpLoadPic.aspx 
前台代码：

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <base target="_self" />
</asp:Content>
<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <table>
        <tr>
            <td>
                请选择要上传的图片
            </td>
        </tr>
        <tr>
            <td>
                文字描述：<asp:TextBox ID="txtDecscription" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                <asp:FileUpload ID="fileUpload" runat="server" />
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnSave" runat="server" Text="提交" OnClick="btnSave_Click" />
            </td>
        </tr>
    </table>
    <script type="text/javascript" language="javascript">
        function ReturnPageValue(imgurl, des) {
            var array = new Array();
            array[0] = imgurl;
            array[1] = des;
            window.returnValue = array;
            window.close();
        }
    </script>
</asp:Content>

关键不要忘了在pagehead 里写 <base target="_self" /> 否则的话 点击提交会从新窗口打开页面 则无法达到关闭上传图片的窗口返回值给富文本框的目的。

后台代码：

 protected void btnSave_Click(object sender, EventArgs e)
        {
            SPSecurity.RunWithElevatedPrivileges(delegate()
            {
                if (fileUpload.HasFile)
                {
                    SPWeb web = SPContext.Current.Web;
                    SPPictureLibrary pic = (SPPictureLibrary)web.Lists["PictureLibrary"];
                    string filename = System.Guid.NewGuid() + System.IO.Path.GetExtension(fileUpload.FileName).ToLower();
                    SPFile archivoSubir = pic.RootFolder.Files.Add(filename, fileUpload.FileBytes);
                    string imageurl = archivoSubir.ServerRelativeUrl;
                    System.Web.UI.ScriptManager.RegisterStartupScript(this.Page, this.GetType(), Guid.NewGuid().ToString(),"ReturnPageValue('" + imageurl + "');", true);
                }
            });
        }

点击提交按钮 是先把图片上传到 自己创建的图片库 PictureLibrary 中，然后将路径url返回给富文本框 即可。

 

ps:从他人博客中查看到的资料，自己写一遍，加深下印象。觉得挺不错的功能。