CODEWITHSUNDEEP
jqueryckeditorckeditor4.x
channa ly
channa ly

Reputation: 9927

Custom toolbar with CKEditor in rails with ckeditor-rails

I am using ckeditor-rails gem to integrate CKEditor with rails. I also use http://ckeditor.com/builder to generate the toolbar, however I want to customize a bit more by removing some. This is the config from the builder

/**
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	
	// %REMOVE_START%
	// The configuration options below are needed when running CKEditor from source files.
	config.plugins = 'dialogui,dialog,about,a11yhelp,basicstyles,blockquote,clipboard,panel,floatpanel,menu,contextmenu,resize,button,toolbar,elementspath,enterkey,entities,popup,filebrowser,floatingspace,listblock,richcombo,format,horizontalrule,htmlwriter,wysiwygarea,image,indent,indentlist,fakeobjects,link,list,magicline,maximize,pastetext,pastefromword,removeformat,showborders,sourcearea,specialchar,menubutton,scayt,stylescombo,tab,table,tabletools,undo,wsc';
	config.skin = 'moono';
	// %REMOVE_END%

	// Define changes to default configuration here.
	// For complete reference see:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config

	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
		{ name: 'about' }
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';
};

From the code above I learn that buttons on the toolbars can be removed by

config.removeButtons = 'Underline,Subscript,Superscript';
Now I want to remove the image, insert horizontal line and insert special character from the tool bar. 

    config.removeButtons = 'Underline,Subscript,Superscript,Image,Insert Horizontal Line, Insert Special Character';

It works for Image button but not for the other 2 buttons.

where can I get the values that represent the buttond to remove (in my case the horizontal line and the special character buttons ? I think it must be mentioned somewhere in CKEditor website that I just could not find.

Your help will be highly appreciated.

ps: the ckeditor-rails uses jquery ckeditor internally.

Upvotes: 2

Views: 1262

Answers (1)

Anna Tomanek
Anna Tomanek

Reputation: 2239

If you use CKBuilder to generate your CKEditor build, it makes more sense to remove the plugins that provide the buttons you are not going to use - otherwise you will still be loading these plugins for no good reasons at all which makes little sense performance-wise. See also 4 Common CKEditor Installation Mistakes And How To Avoid Them.

If for some reason you still insist on just removing the buttons in your configuration, check the Toolbar Configurator. It's a tool that is designed to help you adjust the toolbar for your specific editor package - you can find it in the samples/index.html file. It will let you easily find the names of the buttons ("Advanced" version) or even better, adjust the toolbar live by selecting the available buttons ("Basic" version).

Upvotes: 1

Related Questions