最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - CKEditor toolbar configuration not working - Stack Overflow

programmeradmin0浏览0评论

I recently started working with CKEditor, but the toolbar has functions we will not be using.

I tried copying the code from the online toolbar configuration, but the toolbar doesn't change.

my config.js file looks like this:

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 = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About';
};

which was copies directly from the configuration tool. After the above, I tried pasting the code into the initialization function like the following block:

jQuery(function() 
{   
    var editor = CKEDITOR.replace( 'message',
    {
        extraPlugins : 'stylesheetparser',
        extraPlugins : 'filebrowser',
        extraPlugins : 'popup',
        //contentsCss : '<?= base_url(); ?>css/layout.css',
         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 = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'
    });

    CKFinder.setupCKEditor(editor);
});

I also tried simply to show one part of the toolbar like this:

CKEDITOR.editorConfig = function( config ) {
         config.toolbar = [
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }
    ];

    // Toolbar groups configuration.
    config.toolbarGroups = [
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }
    ];
};

None of the above changed anything in the toolbar, so I am not sure if I overlooked something.

Any help will be appreciated.

I recently started working with CKEditor, but the toolbar has functions we will not be using.

I tried copying the code from the online toolbar configuration, but the toolbar doesn't change.

my config.js file looks like this:

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 = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About';
};

which was copies directly from the configuration tool. After the above, I tried pasting the code into the initialization function like the following block:

jQuery(function() 
{   
    var editor = CKEDITOR.replace( 'message',
    {
        extraPlugins : 'stylesheetparser',
        extraPlugins : 'filebrowser',
        extraPlugins : 'popup',
        //contentsCss : '<?= base_url(); ?>css/layout.css',
         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 = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'
    });

    CKFinder.setupCKEditor(editor);
});

I also tried simply to show one part of the toolbar like this:

CKEDITOR.editorConfig = function( config ) {
         config.toolbar = [
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }
    ];

    // Toolbar groups configuration.
    config.toolbarGroups = [
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }
    ];
};

None of the above changed anything in the toolbar, so I am not sure if I overlooked something.

Any help will be appreciated.

Share Improve this question asked Apr 19, 2016 at 12:22 CopperRabbitCopperRabbit 6743 gold badges7 silver badges24 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 3

Please make sure you properly define your configuration - check the Setting CKEditor Configuration article for some code examples. Some of the mistakes you are doing:

  • Mixing up config.optionName and optionName.
  • Declaring extraPlugins multiple times - you should put all extra plugins into one declaration: config.extraPlugins = 'myplugin,anotherplugin';

Also check some of the CKEditor SDK samples for examples - if you open any of them (like this one), scroll down to the "Get Sample Source Code" section and grab the source code to copy.

Last but not least, use the JavaScript console of your browser to check for errors and clear the cache after each change!

And finally, it makes little sense to download a bloated CKEditor package and then remove plugins/buttons in your configuration - better create a custom build in CKBuilder.

include:
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/config.js"></script>

<textarea id="user_message"></textarea>
<script type="text/javascript">
var 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' ] }
];

var initEditor = function() {
  return CKEDITOR.replace( 'user_message',{
    toolbar : 'Basic',
    uiColor : '#9AB8F3',
    toolbarGroups,
   });
}
initEditor();
</script>

Demo

my CKEditor config.js changes were not reflected in my toolbar until i put matched the same path as the Samples had. ex: the working sample has this path:

ckeditor\samples\index.html
ckeditor\config.js

so i made my working web page app with ckeditor this:

rootwebfolder/ckeditor/config.js
rootwebfolder/mywebpage.php

before, i had ckeditor on the same level as root, but i moved it into root. of course i had to change the relative path statements, which are now this[and showing the other code that enables the div to show the CKEditor toolbar]:

echo "<script type='text/javascript'> window.CKEDITOR_BASEPATH ='mydomain/mainfolder/rootwebfolder/ckeditor/';</script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/ckeditor.js'></script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/config.js'></script>";
echo "<div id = 'divname' name = 'divname' class = 'ckeditor' style='visibility:hidden; height:415px'></div>";
echo "<script type='text/javascript'>CKEDITOR.replace('divname');</script>";

i hope this helps someone!

发布评论

评论列表(0)

  1. 暂无评论