CKEditor wrapper : minimal layout

Hi. I’m trying to use the CKEditor wrapper pluggin to instanciate a minimal instance of the editor.

So far, I came up with a list of ckeditor plugins that I don’t need and here is my config code :

[code]
// set CKEditorConfig
ckEditorConfig = new CKEditorConfig();

    ckEditorConfig.useCompactTags();
    ckEditorConfig.disableElementsPath();
    ckEditorConfig.disableResizeEditor();

    // Remove unwanted pluggins (also remove the buttonsbars from the editor)
    ckEditorConfig.addToRemovePlugins("about");
    ckEditorConfig.addToRemovePlugins("bidi");
    ckEditorConfig.addToRemovePlugins("blockquote");
    //ckEditorConfig.addToRemovePlugins("clipboard");
    ckEditorConfig.addToRemovePlugins("colorbutton");
    ckEditorConfig.addToRemovePlugins("colordialog");
    ckEditorConfig.addToRemovePlugins("div");
    ckEditorConfig.addToRemovePlugins("filebrowser");
    ckEditorConfig.addToRemovePlugins("find");
    ckEditorConfig.addToRemovePlugins("font");
    ckEditorConfig.addToRemovePlugins("forms");
    ckEditorConfig.addToRemovePlugins("flash");
    ckEditorConfig.addToRemovePlugins("horizontalrule");
    ckEditorConfig.addToRemovePlugins("indent");
    ckEditorConfig.addToRemovePlugins("indentblock");
    ckEditorConfig.addToRemovePlugins("indentlist");
    ckEditorConfig.addToRemovePlugins("iframe");
    ckEditorConfig.addToRemovePlugins("image");
    ckEditorConfig.addToRemovePlugins("justify");
    ckEditorConfig.addToRemovePlugins("language");
    ckEditorConfig.addToRemovePlugins("link");
    //ckEditorConfig.addToRemovePlugins("list");
    ckEditorConfig.addToRemovePlugins("listblock");
    ckEditorConfig.addToRemovePlugins("liststyle");
    ckEditorConfig.addToRemovePlugins("maximize");
    ckEditorConfig.addToRemovePlugins("newpage");
    ckEditorConfig.addToRemovePlugins("pagebreak");
    //ckEditorConfig.addToRemovePlugins("pastefromword");
    //ckEditorConfig.addToRemovePlugins("pastetext");
    ckEditorConfig.addToRemovePlugins("popup");
    ckEditorConfig.addToRemovePlugins("preview");
    ckEditorConfig.addToRemovePlugins("print");
    ckEditorConfig.addToRemovePlugins("scayt");
    ckEditorConfig.addToRemovePlugins("selectall");
    ckEditorConfig.addToRemovePlugins("showblocks");
    ckEditorConfig.addToRemovePlugins("smiley");
    ckEditorConfig.addToRemovePlugins("sourcearea");
    ckEditorConfig.addToRemovePlugins("stylescombo");
    ckEditorConfig.addToRemovePlugins("table");
    ckEditorConfig.addToRemovePlugins("tabletools");
    ckEditorConfig.addToRemovePlugins("templates");
    ckEditorConfig.addToRemovePlugins("wsc");


    ckEditorConfig.disableSpellChecker();

[/code]The result (see attachment) shows indeed only the buttonbars I need but they are stacked in 3 different lines where they could perfectly fit on one line…

Can somebody point me towards how to have them in one line ? Also, is there a less painfull way to specify which buttonbars we want : removing each addon one by one seems suboptimal…

14015.png

You might consider something like this (taken from the source code in VaadinCKEditorUI.java):

        final CKEditorTextField ckEditorTextField2 = new CKEditorTextField();
        mainView.addComponent(ckEditorTextField2);
        
        CKEditorConfig config2 = new CKEditorConfig();
        config2.addCustomToolbarLine("{ items : ['Source','Styles','Bold','VaadinSave','-','Undo','Redo','-','NumberedList','BulletedList']
 }");
        config2.enableCtrlSWithVaadinSavePlugin();
        config2.addToRemovePlugins("scayt");
        ckEditorTextField2.setConfig(config2);
        ckEditorTextField2.setValue(editor2InitialValue);

Perfect. I managed to get the minimalistic look I wanted with this configuration :

// set CKEditorConfig
        ckEditorConfig = new CKEditorConfig();
        ckEditorConfig.disableElementsPath();
        ckEditorConfig.disableResizeEditor();
        ckEditorConfig.disableSpellChecker();
        ckEditorConfig.addCustomToolbarLine("{ items : ['Undo','Redo','-','Bold','Italic','-','SpecialChar','-','BulletedList','NumberedList','Format']
 }");
        ckEditorConfig.addToRemovePlugins("scayt");

Great job considering I just noted that I forgot to paste the other section also in the VaadinCKEditorUI.java source code that lists the menu features as best we know them:

        /* This is the full list as we know it in CKEditor 4.x
    [
    { name: 'document', items : [ 'Source','-','NewPage','Preview','Print','-','Templates' ]
 },
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ]
 },
    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ]
 },
    { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ]
 },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ]
 },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ]
 },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ]
 },
    { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ]
 },
    '/',
    { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ]
 },
    { name: 'colors', items : [ 'TextColor','BGColor' ]
 },
    { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ]
 }
    ]
         */

Thanks a lot; Actually, I used this CKeditor reference page :
http://ckeditor.com/latest/samples/plugins/toolbar/toolbar.html

Wow, Thank you David, worked fine for me!

I have another question related to the editor. I was thinking it would be easy to use the CKEditor Connector Addon for uploding images to my server. But afer spending hours i am really frustrated, don’t get it to work. I compiled the widgetset without problems and can get an instance of CkEdtior Connector, but that’s it, dont know what to do with the “Object”

Has someone an example code how to use the
CKEditor Connector
for uploading images with the CKEditor wrapper, or an alternative way???

I am using Vaadin 6.84 with grails 2.3.8. The CKeditor wrapper works fine, but i really don’t know who to use or “connect” the Connector to my wrapper.

Found
this
, but don’t know what “to do without an exsample”

Thanks in advance!
Otto

I’ve never used the ckeditor connector – it was unrelated to our code – and I understand it’s not been ported to Vaadin 7, so perhaps there’s no plan to maintain it either. But you can contact that add-on project perhaps and see if they have examples since it supposedly worked under Vaadin 6.

Thank you anyway… I will contact the add-on project.

If someone knows a simple way to use a filebrowser for Vaadin 6/ CKEditor please let me know…


solved
, work’s fine for me…