Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Joshua Crittenden 12 posts 122 karma points
    Jul 29, 2022 @ 19:23
    Joshua Crittenden
    0

    Rich Text Editor strips Font Awesome icon i tags and adding ValidElements is erased on build.

    Using Umbraco And Getting Started
    Umbraco 9

    The rich text editor strips out the i tags used for font awesome icons. I have tried adding/replacing the em/i tag in ValidElements within the appsettings-schema.json, but that line ValidElements line just reverts back to default when I rebuild the solution?

    Copy Link
  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Jul 29, 2022 @ 19:41
    Huw Reddick
    0

    You need to override it in your appsettings.json simply copy it into your settings file and make the change there. The schema file is not for editing

    Copy Link
  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Jul 30, 2022 @ 10:26
    Huw Reddick
    0

    You need to add to your appsettings.json like below

      "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "ValidElements": "+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],i[class|style],-strong/-b[class|style],-em[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],-h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],figure,figcaption",
        "CustomConfig": {
          "style_formats": "[{\"title\":\"Headers\",\"items\":[{\"title\":\"Heading h1\",\"block\":\"h1\"},{\"title\":\"Heading h2\",\"block\":\"h2\"},{\"title\":\"Heading h3\",\"block\":\"h3\"},{\"title\":\"Heading h4\",\"block\":\"h4\"},{\"title\":\"Heading h5\",\"block\":\"h5\"},{\"title\":\"Heading h6\",\"block\":\"h6\"}]}]"
        }
      }
    }
  }
    Copy Link
  • Joshua Crittenden 12 posts 122 karma points
    Aug 08, 2022 @ 13:12
    Joshua Crittenden
    0

    That allowed me to put the "i" tag in the RTE, but it added a red highlight period "." in the middle. Which appears to translate to a non-breaking space " " on the front-end. Which is not what I want. Even though I have the hash "#" in the front of "i"

    Copy Link
  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Aug 08, 2022 @ 15:15
    Huw Reddick
    0

    not certain what you mean, what # in front of the i?

    what exactly have you added to the rte code window?

    Copy Link
  • Joshua Crittenden 12 posts 122 karma points
    Aug 08, 2022 @ 15:50
    Joshua Crittenden
    0

    I've added this to the appSettings

    -em[class|style],#i[class|style]

    I saw that the "#" allows the i tag to be empty. But it is still adding a red period:

    enter image description here

    enter image description here

    Copy Link
  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Aug 08, 2022 @ 16:23
    Huw Reddick
    0

    I've never had to add the # and it quite happily accepts empty i tags <p>text <i class="fa-solid fa-test"></i></p>

    How are you adding the i tag? by hand or using a format link or something?

    Copy Link
  • Huw Reddick 1736 posts 6076 karma points MVP c-trib
    Aug 08, 2022 @ 16:27
    Huw Reddick
    100

    I just did a quick test, the nbsp is added because of the #, I just use +i[class|style]

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft