Bug Report T339295
Visible to All Users

HtmlEditor icons are not displayed in a custom Default theme if ToolbarMode is Menu

created 9 years ago

Hi,

I'm having problem in HtmlEditor when I'm using custom themes.
Is not being displayed correctly the Toolbar icons.

Attached is a test project to illustrate the problem.

What could be wrong?

Answers approved by DevExpress Support

created 9 years ago (modified 8 years ago)

We have fixed the issue described in this ticket and will include the fix in our next maintenance update. To apply this solution before the official update, request a hotfix by clicking the corresponding link for product versions you require.

Note: Hotfixes may be unavailable for beta versions and updates that are about to be released.

Additional information:

We have fixed the issue and introduced the following behavior. Menu icons are set up using the HtmlEditorImages.MenuIconSet  property. For the Default theme, it's set to MenuIconSetType.NotSet (no icons are displayed) in the .skin file. When you're creating a custom theme based on the Default theme, this property isn't changed either. We don't automatically change it in order to provide you with the capability to define a custom set of images. So, you need to manually set this property to a required value. To enable icons in this case, the following steps are required:

  1. Load a required icon set using the ExtensionsFactory.GetStyleSheets method:
C#
@Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor, MenuIconSet = DevExpress.Web.MenuIconSetType.Colored } )
  1. Set up the MenuIconSet property for the HtmlEditorSettings object:
C#
@Html.DevExpress().HtmlEditor(settings => { settings.Name = "he"; settings.Images.MenuIconSet = MenuIconSetType.Colored; ... }).GetHtml()

As an alternative solution, you can set up this property at the theme level (see the attached image). In this case, there is no need to perform additional registrations.

If you decide to use different icon sets for different HtmlEditors, it will be necessary to register additional icon sets using the ExtensionsFactory.GetStyleSheets method, as shown at step 1 and assign a delegate method to the PreRender property:

C#
@Html.DevExpress().HtmlEditor(settings => { settings.Name = "he"; .... settings.PreRender = (s,e) =>{ ((MVCxHtmlEditor)s).Images.MenuIconSet = MenuIconSetType.Colored; }; ... }).GetHtml()

Attached is a test sample illustrating these ideas. Note that these changes will have effect only with the applied hot fix.

    Comments (1)

      It's working, thanks

      created 9 years ago

      Hi,

      Thank you for your sample. I see the problem. It looks like you have created this custom theme by using the ASPxThemeBuilder from one of our previous versions. For instance, review the KA18887 - How to update custom themes after upgrading a project to a new version using ASPxThemeBuilder KB article, where we have described this scenario. Once I created a custom theme by using the latest ASPxThemeBuilder version (15.2.4), everything started to operate correctly. Attached is the modified sample version and a screencast. Should you need further clarification, feel free to ask. I will be happy to help you.

      Thanks,
      Alessandro.

        Show previous comments (4)

          Hi,
          We still continue with the issue, we updated to the lastest version (15.2.5).
          We make a new project from scratch with the last version, and we still have the problem of missing icons on Toolbar in HtmlEditor.
          What can we do resolve the problem?

          Artem (DevExpress Support) 9 years ago

            Thanks for the clarification. I see that the problem still persists if ToolbarMode is Menu. This behavior looks incorrect and I've forwarded it to our R&D team for further research.  We'll post our results here. Please bear with us.
            In the meantime, I suggest using Ribbon as a toolbar.

            C#
            settings.ToolbarMode = HtmlEditorToolbarMode.Ribbon;

            Thanks,
            Artem

            Artem (DevExpress Support) 9 years ago

              We have fixed the issue and introduced the following behavior. Menu icons are set up using the HtmlEditorImages.MenuIconSet  property. For the Default theme, it's set to MenuIconSetType.NotSet (no icons are displayed) in the .skin file. When you're creating a custom theme based on the Default theme, this property isn't changed either. We don't automatically change it in order to provide you with the capability to define a custom set of images. So, you need to manually set this property to a required value. To enable icons in this case, the following steps are required:

              1. Load a required icon set using the ExtensionsFactory.GetStyleSheets method:
              C#
              @Html.DevExpress().GetStyleSheets( new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor, MenuIconSet = DevExpress.Web.MenuIconSetType.Colored } )
              1. Set up the MenuIconSet property for the HtmlEditorSettings object:
              C#
              @Html.DevExpress().HtmlEditor(settings => { settings.Name = "he"; settings.Images.MenuIconSet = MenuIconSetType.Colored; ... }).GetHtml()

              As an alternative solution, you can set up this property at the theme level (see the image). In this case, there is no need to perform additional registrations.

              If you decide to use different icon sets for different HtmlEditors, it will be necessary to register additional icon sets using the ExtensionsFactory.GetStyleSheets method, as shown at step 1 and assign a delegate method to the PreRender property:

              C#
              @Html.DevExpress().HtmlEditor(settings => { settings.Name = "he"; settings.PreRender = (s,e) =>{ ((MVCxHtmlEditor)s).Images.MenuIconSet = MenuIconSetType.Colored }; ... }).GetHtml()

              Attached is a test sample illustrating these ideas. Note that these changes will have effect only with the applied hot fix.

              Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

              Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.