+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / How to prevent Sitefinity from inserting " " into empty divs

How to prevent Sitefinity from inserting " " into empty divs

15 posts, 1 answered
  1. Cole
    Cole avatar
    15 posts
    Registered:
    28 May 2013
    30 Apr 2014
    Link to this post

    Hello,

    When I place a content widget on a page, enter into the text editor, select the HTML option, and paste a block of markup in there, when I close it out and open it back up there are now "&nbsp;" inserted into any divs I have that don't have content (they are used for displaying graphics and don't have any need to have anything in the markup - i.e. <div class="myImage"></div>.  So with that example, when I re-open the editor and inspect my html it will now display <div class="myImage">&nbsp;</div>.

    I would like to know how to prevent that from happening. This is quite aggravating because every time I open the editor, it will insert those throughout the markup. Some sections are lengthy and a bunch of those are added so that means I have to scour thru the entire code block, select them, and then delete them all. Normally, I could let it go, but the code I'm working with requires that there not be any non-breaking space characters in those divs.

    Hopefully it's a quick setting change somewhere.

    Thanks in advance,

    Cole

    Answered
  2. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    06 Dec 2016
    30 Apr 2014
    Link to this post
    Hello,

    The problem is caused by a filter that the RadControl used by our HTMLField is using. The filter is called: ConvertToXhtml. This filter converts the HTML from the editor content area to XHTML. You need to turn off this filter if you do not want &nbsp to be added. To disable the filter follow the steps below:

    1. Create a new user control in Visual Studio
    2. Place the source code bellow in the template of the control, bellow the  <%@ Control Language...  row:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Extenders" TagPrefix="sf" %>
          
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sf:ConditionalTemplate ID="ConditionalTemplate1" Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <sf:SitefinityLabel id="titleLabel_read" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
                <sf:SitefinityLabel id="viewControl" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfRTFContent" />
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate ID="ConditionalTemplate2" Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
                <sf:ResourceLinks id="resourcesLinks2" runat="server">
                    <sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.EditorDialogs.css" Static="true" ControlID="editControl" ControlPropertyName="DialogsCssFile" />
                    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.Window.css" Static="true" />
                </sf:ResourceLinks>
                <asp:Label ID="titleLabel_write" runat="server" CssClass="sfTxtLbl" AssociatedControlID="editControl" />
                <asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
                <%--NewLineBr="False" - removed because of bug 112126. The bug should be fixed in the next release of RadControls.--%>
                <asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">
                    <telerik:RadEditor
                        ID="editControl"
                        runat="server"
                        Skin="Sitefinity"
                        Width="100%"
                        Height="550px"
                        EnableResize="False"
                        EditModes="Design,HTML"
                        DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
                        Content=""
                        StripFormattingOptions="Css,Font,Span" >
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    </telerik:RadEditor>
                    <sf:RadEditorCustomDialogsExtender runat="server" id="editorCustomDialogsExtender" TargetControlID="editControl"/>
                    <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                    <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
                </asp:Panel>
            </sf:ConditionalTemplate>
        </Templates>       
    </sf:ConditionalTemplateContainer>
          
        <%-- Overwrite. Remove after RadControls service pack 2012 Q1 --%>
        <script type="text/javascript">
            Telerik.Web.UI.Editor.AlignCommand.prototype.getState = function (oWindow) {
                oWindow = oWindow || this.get_window();
                var doc = oWindow.document;
          
                if ($telerik.isFirefox) {
                    var alignDirection = this.get_alignment();
                    var selection = doc.getSelection();
                    if (selection && selection.getRangeAt) {
                        try {
                            var selectedElement = selection.getRangeAt(0).commonAncestorContainer;
                            var blockElement = this.utils.getFirstBlockElementUp(selectedElement);
                            state = blockElement && blockElement.style.textAlign == alignDirection;
                        }
                        catch (ex) {
                            state = false;
                        }
                    }
                    else
                        state = false;
          
                    return state ? Telerik.Web.UI.Editor.CommandStates.On : Telerik.Web.UI.Editor.CommandStates.Off;
                }
                else
                    return Telerik.Web.UI.Editor.AlignCommand.callBaseMethod(this, "getState", [oWindow]);
            }
        </script>

    3. Place the following source code in the code behind ( ascx.cs ):

    protected void Page_Load(object sender, EventArgs e)
          {
              editControl.PreRender += new EventHandler(editControl_PreRender);
          }
      
          void editControl_PreRender(object sender, EventArgs e)
          {
              editControl.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertToXhtml);
          }

    4. Build your project
    5. Go to Administration -> Settings -> Advanced -> Controls -> Viewmap
    and set the Host type to Telerik.Sitefinity.Web.UI.Fields.HtmlField , the LayoutTemplatePath is for example:
    ~/HtmlFieldCustom.ascx
    6. Go to your project in Visual Studio, make a dummy change in your web.config file, save the changes and run the project.

    You can see a list of all filters in this demo and make some tests there.

    Regards,
    Stefani Tacheva
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  3. Cole
    Cole avatar
    15 posts
    Registered:
    28 May 2013
    30 Apr 2014 in reply to Stefani Tacheva
    Link to this post

    Hi Stefani,

    Thank you for your detailed response!  I added the code snippets per your directions however when I go to build the project, it fails.  If I remove the second code block (#3) from the ascx.cs file, the build succeeds. So it would appear that there is something wrong with that.  I tried adding that snippet to various places within the file and every time the build fails. Please advise.

    Also, in your direction #6, what does a "dummy change" mean?

    Thanks so much!
    Cole

    PS, I just added a screenshot of my Visual Studio build error(s).

     

  4. Cole
    Cole avatar
    15 posts
    Registered:
    28 May 2013
    03 May 2014 in reply to Cole
    Link to this post

    Hi again,  just checking in to see if you might be able to answer my questions above.

    Thanks,
    Cole

  5. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    03 May 2014 in reply to Cole
    Link to this post

    Cole, its invalid code...you cant have methods outside your class

     

  6. Cole
    Cole avatar
    15 posts
    Registered:
    28 May 2013
    05 May 2014 in reply to Steve
    Link to this post

    Hi Steve,

    Thanks for stepping in. However I'm not sure I understand what you're referring to exactly.  The code Stefani provided is invalid or how/where I'm trying to insert it is wrong?

  7. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    05 May 2014 in reply to Cole
    Link to this post

    See attached...you put the code outside the class...that's not valid C# code

  8. Cole
    Cole avatar
    15 posts
    Registered:
    28 May 2013
    05 May 2014 in reply to Steve
    Link to this post
    Ok, got it to build without errors but unfortunately Sitefinity is still inserting those pesky NBSP's.  Bummer.
  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    05 May 2014 in reply to Cole
    Link to this post
    Its not so much Sitefinity as the horrible RadEditor, perhaps try posting on their forum?
  10. Cole
    Cole avatar
    15 posts
    Registered:
    28 May 2013
    05 May 2014 in reply to Steve
    Link to this post
    Ha! Ok, will give that a shot next.  Thanks for your help!
  11. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    06 Dec 2016
    07 May 2014
    Link to this post
    Hello,

    I am not able to reproduce the problem after I have disabled the ConvertToXhtml filter. For your convenience please review the video demonstration recorded with Sitefinity 7.0.

    Please make sure that you have build the project and there are no errors, that you have created a new view map and that you have restarted your project.

    Regards,
    Stefani Tacheva
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  12. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    07 May 2014 in reply to Stefani Tacheva
    Link to this post

    @Stephani

      I have experienced flakeyness like this when I define a stylesheet to load inside the editor too...the contentareacss...not sure if that is the case though

  13. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    06 Dec 2016
    07 May 2014
    Link to this post
    Hello,

    Thank you Steve for sharing. Cole can try to remove the styles if there are any styles loaded in the editor and inform us of the results. A side note the purpose of the ConvertToXhtml filter is to validate the HTML tags and makes them XHTML.

    Regards,
    Stefani Tacheva
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  14. Cole
    Cole avatar
    15 posts
    Registered:
    28 May 2013
    07 May 2014 in reply to Stefani Tacheva
    Link to this post

    Hi Stefani,

    Ok, so I decided to run through everything from scratch and in doing so noticed that I had recently missed a step in your directions.  When the build failed initially, I never got to the part where you say :

    5. Go to Administration -> Settings -> Advanced -> Controls -> Viewmap
    and set the Host type to Telerik.Sitefinity.Web.UI.Fields.HtmlField , the LayoutTemplatePath is for example: ~/HtmlFieldCustom.ascx

    I had spent so much time trying to get it to build successfully, that once I did, I had forgotten to register it as specified above.  So end result... IT WORKS NOW! :) 

    Thank you and Steve both for your assistance!  Much appreciated!

    Cole

    PS, I'm attaching a screenshot of the ascx.cs file so that should someone else encounter this issue, they can view the file that was the most difficult to implement.  The screenshot shows how it is so that the build succeeds.
  15. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    06 Dec 2016
    08 May 2014
    Link to this post
    Hi,

    Glad to hear that everything is working on your side now. Thank you for sharing this information. 

    Regards,
    Stefani Tacheva
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
15 posts, 1 answered