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?
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.
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?
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
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.
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
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
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
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
Its not pasted from anything just using the editor to insert ul or ol and html tidy is turned on.
Regards
Ismail
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
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
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
Hi Ismail,
We have the same problem. Is any solution for this issue ?
Thanks, Alexandr
please add 'span' to:
in tinyMceConfig.config
is working on a reply...