I have created an online build of CKEditor 4.20.1 with the plugin CodeSnippet. The editor is working fine. But if I set the toolbar on my PHP page, then the code Snippet button is not showing in the toolbar of CKeditor, while all other toolbar buttons are working fine with this. I have searched on google but did not find any answer.
<textarea name="text_editor" id="text_editor" ></textarea>
<script>
CKEDITOR.replace( 'text_editor', {
toolbar:[['Source','Table','codesnippet']],
height:['350px']
});
</script>
With the above code, the "source" and "Table" buttons (icons) are visible and working fine. But codesnippet button is not visible. But if I do not define toolbar on the page (code shown below), then the CodeSnippet button is visible and working fine. But I need only a few tools for a particular web page and some other tools for some other pages.
<textarea name="text_editor" id="text_editor" ></textarea>
<script>
CKEDITOR.replace( 'text_editor', {
height:['350px']
});
</script>
Below I attached the build-config.js of CKeditor, where you can see the codesnippet plugin added automatically by CKEditor online builder.
/\*\*
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license/
\*/
/\*\*
* This file was added automatically by CKEditor builder.
* You may re-use it at any time to build CKEditor again.
*
* If you would like to build CKEditor online again
* (for example, to upgrade), visit one of the following links:
*
* (1) https://ckeditor.com/cke4/builder
* Visit online builder to build CKEditor from scratch.
*
* (2) https://ckeditor.com/cke4/builder/14bc102b680c88ab211db5638741532b
* Visit online builder to build CKEditor, starting with the same setup as before.
*
* (3) https://ckeditor.com/cke4/builder/download/14bc102b680c88ab211db5638741532b
* Straight download link to the latest version of CKEditor (Optimized) with the same setup as before.
*
* NOTE:
* This file is not used by CKEditor, you may remove it.
* Changing this file will not change your CKEditor configuration.
\*/
var CKBUILDER_CONFIG = {
skin: 'moono-dark',
preset: 'full',
ignore: \[
'.DS_Store',
'.bender',
'.editorconfig',
'.gitattributes',
'.gitignore',
'.idea',
'.jscsrc',
'.jshintignore',
'.jshintrc',
'.mailmap',
'.npm',
'.nvmrc',
'.travis.yml',
'bender-err.log',
'bender-out.log',
'bender.ci.js',
'bender.js',
'dev',
'gruntfile.js',
'less',
'node_modules',
'package-lock.json',
'package.json',
'tests'
\],
plugins : {
'basicstyles' : 1,
'bidi' : 1,
'blockquote' : 1,
'clipboard' : 1,
'codesnippet' : 1,
'colorbutton' : 1,
'colordialog' : 1,
'contextmenu' : 1,
'copyformatting' : 1,
'dialogadvtab' : 1,
'div' : 1,
'elementspath' : 1,
'enterkey' : 1,
'filebrowser' : 1,
'find' : 1,
'floatingspace' : 1,
'font' : 1,
'format' : 1,
'forms' : 1,
'horizontalrule' : 1,
'htmlwriter' : 1,
'iframe' : 1,
'image' : 1,
'indentblock' : 1,
'indentlist' : 1,
'justify' : 1,
'language' : 1,
'link' : 1,
'list' : 1,
'liststyle' : 1,
'magicline' : 1,
'maximize' : 1,
'pastefromgdocs' : 1,
'pastefromword' : 1,
'pastetext' : 1,
'pastetools' : 1,
'preview' : 1,
'quicktable' : 1,
'removeformat' : 1,
'resize' : 1,
'scayt' : 1,
'selectall' : 1,
'showblocks' : 1,
'showborders' : 1,
'smiley' : 1,
'sourcearea' : 1,
'specialchar' : 1,
'stylescombo' : 1,
'tab' : 1,
'table' : 1,
'tableresize' : 1,
'tableselection' : 1,
'tabletools' : 1,
'templates' : 1,
'toolbar' : 1,
'undo' : 1,
'wysiwygarea' : 1
},
languages : {
'bn' : 1,
'en' : 1,
'hi' : 1
}
};
Initially, I thought there was a problem with the online build, so I did it a second time (online build), but the problem remained the same.
Based on actually digging in the source of the plugin, the toolbar command is case sensitive and needs to be CodeSnippet.
Based on init function in https://github.com/ckeditor/ckeditor4/blob/master/plugins/codesnippet/plugin.js which defines
init: function( editor ) {
editor.ui.addButton && editor.ui.addButton( 'CodeSnippet', {
label: editor.lang.codesnippet.button,
command: 'codeSnippet',
toolbar: 'insert,10'
} );
},
The first argument to addButton defines what exactly is needed