Hello
In my application, I created the jsComponent in which Ckeditor4 is rendered. The component itself is rendered correctly however it breaks the grid causing to render my component underneath others. It is probably caused by fact that the editor is added after the initialization of the whole screen.
I found out that after I resize the window everything replaces correctly and the example above looks fine. My question is: Is there any possibility to invoke the same event which is called on the window resize in StandardEditor class? This could fix my problem, but I’m still not sure if it is a good approach to this issue. Here is my code:
XML part:
<layout expand="editActions" spacing="true">
<form id="form" dataContainer="specialAdvertisementDc">
<column width="350px">
<textField id="titleField" property="title"/>
<textField id="subtitleField" property="subtitle"/>
<vbox height="100%" responsive="true" expand="ckeditor">
<jsComponent id="ckeditor"
initFunctionName="ckeditor_app"
width="1200" height="auto">
<dependencies>
<dependency path="webjar://ckeditor4:/ckeditor.js"/>
<dependency path="vaadin://ckeditor/ckeditor-connector.js"/>
</dependencies>
</jsComponent>
</vbox>
</column>
</form>
<hbox id="editActions" spacing="true">
<button action="windowCommitAndClose"/>
<button action="windowClose"/>
</hbox>
</layout>
js part:
ckeditor_app = function () {
var connector = this;
var element = connector.getElement();
element.innerHTML = "<textarea name=\"editor\" id=\"editor\"></textarea>";
connector.onStateChange = function () {
var state = connector.getState();
var data = state.data;
var editor = CKEDITOR.replace('editor',{
resize_enabled: true
});
}
}