HtmlEditorExtender中的InsertImage显示空白框

时间:2013-10-11 20:06:14

标签: c# asp.net .net-4.0 ajaxcontroltoolkit

HtmlEditorExtender控件在尝试上传图像时(本地或服务器上)显示空白,不显示上传图像的控件,甚至按钮关闭/取消

enter image description here

环境: VS2010 Framework 4.0, AjaxToolKit.dll 4.1.7.123, HtmlAgilityPack.dll 1.4.0.0, SanitizerProviders.dll 1.0.0.0, IIS 7

ASP

<asp:HtmlEditorExtender ID="HtmlEditorExtender_Nota" runat="server" ClientIDMode="Static"
TargetControlID="txtNota" DisplaySourceTab="true" OnImageUploadComplete="saveFile" >
    <Toolbar>
        <asp:Undo />
        <asp:Redo />
        <asp:HorizontalSeparator />

        <asp:Bold />
        <asp:Italic />
        <asp:Underline />
        <asp:StrikeThrough />

        <asp:HorizontalSeparator />
        <asp:Subscript />
        <asp:Superscript />

        <asp:HorizontalSeparator />
        <asp:JustifyLeft />
        <asp:JustifyCenter />
        <asp:JustifyRight />
        <asp:JustifyFull />
        <asp:Indent />
        <asp:Outdent />
        <asp:InsertHorizontalRule />

        <asp:HorizontalSeparator />
        <asp:InsertOrderedList />
        <asp:InsertUnorderedList />

        <asp:HorizontalSeparator />
        <asp:CreateLink />
        <asp:UnLink />

        <asp:HorizontalSeparator />
        <asp:SelectAll />
        <asp:UnSelect />

        <asp:HorizontalSeparator />
        <asp:RemoveFormat />
        <asp:Delete />
        <asp:Cut />
        <asp:Copy />
        <asp:Paste />

        <asp:HorizontalSeparator />
        <asp:FontNameSelector />
        <asp:FontSizeSelector />
        <asp:BackgroundColorSelector />
        <asp:ForeColorSelector />

        <asp:HorizontalSeparator />
        <asp:InsertImage />
    </Toolbar>
<asp:HtmlEditorExtender>

代码隐藏

/// <summary>
/// SaveImagen HtmlEditorExtender AjaxControl
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void saveFile(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
{
    if (!Directory.Exists(MapPath(_fileImgNotasPath)))
        Directory.CreateDirectory(MapPath(_fileImgNotasPath));

    // Generate file path
    string filePath = _fileImgNotasPath;
    filePath += HttpContext.Current.User.Identity.Name + "_";
    filePath += String.Format("{0:ddMMyyyyhhmm}", DateTime.Now);
    filePath += e.FileName.Substring(e.FileName.Length - 4, 4);

    // Save uploaded file to the file system
    var ajaxFileUpload = (AjaxFileUpload)sender;
    ajaxFileUpload.SaveAs(MapPath(filePath));

    // Update client with saved image path
    e.PostedUrl = Page.ResolveUrl(filePath);
}

WebConfig

<system.web>
    ...
    <sanitizer defaultProvider="HtmlAgilityPackSanitizerProvider">
        <providers>
            <add name="HtmlAgilityPackSanitizerProvider" type="AjaxControlToolkit.Sanitizer.HtmlAgilityPackSanitizerProvider"/>
        </providers>
    </sanitizer>
    ...
</system.web>

引用已添加,bin文件夹中的dll

这工作,在某些时候停止工作,并更新AjaxToolKit什么都没有。 所有其他控件都可以:S不再是InsertImage的那部分 可能会发生什么?

帮助我超人! ;)

1 个答案:

答案 0 :(得分:2)

您正在使用<asp:Bold />而不是<ajaxToolkit:Bold />

用ajaxtoolkit替换所有的asp标签。

<Toolbar> 
        <ajaxToolkit:Undo />
        <ajaxToolkit:Redo />
        <ajaxToolkit:Bold />
        <ajaxToolkit:Italic />
        <ajaxToolkit:Underline />
        <ajaxToolkit:StrikeThrough />
        <ajaxToolkit:Subscript />
        <ajaxToolkit:Superscript />
        <ajaxToolkit:JustifyLeft />
        <ajaxToolkit:JustifyCenter />
        <ajaxToolkit:JustifyRight />
        <ajaxToolkit:JustifyFull />
        <ajaxToolkit:InsertOrderedList />
        <ajaxToolkit:InsertUnorderedList />
        <ajaxToolkit:CreateLink />
        <ajaxToolkit:UnLink />
        <ajaxToolkit:RemoveFormat />
        <ajaxToolkit:SelectAll />
        <ajaxToolkit:UnSelect />
        <ajaxToolkit:Delete />
        <ajaxToolkit:Cut />
        <ajaxToolkit:Copy />
        <ajaxToolkit:Paste />
        <ajaxToolkit:BackgroundColorSelector />
        <ajaxToolkit:ForeColorSelector />
        <ajaxToolkit:FontNameSelector />
        <ajaxToolkit:FontSizeSelector />
        <ajaxToolkit:Indent />
        <ajaxToolkit:Outdent />
        <ajaxToolkit:InsertHorizontalRule />
        <ajaxToolkit:HorizontalSeparator />
        <ajaxToolkit:InsertImage />
</Toolbar>

在您的HTMLEditorExtender标记中,提供ID并使用OnImageUploadComplete来调用您的函数。

<ajaxToolkit:HtmlEditorExtender
    id="MyHtmlEditorExtender"
    TargetControlID="txtComments"
    OnImageUploadComplete="MyHtmlEditorExtender_ImageUploadComplete"
    DisplaySourceTab="true"
    runat="server" >
    <Toolbar>
        <ajaxToolkit:Bold />
        <ajaxToolkit:Italic />
        <ajaxToolkit:Underline />
        <ajaxToolkit:InsertImage />
    </Toolbar>
</ajaxToolkit:HtmlEditorExtender>

在代码背后,

using System.Web.UI;
using AjaxControlToolkit;

namespace WebApplication1
{
    public partial class ImageUpload : System.Web.UI.Page
    {

        protected void MyHtmlEditorExtender_ImageUploadComplete(object sender, AjaxFileUploadEventArgs e)
        {
            // Generate file path
            string filePath = "~/Images/" + e.FileName;

            // Save uploaded file to the file system
            var ajaxFileUpload = (AjaxFileUpload)sender;
            ajaxFileUpload.SaveAs(MapPath(filePath));

            // Update client with saved image path
            e.PostedUrl = Page.ResolveUrl(filePath);
        }
    }
}