Menu
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.
555
The simplest way to configure the toolbar is to use the dedicated toolbar configurator that is available in each editor installation package starting from CKEditor 4.5. The editor instance below was configured by using the accessible "toolbar groups" approach, with some unwanted buttons removed by setting the config.
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.
41
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:
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
