Copied to clipboard

Flag this post as spam?

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


  • Vijay 13 posts 83 karma points
    Mar 09, 2023 @ 07:44
    Vijay
    0

    How to add styles directly in Rich Text Editor in Umbraco 10

    Hi all,

    I'm tring to write styles directly in the content of Rich text Editor in Umbraco 10, but that was not working and after writing style and saving it, the whole RTE getting white and when opening the source code all content and styles are dissapearing.I've searched the forums and haven't found a solution that could fix the issue for me. Can anyone help me?

  • Huw Reddick 1702 posts 5999 karma points MVP c-trib
    Mar 09, 2023 @ 09:41
    Huw Reddick
    0

    Hi Vijay,

    What exactly do you mean by

    I'm tring to write styles directly in the content of Rich text Editor

  • Vijay 13 posts 83 karma points
    Mar 09, 2023 @ 09:52
    Vijay
    0

    enter image description here

    Need to write styles like this individually in content itself

  • Nik 1591 posts 7148 karma points MVP 6x c-trib
    Mar 09, 2023 @ 10:07
    Nik
    0

    Hi Vijay,

    I don't believe the Style tag is allowed by default in TinyMCE within Umbraco. So in order to allow it you'd have to update the "Valid Elements" configuration option.

    You can see how to do that here: https://docs.umbraco.com/umbraco-cms/reference/configuration/richtexteditorsettings#valid-elements

    You'll then need to make sure your editor has the Source View enabled so you can get to the source input to add them.

    Thanks

    Nik

  • Huw Reddick 1702 posts 5999 karma points MVP c-trib
    Mar 09, 2023 @ 10:07
    Huw Reddick
    0

    Hi Vijay,

    You really shouldn't be adding style declartions to your RTE content, you should be defining it in a proper stylesheet and then assign the classes to your RTE elements.

    If you think you must do it this way (I would not recomend it) then you will need to add the style tag to the allowed elements in your appsettings.json file

      "RichTextEditor": {
        "ValidElements": "+div[tabindex],+i[class|style],+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],-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],-span[class|align|style|tabindex],-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",
    
        }
      },
    

    To allow the style element you would add 'style' to this list of valid elements,

      "RichTextEditor": {
        "ValidElements": "style,+div[tabindex],+i[class|style],+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],-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],-span[class|align|style|tabindex],-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",
    
        }
      },
    

    however like I said I would not recomend doing this, it is really not good practice.

  • Huw Reddick 1702 posts 5999 karma points MVP c-trib
    Mar 09, 2023 @ 10:16
    Huw Reddick
    0

    you may also need to set SanitizeTinyMce to false in appsettings file

      "Global": {
        .......,
        "SanitizeTinyMce": false
      },
    
  • Vijay 13 posts 83 karma points
    Mar 09, 2023 @ 12:25
    Vijay
    0

    Added it, but still not working. Could you please share any screenshots if possible which you added it in any of your projects and if it is working.

  • Huw Reddick 1702 posts 5999 karma points MVP c-trib
    Mar 09, 2023 @ 12:39
    Huw Reddick
    0

    I haven't added it to any projects, as I said it is not something that I would recommend doing, you really should not be adding style tags in your content

  • Huw Reddick 1702 posts 5999 karma points MVP c-trib
    Mar 09, 2023 @ 12:53
    Huw Reddick
    0

    style tags belong in the <head> section of your document you really should not be adding them to your content.

    What is the reason you are attempting to do this?

Please Sign in or register to post replies

Write your reply to:

Draft