Opened 7 weeks ago

Last modified 6 weeks ago

#16946 confirmed New Feature

Underline and Strikethrough should work in placeholder

Reported by: mdprw Owned by:
Priority: Normal Milestone:
Component: UI : Widgets Version: 4.3
Keywords: Cc:

Description

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

Attachments (1)

inline-block.png (59.2 KB) - added by j.swiderski 6 weeks ago.

Download all attachments as: .zip

Change History (7)

comment:1 Changed 7 weeks ago by j.swiderski

  • Resolution set to invalid
  • Status changed from new to closed
  • Version 4.6.2 deleted

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.

comment:2 Changed 7 weeks ago by 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. I'm using placeholders to create templates that are replaced with values later, so its useful to see them styled accordingly as the final replaced text will look. bold actually works.

Last edited 7 weeks ago by mdprw (previous) (diff)

comment:3 Changed 6 weeks ago by j.swiderski

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.

Changed 6 weeks ago by j.swiderski

comment:4 Changed 6 weeks ago by j.swiderski

  • Resolution invalid deleted
  • Status changed from closed to reopened

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;
}

comment:5 Changed 6 weeks ago by j.swiderski

  • Status changed from reopened to confirmed
  • Version set to 4.3

comment:6 Changed 6 weeks ago by mdprw

Thanks, the proposed solution works great

Note: See TracTickets for help on using tickets.
© 2003 – 2016 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy