CODEWITHSUNDEEP
ckeditor
coure2011
coure2011

Reputation: 42514

how to show ckeditor with basic toolbar

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.

Upvotes: 19

Views: 82462

Answers (5)

Dheeraj Maheshwari
Dheeraj Maheshwari

Reputation: 417

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

Upvotes: 0

Tim Tyler
Tim Tyler

Reputation: 2690

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';
};

Upvotes: 2

Clinton Dobbs
Clinton Dobbs

Reputation: 601

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.

Upvotes: 20

Monzur
Monzur

Reputation: 1435

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']
] ;

Upvotes: 50

Smamatti
Smamatti

Reputation: 3931

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:

Upvotes: 14

Related Questions