Hello everyone
Please excuse my english, it isn't my mother-tongue.
I'm developing a placeholder-widget. The widgets have two display-modes ("placeholder-name" and "value-preview") which can be toggled using a custom command. Example:
Widget in "placeholder-name"-Mode: [[student name]]
Widget in "value-preview"-Mode: Joe Miller
Some of the placeholders represent larger amounts of text that may cause a line-break. Even though the widget-definition contains "inline: true" and i use span's, the widgets wrapper has style "display:inline-block" and thus starts on a new line (which makes the 'preview' of the text look quite different from the actual html content). To clarify i added a screenshot (widget-inline-block.png)
Manually removing the mentioned style leads to the desired result in regards to line-breaks (see widget-inline-block2.png), but breaks the drag-handles :/
Is there any way i can get nice line-breaks inside an inline-widget without breaking the drag-handles?
Regards,
Pascal
If you don't need the drag
If you don't need the drag handle (widgetDefinition.draggable), you could override widgets styles so display:inline is used. But as far as I remember display:inline-block was needed for drag handle positioning.
If you need the drag handle, then perhaps some some CSS'es word-break, white-space or other property will help to reset display:inline-blocks behaviour to this of display:inline.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
Customizing cke_widget_inline
Thanks for your answer.
As I dont seem to be able to get the line-breaking using your mentioned css-attrs to work (but I'm definitely no expert on CSS :/) I guess I'll have to take the other route.
After setting draggable to false in the widget-definition, what's the cleanest way to change the wrappers style? I posted the HTML of the widget with its wrapper here: http://pastebin.com/8dcTbYqN
Adding the code (uses jquery)
if (this.wrapper && this.wrapper.$) { $(this.wrapper.$).css({ display: 'inline' }); }to the widget's init()-function seems to work so far - do you have a better way?
Are there any intentions about enhancing the inline-widgets line-breaks?
Regards,
Pascal
Unfortunately, I'm not a CSS
Unfortunately, I'm not a CSS expert myself too, so I was only guessing what may work.
I don't think that the core team will work on this issue, since its impact is small and if there's any solution, then that solution is CSS on which developers have full control. But pull requests on Github are greatly welcomed in such cases.
The recommended way to change widget styling would be like here - https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/widget/plugin.js#L25-L27 - so using CKEDITOR.addCss.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
addCss
But if I dont want to affect other widgets (only those of my plugin) then changing/re-adding the css class cke_widget_inline would be a bad idea, wouldn't it?
Adding another style on the widget itself won't help, because the widgets wrapper already has display:inline-block...
Or am I misunderstanding?
Thanks anyways :)
That's rigth - if you want to
That's rigth - if you want to affect only your specific widget then you can't use .cke_widget_inline class. In such case you need to add additional class to your widget.wrapper or set styles directly, just like you did. Though, you could do all that using CKEditor API ;).
BTW. if setting display:inline using inline styles didn't help, then the change in rendering may not be caused by this style.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
oh, sorry if I wasn't clear:
oh, sorry if I wasn't clear: setting display:inline on the wrapper helped :)