Log in or register to post comments
Last post
Lasse100's picture
Joined: 28/11/2012
Posts: 2
Color toolbar not showing in CKEditor 4

I just downloaded CKEditor 4 and have problems showing the textcolor button.

I currently use this config:

// Toolbar groups configuration.
config.toolbarGroups = [
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
    { name: 'links' },
    { name: 'insert' },
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
];

I've also tried to add 'TextColor' as in CKEditor 3 but it doesnt show up.

Any ideas?

apoco's picture
Joined: 07/12/2012
Posts: 13
Bump

Bump... I'm having the same issue.

sebstefanov's picture
Joined: 03/02/2012
Posts: 1456
Use CKBuilder: http:/

Use CKBuilder: http://ckeditor.com/builder

Select Color Button and Color Dialog on the right side and press the arrow in the middle to put the plugins to Selected Plugins section. Download.

Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, Google+, LinkedIn

If you think you found a bug in CKEditorread this!

Mik Muller's picture
Joined: 03/04/2013
Posts: 1
Align not showing

I'm using the following modified config.js and several things are not showing up, including align.

    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'tools' },
        { name: 'others' },
        { name: 'basicstyles', groups: [ 'basicstyles'] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
        { name: 'styles' },
        { name: 'colors' }
    ];

 

michaelmuller's picture
Joined: 11/03/2005
Posts: 10
Can't get rid of the auto-height

I installed a bunch of modules and though I've removed them from the configs and cleared my browser cache, as well as used different browsers that hadn't yet loaded the editor, AUTOHEIGHT is still enabled.  Not sure what I'm doing wrong.

Thanks for any advice.

-----------------------------------------------------------------------

config.js

/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here.
    // For the complete reference:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for a single toolbar row.
    config.toolbarGroups = [
        { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
        { name: 'forms' },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align' ] },
        { name: 'links' },
        { name: 'insert' },
        { name: 'styles' },
        { name: 'colors' },
        { name: 'tools' },
        { name: 'others' }
    ];

// ,
//        { name: 'about' }

    // The default plugins included in the basic setup define some buttons that
    // we don't want too have in a basic editor. We remove them here.
    config.removeButtons = 'Anchor,Underline,Subscript,Superscript';

    // Considering that the basic setup doesn't provide pasting cleanup features,
    // it's recommended to force everything to be plain text.
    config.forcePasteAsPlainText = false;

    // Let's have it basic on dialogs as well.
    config.removeDialogTabs = 'link:advanced';
};


--------------------------------------------------------------------

build-config.js


/**
 * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

/**
 * This file was added automatically by CKEditor builder.
 * You may re-use it at any time at http://ckeditor.com/builder to build CKEditor again.
 *
 * NOTE:
 *    This file is not used by CKEditor, you may remove it.
 *    Changing this file will not change your CKEditor configuration.
 */

var CKBUILDER_CONFIG = {
    skin: 'moono',
    preset: 'basic',
    ignore: [
        'dev',
        '.gitignore',
        '.gitattributes',
        'README.md',
        '.mailmap'
    ],
    plugins : {
        'basicstyles' : 1,
        'clipboard' : 1,
        'toolbar' : 1,
        'enterkey' : 1,
        'floatingspace' : 1,
        'indent' : 1,
        'link' : 1,
        'list' : 1,
        'pastetext' : 1,
        'undo' : 1,
        'dialog' : 1,
        'dialogui' : 1,
        'button' : 1,
        'fakeobjects' : 1,
        'blockquote' : 1,
        'panelbutton' : 1,
        'panel' : 1,
        'floatpanel' : 1,
        'colorbutton' : 1,
        'colordialog' : 1,
        'templates' : 1,
        'menu' : 1,
        'contextmenu' : 1,
        'div' : 1,
        'divarea' : 1,
        'resize' : 1,
        'find' : 1,
        'listblock' : 1,
        'richcombo' : 1,
        'format' : 1,
        'image' : 1,
        'symbol' : 1,
        'justify' : 1,
        'magicline' : 1,
        'liststyle' : 1,
        'pastefromword' : 1,
        'removeformat' : 1,
        'selectall' : 1,
        'showblocks' : 1,
        'showborders' : 1,
        'sourcearea' : 1,
        'menubutton' : 1,
        'scayt' : 1,
        'stylescombo' : 1,
        'stylesheetparser' : 1,
        'tab' : 1,
        'table' : 1,
        'tabletools' : 1,
        'tableresize' : 1,
        'wordcount' : 1,
        'horizontalrule' : 1,
        'popup' : 1,
        'elementspath' : 1
    },
    languages : {
        'en' : 1,
    }
};

