Strip out extra style tags from HTML content

Progress® Kendo UI® for Angular Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 23 Feb 2023 11:09 by ADMIN

Anthony

Created on: 18 Mar 2022 23:44

Category: Editor

Type: Feature Request

Strip out extra style tags from HTML content

Sometime but not always, the Editor will start to set the style attribute for each and every element, even though they are all the same.

Example Html:

<p>
  <span style="color: rgb(53, 53, 53); font-family: &quot;Open Sans&quot;, tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Bedroom One</span>
  <br style="color: rgb(53, 53, 53); font-family: &quot;Open Sans&quot;, tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
  <span style="color: rgb(53, 53, 53); font-family: &quot;Open Sans&quot;, tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">- Wrap, box and move non-affected contents and small furniture away from the affected area.</span>
  <br style="color: rgb(53, 53, 53); font-family: &quot;Open Sans&quot;, tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
  <span style="color: rgb(53, 53, 53); font-family: &quot;Open Sans&quot;, tahoma, arial, helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: -webkit-left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">- Carryout inventory and dispose of non-restorable contents and furniture.</span>
</p>

How can I avoid this duplication?

This is my current configuration for the Kendo Editor:

 <kendo-editor ctsStyle
          [style.height]="to.height"
          [formControl]="formControl"
          [class.is-valid]="showError"
          [formlyAttributes]="field"
          >

          <kendo-toolbar [overflow]="true">
            <kendo-toolbar-buttongroup>
              <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>
            <kendo-toolbar-buttongroup>
              <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
            <kendo-toolbar-buttongroup>
              <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>
              <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>
            </kendo-toolbar-buttongroup>
          </kendo-toolbar>

        </kendo-editor>

2 comments

ADMIN

Martin Bechev

Posted on: 23 Feb 2023 11:09

The feature request is declined due to a lack of information. Further details about the requested functionality were not provided.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN

Martin Bechev

Posted on: 25 Mar 2022 15:32

Hi Anthony,

Thank you for the provided code snippets.

Indeed appending style attribute to HTML elements is expected when customizing the default styling of a text. However, I am not sure how to reproduce the reported HTML code.

Please could I ask you for some more details on this case and the steps that were followed for producing such an HTML. This will help us to determine if this is an issue with the component or it is caused by some local configuration. Thank you in advance.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.