kunstmaan/bootstrapck4-skin

A Bootstrap inspired skin for CKeditor4

bootstrapck4-skin's Issues

Firefox-only issue after upgrade

I've run into a strange issue with Firefox after upgrading BootstrapCK.

We have an application using bootstrapck which was originally built using the ckeditor builder. That works fine, but the icon set does not include the "save" icon.

So I've upgraded our bootstrapck skin folder ("Just skin please" instructions). That works great under Chrome and Safari, but under Firefox the icons are ... well.... just wrong.

Here's what I get under Chrome, which is correct:

Under Firefox:

Notice, for example the Bold, Italic, Underline icons are: question mark, flag, and strange paragraph marker symbol.

I assumed this might be just incorrect caching of the icon.png, but I've cleared the cache out, and no difference.

The odd thing is that the demo site renders perfectly well for me in Firefox! But I notice that site appears to load each icon individually...

...maybe.

Do you have any idea for what might be going wrong for me with Firefox? Any suggestions would be much appreciated.

This is with ckeditor 4.5.6.

Make source view wrap-text?

Is there a reason this skin sets the source view to have white-space:pre? (https://github.com/Kunstmaan/BootstrapCK4-Skin/blob/master/skins/bootstrapck/scss/components/_presets.scss#L27) I believe the typical behavior is to have this content wrap, which could be solved by having the style either absent or white-space:normal

.cke_combo_button bottom margin causes toolbar that wraps to display incorrectly

Line 61 of https://github.com/Kunstmaan/BootstrapCK4-Skin/blob/81648ed28a83f20ff1c5fce3ba95c7a8c17d802a/skins/bootstrapck-dev/scss/components/_richcombo.scss

57: /* The container for combo text and arrow. */
58: .cke_combo_button {
59: display: inline-block;
60: float: left;
61: margin: 0 6px 5px 0;

should be:
margin: 0 6px 3px 0;

The extra two pixels causes anything under to be shifted to the right leaving a hole in the second row when the toolbar wraps.

I would fork and do a pull request but I don't do scss.

a work around is to have this somewhere in your app:

.cke_combo_button {
margin: 0 6px 3px 0 !important;
}

Thanks

Bootstrap 4?

When will you support a bootstrap 4 skin? 😄

HiDpi renders incorrectly on some high resolution screens

The editor buttons work fine on my computer's lower resolution monitor (loads icons.png) and also work fine on my ipad and iphone (loads icons_hidpi.png) however the icons all load incorrectly on my MacBook Pro's Retina display. See screenshot:

It looks to me that the HiDPi icons are being loaded but they are being positioned using the regular resolution specifications.

Minimal install

Hello, love the theme!

It would be nice to have a specification of a truly minimal install to not clutter our code repositories.

For example, it seems that we can delete most files and that these files are sufficient:
dialog.css
dialog_ie.css
dialog_ie7.css
dialog_ie8.css
dialog_iequirks.css
dialog_opera.css
editor.css
editor_gecko.css
editor_ie.css
editor_ie7.css
editor_ie8.css
editor_iequirks.css
icons.png
icons_hidpi.png
skin.js

Please let me know if I have deleted too many files or if there are others that could be deleted.

Buttons alignement problem

Hi,
I'm having this issue:

the only way I could find to fix the float left is add "height: 30px" to ".cke_toolbar", but I don't think this is the right thing to do, do you have any suggestion?

Thanks

Disable unsupported chameleon feature

The issue occurs on editor with builtin moono theme and with defined uiColor setting (even empty). Editor get partially styled by moono.
This is because moono defines CKEDITOR.skin.chameleon function that adds some css. In fact this is a CKEditor issue (disabled skin should not inject its css).
uiColor setting is added by CMS (in my case).
So, we need to override CKEDITOR.skin.chameleon in skin.js:

CKEDITOR.skin.chameleon = function(){
    return '';
};

Bower package?

It would be really great if this was available as a bower package, so it can be installed with ck using bower.

BootstrapCK4 Skin does not include CSS styles for CKSource's 1st party Notification plugin pop-up

Current ommision in BootstrapCK4 Skin that if you use any plugin or feature that causes display of messages via CKSource's 1st party Notification plugin http://ckeditor.com/addon/notification then the messages will appear as unstyled and often not visible text (until/unless the user drags their cursor over to cause selection highlight)

Everything appears visually fine if keeping with default Moono Skin, and the styles associated with that skin would be quite fine to use as is within BootstrapCK4.

At the moment we've worked around this issue by manually adding the extra CSS styles from Moono into our site's custom CSS. But would be good for those few extra styles to be added to Bootstrap Skin default CSS given Notification is a 1st party addon for CKEditor.

See bottom 'Screenshots' carousel on http://ckeditor.com/addon/notification for current Moono default CSS styling of possible Success, Info and Warning nofication pop-ups.