rich text editor strips font awesome icon i tags and adding validelements is erased on build - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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 14 posts 124 karma points

Jul 29, 2022 @ 19:23

0

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

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 1929 posts 6717 karma points MVP 2x c-trib

Jul 29, 2022 @ 19:41

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 1929 posts 6717 karma points MVP 2x c-trib

Jul 30, 2022 @ 10:26

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 14 posts 124 karma points

Aug 08, 2022 @ 13:12

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 1929 posts 6717 karma points MVP 2x c-trib

Aug 08, 2022 @ 15:15

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 14 posts 124 karma points

Aug 08, 2022 @ 15:50

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:

Copy Link
Huw Reddick 1929 posts 6717 karma points MVP 2x c-trib

Aug 08, 2022 @ 16:23

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 1929 posts 6717 karma points MVP 2x c-trib

Aug 08, 2022 @ 16:27

100

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

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

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