Underline and Strikethrough should work in placeholder

[mdprw]

Steps to reproduce

1. Go to "placeholder" sample page

   http://sdk.ckeditor.com/samples/placeholder.html
   

2. paste the following source code:

   Dear [[Customer Name]],
   

3. Select the whole text and apply "Underline" or "Strikethrough"

Expected result

The whole text should be underlined.

Actual result

Only the text that is not in placeholder gets underlined.

Other details (browser, OS, CKEditor version, installed plugins)

Windows 7 Browser: Firefox 52.0.2 CKEditor: 4.6.2

[Jakub Ś]

If you try ​http://sdk.ckeditor.com/samples/captionedimage.html you will notice it is possible because image2 has its own contentarea for caption which allows bold, strike etc. It allows all basic styles 'br em strong sub sup u s; a[!href,target].

The place holder on the other hand is a completely different widget. It has no content area. It only displays immutable text which can be modified with the help of the dialog. What is more, widgets in general are immutable structures which can't be modified by outside styling and this is what we would be doing in this case. Please see: ​http://docs.ckeditor.com/#!/guide/dev_widgets.

[mdprw]

Thanks for your reply. I don't know if I'm missing something, but according to your reply strong shouldn't work on placeholders but it does.

[Jakub Ś]

No, you are not missing anything. I guess I didn't check this properly enough.
All the inline styles are not applied inside the placeholder but outside of it and from what I can see, browsers renders bold and italic bot not underline and strike.

This is caused by this class:

.cke_widget_inline {
   display: inline-block;
}

If it is disabled or changed to

.cke_widget_inline {
   display: inline;
}

both of these styles will be available.

I will need to investigate this issue further.

[Jakub Ś]

Ok, so from what I have found online:
​http://stackoverflow.com/questions/30524356/css-amazingly-strikethrough-not-working-on-child-displayinline-block-div
​https://www.w3.org/TR/CSS2/text.html#propdef-text-decoration it looks like text-decoration can't be applied to inline-block elements.

We could use:

.cke_widget_inline {
   display: inline-block;
   text-decoration: inherit;
}

but this will only work on first element which wraps the place folder, so if you have placeholder wrapped in s and u, only the inner s will be visible on placeholder.

The class .cke_widget_inline is general and used e.g. with image2 plugin thus we can't chnage it but we can use class dedicated to placeholder - .cke_widget_placeholder and from what I have checked it below code will work:

.cke_widget_placeholder {
    display: inline;
}

[mdprw]

Thanks, the proposed solution works great