Answered by:
HtmlEditorExtender align justify not working as expected and unable to upload images

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