0

These are valid HTML which is not working in TinyMCE4 as per our expectation

<p><span style='text-decoration: line-through'>Test</span></p> <span style="text-decoration: line-through;"><p>Test</p></span>

Here is the link of my fiddle . First HTML element is working fine but in second one strikethrough is not coming. Unable to undersatnd the reason.

Any lead or help will be appreciated. Thanks

Improve this question
1
  • Please note that your second example is not actually valid HTML. A span tag outside of a p tag is not valid HTML. If you run that code through an HTML validator it will show that the second example is not valid HTML. Commented Mar 6, 2018 at 16:53

3 Answers 3

Reset to default
1 
<span style="text-decoration: line-through;"><p>Test</p></span>

1) You have put the block level element(p) inside inline element(span), which is wrong by css specification.

2) You haven't added test rule for span[style], that's why it will fail test and remove that before rendering. updated fiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

<span style="text-decoration: line-through;">Test</span> You have removed p tag. But I want to make it work like <span style="text-decoration: line-through;"><p>Test</p></span> If you will parse in any HTML editor strike through should come.
Can I ask why ?
There are lots of p tags & other things. I want to put strike through to whole text by concatination span tag with style at begining
You can use div instead span, for wrapping. It will valid html. fiddle
1

I've never worked with TinyMCE before, but it appears that a <p> element won't inherit style from a surrounding <span>.

Another thing, the valid_elements for the second textarea is different from the first. I'd guess that valid_elements for the second textarea would need p[style] added to allow a styled paragraph.

Improve this answer

1 Comment

U can check my fiddle link. Its not working after changing it also. Fiddle LInk
1

Your second HTML example is invalid HTML - a span is an inline element and cannot wrap a block element like a p tag. If you look at the HTML in the second instance its actually been reduced to:

<p>Test</p>

Your valid elements still need to be valid HTML.

Improve this answer

3 Comments

If you will check in any HTML Editor both way is working. What is the solution if I want to make it work like second way i.e span should be surrounded by p tag
TinyMCE will work to make your content valid HTML - as your second example is invalid TinyMCE won't allow you to use that HTML. Browsers work very hard to still render invalid HTML so while a browser may render it correctly that does not make it valid/proper HTML.
Got it ! Thank you very much :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.