Copied to clipboard

Flag this post as spam?

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


  • Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib
    Sep 12, 2012 @ 11:14
    Ismail Mayat
    0

    Rich text editor issue in 4.8.1

    Guys,

    I am running 4.8.1 and in the backend when using the rich text editor and inserting ul or ol the li items have html like

    <li><span style="color: #4c4c4c;"><span style="line-height: 20px;">dgf</span></span></li>

    Its injecting in spans and embedded style. When you publish this lot is rendering on the website. Anyone seen this before? Is it html tidy issue in umbracoSettings?

    Regards

    Ismail

  • Muhammad Humayun 49 posts 79 karma points
    Sep 12, 2012 @ 11:22
    Muhammad Humayun
    0

    It really sounds weird. yes it could be html tidy config thing. Have you tried it already and found no fixes?

    Also please check validElements in tinyMceConfig.config

  • Chriztian Steinmeier 2800 posts 8791 karma points MVP 8x admin c-trib
    Sep 12, 2012 @ 11:25
    Chriztian Steinmeier
    0

    Hi Ismail,

    That looks like what can easily happen when you paste from anything else than plain text...

    (And it can be very sticky and hard to get rid of if the HTML and "Cleanup styles" buttons are disabled)

    /Chriztian

  • Drew 165 posts 340 karma points
    Sep 12, 2012 @ 11:30
    Drew
    0

    Are the elements appearing only after you save the page? If so, then its the tidy process thats mangling the HTML.
    You'll probably have to turn off the tidy option in the config to stop it doing this.

    Looking at the valid elements config, you can't specify which nested elements are, or are not valid (e.g. do not allow a span inside an <li>) - only which attributes are allowed on each element.
    http://www.tinymce.com/wiki.php/Configuration:valid_elements  

    "-li[class|style]" in the default tinyMceConfig.config file states that an <li> element can have class and style attributes, and that empty elements should be self-closing. But there's no reference to which nested elements are valid.

    Here's a link to the issue with the standard TinyMCE install:
    http://martinsikora.com/how-to-make-tinymce-to-output-clean-html  

     

     

    Cheers,
    Drew 

  • Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib
    Sep 12, 2012 @ 11:31
    Ismail Mayat
    0

    Its not pasted from anything just using the editor to insert ul or ol and html tidy is turned on.

    Regards

    Ismail

  • Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib
    Sep 12, 2012 @ 12:28
    Ismail Mayat
    0

    Drew,

    It happens as soon as you add ul ol using the editor you view the html and its there. This seems to be recent issue as I have never come across this before with older versions of umbraco. I recall in 4.8 some rework has been done with tinymce. Can anyone else recreate the issue?

    Regards

    Ismail

  • Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib
    Sep 12, 2012 @ 14:20
    Ismail Mayat
    0

    Guys,

    Quick update on this. The rich text editor has an allowed stylesheet called editor.css when i take that out from the rich text editor settings then it all works fine. In the editor.css i have the following

    @import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,700);

    body {background-color: rgba(0,0,0,0.05)}

    p {color: #4c4c4c; font-family: Merriweather, serif; font-size: 14px; font-weight: normal; line-height: 20px; margin-bottom: 9px;}

    p a {color: #b33341; text-decoration: none;}

    p a:hover {text-decoration: underline;}

    li {color: #767676; font-family: Merriweather, serif; font-size: 14px; line-height: 30px;}










    /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */

    h3 {

    color: #000; font-family: Merriweather, serif; font-size: 24px; line-height: 27px; margin-bottom: 20px; margin-top: 30px; text-rendering: optimizelegibility;

    }


    h4 {

    color: #000; font-family: Merriweather, serif; font-size: 14px; font-weight: bold; line-height: 20px; margin-bottom: 0; margin-top: 20px; text-rendering: optimizelegibility;

    }

    for some weird reason this is inserting the extra bits into the li

     

     

  • Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib
    Sep 13, 2012 @ 14:01
    Ismail Mayat
    0

    Guys,

    I think I may have discovered a really obscure bug.

    I have found what is causing the issue.  Firstly it only happens in webkit browsers. If you edit content using IE or firefox the issue does not occur. Its being caused by the following statement in the editor.css

    li {color: #767676;  font-size: 14px; line-height: 30px;}

    basically any li style added causes this issue. I have tested in 481 and 490 and a really old site we have which is 4.0.2.1. If you have a css assigned to the rich text edit datatype and that css contains any li style then it will stick spans in.  Can you someone else confirm this occurs.

    Regards

     

    Ismail

  • Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib
    May 08, 2014 @ 13:31
    Alex Skrypnyk
    0

    Hi Ismail,

    We have the same problem. Is any solution for this issue ?

    Thanks, Alexandr

  • Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib
    May 08, 2014 @ 14:32
    Alex Skrypnyk
    0

    please add 'span' to:

    <invalidElements>font,span</invalidElements>
    

    in tinyMceConfig.config

Please Sign in or register to post replies

Write your reply to:

Draft