locked
HtmlEditorExtender align justify not working as expected and unable to upload images RRS feed

  • Question

  • User-691790829 posted

    I am trying to implement the Ajax control toolkit HtmlEditorExtender in a web form but I am getting the following error:

    0x800a139e - JavaScript runtime error: Sys.ArgumentException: Cannot deserialize empty string

    I do not know how or why this error is happening. my attempts to search on the internet have been unsuccessful. Any advice you could give would be greatly appreciated

    Also the align buttons don't seem to work. when I switch it to code view it displays the align property but does not align the text to the right or in the centre not sure why.

    My aspx:

    <ajaxToolkit:HtmlEditorExtender EnableSanitization="true" ID="HtmlEditorExtender1" OnImageUploadComplete="HtmlEditorExtender1_ImageUploadComplete" DisplaySourceTab="true" TargetControlID="txtPost" runat="server">
                        <Toolbar>
                            <ajaxToolkit:Undo />
                            <ajaxToolkit:Redo />
                            <ajaxToolkit:Bold />
                            <ajaxToolkit:Italic />
                            <ajaxToolkit:Underline />
                            <ajaxToolkit:StrikeThrough />
                            <ajaxToolkit:Subscript />
                            <ajaxToolkit:Superscript />
                            <ajaxToolkit:InsertOrderedList />
                            <ajaxToolkit:InsertUnorderedList />
                            <ajaxToolkit:CreateLink />
                            <ajaxToolkit:UnLink />
                            <ajaxToolkit:RemoveFormat />
                            <ajaxToolkit:BackgroundColorSelector />
                            <ajaxToolkit:ForeColorSelector />
                            <ajaxToolkit:FontSizeSelector />
                            <ajaxToolkit:Indent />
                            <ajaxToolkit:Outdent />
                            <ajaxToolkit:InsertImage />       
                        </Toolbar>
                    </ajaxToolkit:HtmlEditorExtender>
                    <asp:TextBox ID="txtPost" runat="server" BackColor="White" CssClass="form-control" TextMode="MultiLine" Rows="30"></asp:TextBox>

    My code behind:

    protected void HtmlEditorExtender1_ImageUploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
    {       
        string fullPath = "~/images/postAssets/" + e.FileName;
             // Save upload file to the file system
           HtmlEditorExtender1.AjaxFileUpload.SaveAs(MapPath(fullPath));
           e.PostedUrl = Page.ResolveUrl(fullPath);
    }

    As I said I have no idea why this is happening. I've never used the control before so don't really know what I'm doing

    Monday, October 26, 2015 12:15 PM

Answers

  • User61956409 posted

    Hi M_Griffiths,

    how would I implement your suggestion? Do I do it on an event such as key up? Or when the form is submitted?

    You could do it in submit button clientclick event.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 5, 2015 4:46 AM

All replies

  • User61956409 posted

    Hi M_Griffiths,<!--?xml:namespace prefix = "o" ns = "urn:schemas-microsoft-com:office:office" /--><o:p></o:p>

    I'd like to know whether HtmlEditorExtender ImageUploadComplete event could be fired. Besides, you could try to use AjaxFileUpload to upload images.<o:p></o:p>

    http://ajaxcontroltoolkit.devexpress.com/AjaxFileUpload/AjaxFileUpload.aspx <o:p></o:p>

    Best Regards,<o:p></o:p>

    Fei Han<o:p></o:p>

    Tuesday, October 27, 2015 3:20 AM
  • User-691790829 posted

    Hi Fei Han, thanks for your reply :)

    When I put a breakpoint on the ImageUploadComplete  event it was not fired. Also doesn't the HtmlEditorExtender use the AjaxFileUpload control anyway?

    Tuesday, October 27, 2015 3:49 AM
  • User-691790829 posted

    I also tried adding the following to the web.config file:

    <system.web>
    ....
    <httpHandlers>
        <add verb="*" path="AjaxFileUploadHandler.axd"
          type="AjaxControlToolkit.AjaxFileUploadHandler, 
          AjaxControlToolkit"/>
    </httpHandlers>
    
    ...
    </system.web>

    but I got the following error:

    HTTP Error 500.23 - Internal Server Error
    An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode.
    Most likely causes:
    •This application defines configuration in the system.web/httpHandlers section.

    Tuesday, October 27, 2015 4:00 AM
  • User-691790829 posted

    If I were to set up the ajaxfileupload separately to upload images, how would I make those images available to use in the HtmlEditoExtender? 

    Tuesday, October 27, 2015 4:14 AM
  • User-691790829 posted

    I've got the imageupload part working now. Just need the align buttons to work properly.

    they generate the following html:

    <p align="right">this is some text</p>

    but it does not seen to align the text to the right so what I'd like to change it to is something more like the following:

    <p style="text-align:right"> this is also text </p>

    which works, when entered manually. Entering manually is not an option because the person who will use the editor does not know any html nor are they interested in learning any. Which Is why I selected this particular control as I thought it would be easy for the user to use.

    Tuesday, October 27, 2015 4:53 AM
  • User61956409 posted

    Hi M_Griffiths,

    they generate the following html:

    <p align="right">this is some text</p>

    but it does not seen to align the text to the right so what I'd like to change it to is something more like the following:

    <p style="text-align:right"> this is also text </p>

    which works,

    Both of those should be working, but the align attribute of <p> is not supported in HTML5.

    http://www.w3schools.com/tags/att_p_align.asp

    Best Regards,

    Fei Han

    Wednesday, October 28, 2015 3:27 AM
  • User-691790829 posted
    So how would I go about changing them?
    Wednesday, October 28, 2015 5:35 AM
  • User61956409 posted

    Hi M_Griffiths,

    You could try to dynamically change style attribute of <p> based on the value of “align”.

    var palign = $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("align");
    
    switch (palign) {
        case "right":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: right");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
        case "left":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: left");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
        case "center":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: center");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
        case "justify":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: justify");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
    }
    

    Best Regards,

    Fei Han

    Monday, November 2, 2015 3:29 AM
  • User-691790829 posted

    Fei Han - MSFT

    Hi M_Griffiths,

    You could try to dynamically change style attribute of <p> based on the value of “align”.

    var palign = $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("align");
    
    switch (palign) {
        case "right":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: right");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
        case "left":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: left");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
        case "center":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: center");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
        case "justify":
            $("#HtmlEditorExtender1_ExtenderContentEditable p").attr("style", "text-align: justify");
            $("#HtmlEditorExtender1_ExtenderContentEditable p").removeAttr("align");
            break;
    }
    

    Best Regards,

    Fei Han

    hi Fei Han,

    Thank you for your reply.

    how would I implement your suggestion? Do I do it on an event such as key up? Or when the form is submitted? Sorry if that was a silly question I am just unsure :)

    Monday, November 2, 2015 5:55 AM
  • User61956409 posted

    Hi M_Griffiths,

    how would I implement your suggestion? Do I do it on an event such as key up? Or when the form is submitted?

    You could do it in submit button clientclick event.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 5, 2015 4:46 AM