michaelmuller's picture
Joined: 11/03/2005
Posts: 10
Also, though I tried both

Also, though I tried both symbol and specialCharacter initially, I removed specialCharacter and it still appears. As does element.

michaelmuller's picture
Joined: 11/03/2005
Posts: 10
Bump

Bump!

ckzacks's picture
Joined: 05/03/2012
Posts: 5
Solution found

I have solved this with the following steps:

  1. Download Color button plugin from: http://ckeditor.com/addon/colorbutton
  2. Download Panel Button plugin from: http://ckeditor.com/addon/panelbutton
  3. Extract both files and upload the folders to /ckeditor4/plugins/
  4. Add to your config.js the line:
    config.extraPlugins = 'colorbutton';

Demo: http://www.klaustukai.lt/ask

Hope that helps :)

reinmar's picture
Joined: 24/08/2012
Posts: 621
Thanks for sharing, but it's

Thanks for sharing, but it's not the recommended way ;). You can read more in the Installing Plugins guide.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

vincentwansink's picture
Joined: 07/07/2014
Posts: 4
Seriously?  One of the most

Seriously?  One of the most common buttons on any toolbar is not included with ckeditor?

reinmar's picture
Joined: 24/08/2012
Posts: 621
Seriously?  One of the most

Seriously?  One of the most common buttons on any toolbar is not included with ckeditor?

It is. In the full build (see presets comparison). But it's definitely not a plugin for standard build, because it introduces visual, unsemantical markup. Many developers don't want even to hear about this feature being enabled.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

vincentwansink's picture
Joined: 07/07/2014
Posts: 4
Oh, I see.  Going to download

Oh, I see.  Going to download the full build... 

Not sure what the point is of having the different download options though.  Why not just download all of it and disable the buttons you don't want?  Seems a lot simpler than downloading and installing plugins one at a time.

Anna's picture
Joined: 14/12/2010
Posts: 1493
Because your idea defeats the

Because your idea defeats the whole purpose of modular editor structure...

First of all, why download a bloated editor version just to use a margin of its features? It really makes no sense and is against best practices.

Second, out of the official plugins provided by us, not all of them work together as some things do not make sense in certain contexts.

Third, there is a huge number of community contributed plugins -- they are maintained by their developers who are responsible for their quality and compliance with other plugins. We have no control over that and these plugins are excluded from our official testing process when we are releasing new CKEditor versions.

Then, most people do not want to spend hours reading into documentation to check what is what, they just want a solution that works, so they have 3 different pre-packaged distributions to choose from.

And last but not least, whoever is not happy with our distribution packages can always go straight to CKBuilder and create a totally custom build to suit their needs. With a completely  automated process of building and easy upgrade path included. 

Hope these arguments sound convincing enough for you :)

Documentation Manager, CKSource

See CKEditor 4.x docs, CKEditor 3.x docs, CKFinder docs for help. CKEditor general FAQ is useful, too!
If you think you found a bug in CKEditor, read this!

vincentwansink's picture
Joined: 07/07/2014
Posts: 4
Those are good arguments and

Those are good arguments and I can see the logic, but I still would've chosen to just offer a single package if it were up to me.  Why would "bloat" be an issue?  If I disable the buttons I don't want then they don't get loaded.  I only load the stuff I want anyway.

Every other editor out there offers a single package and a simple way to enable/disable your buttons of choice.  That type of structure is simple to use, easy to understand and it is what people expect.  

Have you noticed how many people are online asking for help with enabling the color button (or other buttons) and getting confused and frustrated at the process of trying to get plugins to work?  It shouldn't be that difficult.  Just give people a complete package that is easy to use and manipulate and you will have a winner.

Of course, despite all my "complaining" I'm still going to use it because now that I have it figured out, it's the best editor available.  My point is just that I shouldn't have to sign up for a support forum just to get help in figuring it out.

reinmar's picture
Joined: 24/08/2012
Posts: 621
Those are good arguments and

Those are good arguments and I can see the logic, but I still would've chosen to just offer a single package if it were up to me.  Why would "bloat" be an issue?  If I disable the buttons I don't want then they don't get loaded.

It is not true. Disabled buttons are still loaded, because plugins that enable them are still included in the ckeditor.js file, their icons are still in the icons strip, etc. Disabling button can't optimize the build - it only hides the feature. That's why we have online builder and build scripts in the repository. Only at the build stage you can optimize the size of package.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+

vincentwansink's picture
Joined: 07/07/2014
Posts: 4
o.k.  Thanks for clarifying

o.k.  Thanks for clarifying that.

I think if I had noticed that there was a "build your own package" option I would've used that.