SPAN tags out of control

Last post 11-04-2009, 2:51 PM by GCB. 8 replies.
Sort Posts: Previous Next
  •  05-29-2009, 8:53 PM 52657

    SPAN tags out of control

    Hi -
     
    My customers use CuteEditor in ASP.NET to edit their content in a custom CMS we have created.
     
    Every so often I see customer HTML where the SPAN tags are completely out of control. The customer complaint is typically that the page/control is so bogged down that it has become completely unresponsive and unusable.
     
    The only solution for me at that point is to clean out all of the SPAN tags and rebuild their content.
     
    These are very naive users.  I assume the main issue here is that they do a little formatting, then a little more, then a little more, etc., perhaps each time with a slightly different selection.
     
    If we assume this is the pattern of usage, is the proliferation of SPAN tags inevitable? Is there something we can do to get these tags to collapse somehow? Is this the result of something we are doing?  Is there a setting like, "make a horrible mess of things" that we turned on in error?
     
    This is a significant support issue for us so I'd love to find a solution.
     
    Note - we haven't upgraded to the current version - we are an update or two behind. I can verify the actual version if it is relevant to the discussion.  If we can establish that upgrading will help we'll do it.
     
    Thanks for your help.
     
    Jeff
     

     
    Excuse the mess - here is a small sample of the nasty HTML that my users are creating (that I have to clean up):
     
     
     
    <p style="font-size: 10pt;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="font-size: 10pt;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="font-size: 12pt;"><strong></strong></span></span></span></span></span></span></span></span></span></span></span><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="font-size: 8pt;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080; font-size: 10pt;"><span style="color: #cc0000;"><span style="font-size: 8pt;"><span style="font-size: 10pt;"><span style="font-size: 8pt;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000; font-size: 10pt;"><span style="font-size: 10pt;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><strong><span style="color: #cc0000;"><strong><u style="font-size: 8pt;"><span style="font-size: 10pt;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><a class="customLink" href="http://cutesoft.net/component.aspx?id=5754&amp;type=Page"><span style="color: #cc0000;">News</span></a></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></u><a class="customLink" href="http://cutesoft.net/component.aspx?id=5754&amp;type=Page"></a></strong><span style="font-size: 10pt;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #cc0000;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #0000ff;"><span style="color: #800080;"><span style="color: #800080;"><span style="color: #cc0000;"><strong><span style="color: #cc0000;"><strong><u><a style="text-decoration: underline;" class="customLink" href="http://cutesoft.net/component.aspx?id=5754&amp;type=Page">letters</a></u><a style="text-decoration: underline;" class="customLink" href="http://cutesoft.net/component.aspx?id=5754&amp;type=Page"></a></strong></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span><strong><span style="color: #cc0000;"><a class="customLink" href="http://cutesoft.net/component.aspx?id=5754&amp;type=Page"><u>&nbsp;</u></a></span></strong></span></strong></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
                 </span></span></span></span></span></span></span>
                 </strong>
     
     
     
     
     
  •  06-02-2009, 10:51 AM 52735 in reply to 52657

    Re: SPAN tags out of control

    Note - just confirming we are at version 6.1.2.
     
    Does anyone else see CE creating this kind of HTML? It is really pretty awful as you can see. 
     
    I can't reproduce it myself because it is my customers who are creating it.
     
     
  •  06-02-2009, 12:16 PM 52736 in reply to 52657

    Re: SPAN tags out of control

    Jeff,
     
    The latest version is 6.4. Can you let your clients try it?
     
    It doesn't like the above code is created by CuteEditor. Cute Editor will automaically merge those span tags.
     
     
    I suggest you download and upgrade to the latest version.

    The upgrade is free.
     
    Keep me posted

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  06-04-2009, 8:17 AM 52788 in reply to 52736

    Re: SPAN tags out of control

    Thanks for the response Adam. That's what I hoped you would say - that the tags should be collapsed by CE under normal circumstances and that this is some weird anomaly.
     
    As far as I know there is no other explanation other than the customers are using CE to generate the bad tags (based on some usage pattern or conditions that I haven't been able to reproduce).
     
    We'll upgrade our app at the first opportunity and let you know if we continue to see customers generating the bad HTML.  
  •  10-02-2009, 10:44 AM 56048 in reply to 52788

    Re: SPAN tags out of control

    We also use CE for our site CMS and are experiencing the same problem.  We use in-page editing, so the users are able to change a field on a web page in place.   It seems that in these cases the span tags are being added when the text is a different color that the default color of the body of the page.  Each time the field is editted, CE adds a new set of spans,, but (oddly) only if you leave the page and return to it before editing again. 
     
    See the image below. The <span style="color:white"> tag pairs are NOT in our CMS, and so should not be part of the editable text in CE.
     
    Note: I will also upgrade to 6.4 to see if that helps.
     
     
  •  10-02-2009, 11:27 AM 56054 in reply to 56048

    Re: SPAN tags out of control

    No, 6.4 did not fix this problem.  Why is CE inserting span tags into the editable text?  I am fetching the field content into the .Text property directly from our CMS database, and the span tags are NOT in the database.
     
    // In my class which subclasses CE.  This is a database get.

    Text = GG.GetWebPageFieldContent(pageName, pageSubName, Id);

    Here's the actual field on the database.  The spans are not there.
     
     
     
     
    Here the same field in the CE editor.
     
  •  10-03-2009, 10:39 PM 56070 in reply to 56054

    Re: SPAN tags out of control

    Hi,
     
    I just test set
     
    Editor1.Text="<h1>hello</h1>asdfkf<br/>dfkfjasd<br/>";
     
    and open the page, switch to HTML, not able to reproduce your issue.
     
    I select all test , and click the color button , I get such result :
     
    <h1><span style="color: red">hello</span></h1>
    <span style="color: red">asdfkf</span><br />
    <span style="color: red">dfkfjasd</span><br />
     
    I hope you can provide more information , so we can find the reason and fix it .
    Regards,
    Terry
     
  •  10-14-2009, 9:19 AM 56393 in reply to 56070

    Re: SPAN tags out of control

    This is still an issue.  Please reply. 
  •  11-04-2009, 2:51 PM 56915 in reply to 56070

    Re: SPAN tags out of control

    My sincerest apologies.  This was not a CE error.  It was totally my bug.
View as RSS news feed in XML