The CKEditor docs mention item by item toolbar configuration here, but where is a list of the names of the buttons in the different groups?
There is a similar question here, but the answer is for a previous version of CKEditor. Some of the button names do not work.
You can check the toolbar sample in your CKEditor package.
There, you've got listed all buttons and all toolbar groups (since CKEditor 4 there are two ways of setting toolbar layout) that are enabled in your CKEditor build.
If you don't see a button that you remembered from CKEditor 3, check if it's available in your CKEditor package version (there are now 3 - basic, std and full). Some plugins are not included in any of these builds and you have to create your own.
PS. If you're using standard or basic build check config.js file - some buttons like Underline are removed in these presets by setting config.removeButtons.
Here is a nice list of button names:
Complete List of Toolbar Items for CKEditor
items
"Source"
"Save"
"NewPage"
"DocProps"
"Preview"
"Print"
"Templates"
"document"
items
"Cut"
"Copy"
"Paste"
"PasteText"
"PasteFromWord"
"Undo"
"Redo"
items
"Find"
"Replace"
"SelectAll"
"Scayt"
items
"Form"
"Checkbox"
"Radio"
"TextField"
"Textarea"
"Select"
"Button"
"ImageButton"
"HiddenField"
items
"Bold"
"Italic"
"Underline"
"Strike"
"Subscript"
"Superscript"
"RemoveFormat"
items
"NumberedList"
"BulletedList"
"Outdent"
"Indent"
"Blockquote"
"CreateDiv"
"JustifyLeft"
"JustifyCenter"
"JustifyRight"
"JustifyBlock"
"BidiLtr"
"BidiRtl"
items
"Link"
"Unlink"
"Anchor"
items
"CreatePlaceholder"
"Image"
"Flash"
"Table"
"HorizontalRule"
"Smiley"
"SpecialChar"
"PageBreak"
"Iframe"
"InsertPre"
items
"Styles"
"Format"
"Font"
"FontSize"
items
"TextColor"
"BGColor"
items
"UIColor"
"Maximize"
"ShowBlocks"
items
"button1"
"button2"
"button3"
"oembed"
"MediaEmbed"
items
"About"
Simply generate your own configaration in visual CKEditor Toolbar Configurator
Generated an example:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Form,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,BidiLtr,BidiRtl,Language,Styles,Font,Smiley,CreateDiv,Checkbox,Scayt,NewPage,About';
};
Underline option is available, but by default it's not visible. You need to remove it from below line in config.js file.
config.removeButtons = 'Underline,Subscript,Superscript';
Related
Spell Check is not working in my CKEditor. I tried disableNativeSpellChecker = false but in vain. Here is my config.js. My CKEditor version is 4.5.6 Any idea ?
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.disableNativeSpellChecker = true;
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection'] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Use line below for line break in toolbar
// '/',
// Html encode ouput
config.htmlEncodeOutput = true;
config.removePlugins = 'elementspath,maximize,scayt';
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Strike,Subscript,Superscript,Source,About,Styles,Blockquote,Link,Unlink,Anchor,Image,Table,HorizontalRule,SpecialChar';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
};
Integrated the Browser Spell check by adding the following code to config.js
config.disableNativeSpellChecker = false;
config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu';
Hold down the SHIFT key then click the right mouse button on the text.
At this point the usual context menu with options will be displayed.
On Linux you can use either the SHIFT or the CONTROL keys.
On Mac you can use either the SHIFT or the COMMAND keys.
Here are screenshots WITH and WITHOUT modifier key.
I am using CKEditor (v. 4.4.7) and am trying to include the underline feature. The full package has more buttons than my users need and the standard package doesn't include this button. I used the builder to customize. I started with the standard page and added (or maybe it was already there) "Basic Styles", which in the description says:
"This plugin adds the following basic formatting commands to the editor:
Bold
Italic
Underline
Strikethrough
Subscript
Superscript
"
When I run the editor in my code, I'm getting only Bold, Italic and Strikethrough. No underline (or subscript or superscript, for that matter). What do I need to do in order to get the other function(s)?
My config file:
/**
* #license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
};
Thanks.
Did you try to read the config that you pasted? It says:
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
I hope that it's enough for the answer ;).
I'm using CKeditor in my web page. And I want to set different presets in the same page. For example, I want to use the Standard CKeditor in one textarea and the Basic in another one...
Does anybody know how can I do it??
Thank you very much!
You need to download CKEditor version which contains all plugins which you want to use in the most advanced configuration and then "trim" it down when initialising editor which you want to be more limited.
For instance, if you want one editor with standard preset and one with basic, you should download editor with standard preset, because it will have all plugins needed by basic preset. Then initialise one editor without any additional config:
CKEDITOR.replace( 'editor-std' );
And second one with options which are used by basic editor:
CKEDITOR.replace( 'editor-basic', {
// Plugins used by basic preset.
plugins: 'about,basicstyles,clipboard,floatingspace,list,indentlist,enterkey,entities,link,toolbar,undo,wysiwygarea',
// The toolbar groups arrangement, optimized for a single toolbar row.
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', 'bidi' ] },
{ 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
// are not needed in a basic editor. They are removed here.
config.removeButtons: 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript',
// Dialog windows are also simplified.
config.removeDialogTabs: 'link:advanced'
} );
You can also save this config in a file similar to config.js which you'll find in CKEditor main directory and use it this way:
CKEDITOR.replace( 'editor-basic', { customConfig: 'config-basic.js' } );
Where to get presets' configs?
There are no configs ready to use, but you can find all necessary settings in the CKEditor presets repository. As you'll find I used basic-ckeditor-config.js file and extended it with plugins from basic-build-config.js.
I 'd like to ask this small but very important question i got: (I Downloaded CKeditor 4.3.2, and believe me i've been looking for this over the internet for ssooooooo long without any success.)
I've tried to show the 'Smiley' icon in my toolbar, but it doesn't show it, and that happens with some others like 'Save', 'Print', 'NewPage' for instance and i don't know why. Also when i insert a link of a video isn't show either in order people watch it once is posted... Everything works just fine with the others but not with these i just mentioned! Please! thanks for reply!
PS: I've found in some forums that icons in these version 4.3.2 have change theirs names, u think that is the reason?
here is my code:
CKEDITOR.editorConfig = function( config )
{
uiColor: '#14B8C4',
config.toolbar = 'Full';
`config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-', 'Save','NewPage','DocProps','Preview','Print','-','Templates', 'Emoticons' ] },//solo Source
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo', 'clipboard' ] },//BIen
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt', 'TextColor' ] },//Solo SpellChecker
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', //nada
'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },//Todas
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },//Todas hasta Bloquiote
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] }, //Todas
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule',"Smiley",'SpecialChar','PageBreak','Iframe' ] }, //Falta flash, smiley, ifame
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }, //ninguno
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-' ] }
];
//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', 'bidi']},
{ name: 'links'},
{ name: 'insert'},
'/',
{ name: 'styles'},
{ name: 'colors'},
{ name: 'tools'},
{ name: 'others'},
];
};
`
Finally I got the solution which was very simple. But, before I tell you the solution I'll tell you the reason:
CKEditor has been updated. So, some plugins' names have been changed, you're not going to find them with the same name as you used to.
Solution is: go to Download CKEditor with plugins selected by you, and there you're going to find three different packages to download and below there's another one: "Or let me customize my CKEditor" click on it and "download & customize editor".
After that you'll be redirected to another page on which you'll see two columns, the left one shows you all the plugins that come with the package by default (you can also eliminate some plugins if you don't want them) and the right column shows you some plugins that can be added to the package().
Hope you find this solution helpful.
Do you have the plugins installed to support those missing buttons?
I was seeing that in the CKeditor we've been using for a while now, all of the sudden, it lost some of it's toolbar buttons.
They were configured to be there, yet did not display. Buttons like TextColor, the Justifieds, etc..
What our problem turned out to be was that we were missing the plugins for these buttons. We must have switched from a compilation that included some plugins to the base code or something.
I am showing a ckeditor in my webpage using class="ckeditor" way. How can I configure my ckeditor to just show a basic toolbar. Here I found the sample page for showing a basic toolbar but not getting from documentation how to show that.
http://ckeditor.com/demo
check the Custom toolbar tab and see the first sample which has a very basic type of toolbar, how can I show it?
here is my code
<body>
<textarea class="ckeditor" id="description" rows="5" cols="15"></textarea>
</body>
I want to show basic toolbar for all instances of ckeditor of my website.
If you use Basic it will show all Toolbar, So use this
CKEDITOR.config.toolbar = [
['Styles','Format','Font','FontSize'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Undo','Redo','-','Cut','Copy','Paste','Find','Replace','-','Outdent','Indent','-','Print'],
'/',
['NumberedList','BulletedList','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Image','Table','-','Link','Flash','Smiley','TextColor','BGColor','Source']
] ;
If you put the two previous answers together, you will have the full solution. The first thing is to add the options in the 'config.js' file in your 'ckeditor' folder.
CKEDITOR.editorConfig = function( config ) {
config.skin = 'bootstrapck';
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','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' ] }
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
};
Then add the call to the 'Basic' config in the HTML file.
<textarea id="ckeditor"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'ckeditor',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
That should be all you need, and obviously do not forget to call the 'ckeditor.js' file in your html file.
You need to set a specific configuration on launch.
<script type="text/javascript">
CKEDITOR.replace( 'description',
{
toolbar : 'Basic', /* this does the magic */
uiColor : '#9AB8F3'
});
</script>
description is refering to the id of the editor on your website.
Interesting links:
Configuration settings
Toolbar configuration
General CK Docs
UPDATED FOR 2018:
Those helpful tykes at CKEditor have only gone and created an online editor that you can customise to your hearts content! It's a nightly build so a static URL is of no use to you - navigate from http://nightly.ckeditor.com to the basic configurator option then select the TOOLBAR CONFIGURATOR button.
Copy and paste the generated content in to the ivoryckeditor bundle's config.js file (Web folder) and it should work without needs any of other file changes.
I built the following simple layout to show cut & paste operations and :
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';
};
I was also stuck in this issue but after so many trials i got solution of my problem:
use this in ckeditor.rb:-
Ckeditor.setup do |config|
require "ckeditor/orm/active_record"
config.cdn_url = "//cdn.ckeditor.com/4.12.1/full/ckeditor.js"
end
you can also change full to basic, standard or classic as per your requirement
best of luck