Opened 7 years ago

Last modified 7 years 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 Jakub Ś 7 years ago.

Download all attachments as: .zip

Change History (7)

comment:1 Changed 7 years ago by Jakub Ś

Resolution: invalid
Status: newclosed
Version: 4.6.2

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 years 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 years ago by mdprw (previous) (diff)

comment:3 Changed 7 years ago by 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.

Changed 7 years ago by Jakub Ś

Attachment: inline-block.png added

comment:4 Changed 7 years ago by Jakub Ś

Resolution: invalid
Status: closedreopened

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 7 years ago by Jakub Ś

Status: reopenedconfirmed
Version: 4.3

comment:6 Changed 7 years ago by mdprw

Thanks, the proposed solution works great

Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy