Editor is not rendered inside a table cell

[hacheni]

Hi,

I aml trying to use the editor in a table cell (td tag). However the editor is not visible. When I inspect the DOM tree, only a div is attached to the DOM. here is the DOM fragment

<td align="left" style="vertical-align: top; visibility: visible;">
<span class="k-field v-widget skipped k-field-skipped" style="visibility: visible;">
<div class="v-ckeditortextfield v-widget v-has-width v-has-height" id="3366" style="overflow: hidden; visibility: visible; width: 200px; height: 200px;">
</span>

Also I have this error in the console

SEVERE: (TypeError) : Cannot read property 'getEditor' of undefinedcom.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'getEditor' of undefined

Any idea ?

[OpenESignForms]

What version are you using of this tool and what version of vaadin, etc.? Perhaps share a code snippet that reproduces it.

[hacheni]

I use vaadin 7.7.8 and I use the tool with the version 7.12.2. Sharing the code is not so obvious because it is a small part in a big projet and it is too hard to isolate this editor part. But the context is that we add the editor in a single container component. And this single container component is wrapped to a flowpanel in client side and added to a HTML table cell.

I can put the par that creates the editor

CKEditorTextField   editor = new CKEditorTextField();
CKEditorConfig      config1 = new CKEditorConfig();

config1.useCompactTags();
config1.disableElementsPath();
config1.setResizeDir(CKEditorConfig.RESIZE_DIR.HORIZONTAL);
config1.setLanguage("fr");
config1.disableSpellChecker();
config1.setHeight("300px");
StringBuffer conf = new StringBuffer();
conf.append("{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },");
conf.append("{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },");
conf.append("{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },");
conf.append("'/',");
conf.append("{ name: 'styles', groups: [ 'styles' ] },");
conf.append("{ name: 'links', groups: [ 'links' ] },");
conf.append("{ name: 'colors', groups: [ 'colors' ] },");
conf.append("{ name: 'insert', groups: [ 'insert' ] },");
conf.append("{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },");
conf.append("{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },");
conf.append("{ name: 'forms', groups: [ 'forms' ] },");
conf.append("{ name: 'tools', groups: [ 'tools' ] },");
conf.append("'/',");
conf.append("{ name: 'others', groups: [ 'others' ] },");
conf.append("{ name: 'about', groups: [ 'about' ] }");
//config1.addCustomToolbarLine(conf.toString());
config1.addExtraConfig("toolbarGroups", "[" + conf.toString() + "]");
config1.addExtraConfig("removeButtons", "'Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Source,Save,Templates,NewPage,Preview,Print,Anchor,Flash,Smiley,PageBreak,Iframe,PasteFromWord,PasteText,Paste,ImageButton,Button,Select,Textarea,TextField,Radio,Checkbox,HiddenField,Form,Styles,About,Replace,SelectAll,RemoveFormat,CopyFormatting,ShowBlocks'");
editor.setHeight("440px");
editor.setConfig(config1);
editor.setWidth("600px");
setContent(editor);

But I noticed that if I attach the editor directly to the root panel, every thing works fine.

[OpenESignForms]

Hmm, not sure, but I doubt we'd spend any time here trying to replicate your problem without a clear example. Perhaps it's related to the flowpanel as we're not familiar with it. Have you tried putting a horizontal layout in the flowpanel's "field area" and then add the editor to it?

[hacheni]

When I tried to pout the editor directly in the table cell (td) the editor appears. But it does not appear when the editor is put into the span tag inside the td tag.

ck edtor inside td it works. but ck editor inside a span and the span inside the td it does not work.

[OpenESignForms]

Can you get rid of the SPAN tags? I'm not sure, but by default, the editor uses a DIV container with an IFRAME inside, so I don't know if that would work inside a SPAN. Anyway, you could query the vaadin forums and/or the ckeditor forums to see if they have any tips.