Missing html tags (wysiwyg editor issue)

Posted by Community Admin on 30-Mar-2013 00:00

Hello Telerik,

I would like to report of very annoying bug (or maybe feature) that exists in SF for a long time.

Sometimes your html in content block can be drastically changed if you created it by copying plain html in wysiwyg editor.

However this issue appears not on first time publishing. When you just create new content block - it uses html exactly as you copied it into editor. But when you try to edit existing content block - you are risking to lose some tags with css classes that could be crucial for markup and javascripts.

To explain what exactly I mean:
If you copy html below in wysiwyg editor (using editor's plain html mode)

<span class="some_class">

<span class="another_class">

<span class="and_class_again">

Some text

</span>

Then save (publish) the page and open content block again for edit, you'll probably will see absolutely different html code there:

<span class="another_class">Some text</span>

I suppose the reason is some html validator that checks html and
corrects it for the greater justice. But on practice it leads to many issues because
often developers just HAVE to use markup provided by someone who uses that kind of "invalid"
html.

Of course CMS should help developer to create his product faster correcting his errors. But I would prefer if CMS knows who is in charge and doesn't touch my html, especially if it could lead to removed tags. Probably many developers agree with me.

Thanks,
Serge G

Posted by Community Admin on 03-Apr-2013 00:00

Hi Serge,

This behavior comes from content filters, that are applied to the RadEditor, used by our HtmlField.

http://www.telerik.com/help/aspnet-ajax/editor-content-filters.html

To apply or disable content filters map the template of HTML field which is used in all instances of RadEditor in sitefinity and configure content filters from the template code behind.
To do so follow these steps.
1. Create .ascx file in your poject and paste the template of Sitefinity html field. (attach code behind to the template to configure content filters in it)

<%@ Control Language="C#" %>

<%@ 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 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 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>

2. Map the template from Administration->Settings->Advanced->Controls->ViewMap crete new
Host: Telerik.Sitefinity.Web.UI.Fields.HtmlField
Layout: Relative path to to the template created in step 1 ~/HtmlField.ascx

Restart the application and the template will be in use
For the editor disable content filters on the Prerender event

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.OptimizeSpans);

Kind regards,
Jen Peleva
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 03-Apr-2013 00:00

Thanks for your help, Jen, I appreciate it!
I'll try this solution. Looks simple and effective.

Best regards,
Serge G

This thread is closed

All Replies