I can't add the Source button to CKEditor 4's toolbar

Question

I'm having trouble adding the Source button to CKEditor 4's toolbar. I just downloaded the new CKEditor today.

I'm using a config object named oConfig:

oConfig.toolbar = 'Custom';
oConfig.toolbar_Custom = [
  ['Bold', 'Source', 'Italic']
];

The toolbar shows up with only the Bold and Italic buttons. This example from CKEditor's docs tells me it should be working.

Solution 1

There are two reasons why it may be happening:

1. You have downloaded the basic package, where the sourcearea plugin is not included.

2. You are using CKEditor in inline mode. Source mode isn't available in inline mode yet.

Solution 2

Future googlers, for CKEditor v4.2 now there is a plugin to view source code in inline editing mode.

http://ckeditor.com/addon/sourcedialog

Solution 3

Here is a plugin I've made:

First of all, inside ckeditor/plugins/ create a new folder called "htmlSource", inside it create a file called "plugin.js" and inside this file paste the code below:

//-----------------------------Start Plugin Code-------------------------



plugInName = 'htmlSource';

CKEDITOR.plugins.add(plugInName,
{  
  init: function (editor) {

    editor.addCommand('htmlDialog', new CKEDITOR.dialogCommand('htmlDialog'));
    editor.ui.addButton(plugInName, {
        label: 'Html Source',
        icon: 'http://www.example.com/images/btn_html.png',
        command: 'htmlDialog'
    });

    CKEDITOR.dialog.add('htmlDialog', function (editor) {
        return {
            title: 'Fuente Html',
            minWidth: 600,
            minHeight: 400,
            contents: [
                        {
                            id: 'general',
                            label: 'Settings',
                            elements:
                            [
                            // UI elements of the Settings tab.
                                {
                                type: 'textarea',
                                id: 'contents',
                                rows: 25,
                                onShow: function () {
                                    this.setValue(editor.container.$.innerHTML);

                                },
                                commit: function (data) {              //--I get only the body part in case I paste a complete html
                                    data.contents = this.getValue().replace(/^[\S\s]*<body[^>]*?>/i, "").replace(/<\/body[\S\s]*$/i, "");
                                }

                            }
                                ]
                        }
                    ],

            onOk: function () {
                var data = {};
                this.commitContent(data);
                $(editor.container.$).html(data.contents);
            },
            onCancel: function () {
                //  console.log('Cancel');
            }
        };
    });
}


});

//--------------------Plugin Code Ends Here--------------------

Please notice that there is a parameter called icon where you must set the url of the Plugin Button Image, I just put an example url ('http://www.example.com/images/btn_html.png') you must use a valid one to see the plugin button.

To set this plugin in the ckeditor toolbar, you must configure it inside the config.js file, for example:

CKEDITOR.editorConfig = function (config) {
    config.plugins =
    'htmlSource,' +    //Here is the plugin
    'about,' +
    'a11yhelp,' +
    'basicstyles,' +
    'bidi,' +
    .....;
config.toolbar = 'Full';   //Add the plugin to the full toolbar

config.toolbar_Full =      //Note that our plugin will be the first button in the toolbar
        [
        ['htmlSource', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print',    'SpellChecker', 'Scayt'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
        ['BidiLtr', 'BidiRtl'],
        '/',
        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink', 'Anchor'],
        ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],
        ['Maximize', 'ShowBlocks', '-', 'About']
   ]; 
};

I know this is working, so if you have some trouble please tell me.

Solution 4

For me, it helped to use:

config.extraPlugins = 'htmlSource';

View more solutions