Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor is not rendered inside a table cell #66

Open
hacheni opened this issue Aug 4, 2017 · 5 comments
Open

Editor is not rendered inside a table cell #66

hacheni opened this issue Aug 4, 2017 · 5 comments

Comments

@hacheni
Copy link

hacheni commented Aug 4, 2017

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
Copy link
Owner

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

@hacheni
Copy link
Author

hacheni commented Aug 4, 2017

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
Copy link
Owner

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
Copy link
Author

hacheni commented Aug 4, 2017

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
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants