Size of format selection box in WYSIWYG

Help / Discuss
#1

Hi,
is it possible to extend the size of the format box? As the screenshot shows, it takes another click (every time) to identify the heading size (is it size 1 or 2? 3 or 4?), because it cannot be fully displayed in standard box size in German. The word might have a few chars to it, but this should be possible. The vertical bar cannot be moved.

image

#2

Hi. I don’t know if the size is controllable but a quick workaround would be to change the translation to be smaller. See Writing Internationalized XWiki Applications (XWiki.org)

I think these are the translation keys:

core.edit.wikiToolbar.h1=\u00DCberschrift 1
core.edit.wikiToolbar.h1text=\u00DCberschrift 1
core.edit.wikiToolbar.h2=\u00DCberschrift 2
core.edit.wikiToolbar.h2text=\u00DCberschrift 2
core.edit.wikiToolbar.h3=\u00DCberschrift 3
core.edit.wikiToolbar.h3text=\u00DCberschrift 3
core.edit.wikiToolbar.h4=\u00DCberschrift 4
core.edit.wikiToolbar.h4text=\u00DCberschrift 4
#3

Note that this would be a workaround since we need a proper solution implemented in XWiki. Feel free to raise a jira issue at CKEditor Integration - XWiki.org JIRA

1 Like
#4

Thanks @vmassol! I will take a look at your JIRA.

#5

Fyi. [CKEDITOR-473] Size of format selection box in WYSIWYG - XWiki.org JIRA

#6

Thanks. Could you indicate the version affected in jira please?

#7

Hi, see CKEDITOR-473, I cannot match with “13.5”

#8

You need to go to your wiki’s Extension Manager and check the version of the CKEditor integration used (you can search there for “ckeditor integration” in “installed extension”). Thanks

#9

Hi, CKEditor-Extension is Version 1.53.2 (also added to CKEDITOR-473)

#10

One way is to use a StyleSheetExtension. I add the StyleSheetExtension object to the Default XWiki Skin page(the page of the default skin) and add my styles there for now:
chrome_3Mt7IKBR1p

The two tutorials to be able to do this are:
Skin Application
Skin Extension Tutorial

In my case this style:

#cke_16_text {
  width: 200px;
}

Turns the Format box from:
chrome_R4QMLLYvK1

Into:
chrome_eIBzWVrcKZ

You can do even better:

#cke_16_text {
  width: auto;
}

This will autosize the respective span element down to the size of text depending on the selected value and the selected value will always be visible for you without having to click on it.