CKEditor

onegun

Understand that FuelCMS comes with two editor one is CKEditor and another is markitup. Currently i am able to customize markitup to include a button icon, when clicked, insert a code such as {button value="click here"} which will then convert this code to html code. Is it possible do the same thing in CKEditor?

admin

There is a $config['ck_editor_settings'] configuration parameter in the fuel/application/config/MY_fuel.php file that allows you to specify different CKEditor parameters. FUEL actually has 2 custom ones in there by default, FUELImage and FUELLink. These plugins are in the fuel/modules/fuel/assets/js/editors/ckeditor/plugins folder.

onegun

ckeditor setting is

$config['ck_editor_settings'] = "{
	toolbar:[
			['Bold','Italic','Strike'],
			['Format'],
			['Image','HorizontalRule'],
			['NumberedList','BulletedList'],
			['Link','Unlink'],
			['Undo','Redo','RemoveFormat'],
			['PasteFromWord','PasteText'],
			['Preview'],
			['Maximize']
		],
	contentsCss: '".WEB_PATH."assets/css/main.css',
	htmlEncodeOutput: false,
	entities: false,
	bodyClass: 'ckeditor',
	protectedSource: [/\{fuel_\w+\(.+\)\}/g, /<\?[\s\S]*?\?>/g],
	toolbarCanCollapse: false,
	extraPlugins: 'fuellink,fuelimage',
	removePlugins: 'link,image'
	}";

however when i define class="wysiwyg" in the textarea field, the link, fuellink buttons are not there in the toolbar, also, i cant see fuellink, fuelimage buttons too

admin

What version of FUEL are you using? In 1.2, these setting were updated is why I ask.

onegun

yes, i am using 1.2...

admin

The default settings now in 1.2 are:
$config['ck_editor_settings'] = "{ toolbar:[ ['Bold','Italic','Strike'], ['Format'], ['FUELImage','HorizontalRule'], ['NumberedList','BulletedList'], ['FUELLink','FUELUnlink'], ['Undo','Redo','RemoveFormat'], ['PasteFromWord','PasteText'], ['Preview'], ['Maximize'] ], contentsCss: '".WEB_PATH."assets/css/main.css', htmlEncodeOutput: false, entities: false, bodyClass: 'ckeditor', protectedSource: [/\{fuel_\w+\(.+\)\}/g, /<\?[\s\S]*?\?>/g], toolbarCanCollapse: false, extraPlugins: 'fuellink,fuelimage', removePlugins: 'link,image', allowedContent: true }";
Note that "FUELImage" and "FUELLink" are used instead of "Image" and "Link". Also, the addition of "allowedContent: true"

onegun

$config['ck_editor_settings'] = "{
	toolbar:[
		['Bold','Italic','Strike'],
		['FontSize','Font'],
		['FUELImage','colorbutton'],
		['NumberedList','BulletedList'],
		['FUELLink','FUELUnlink'],
		['Undo','Redo','RemoveFormat'],
		['PasteText'],
		['Maximize']
	],
	contentsCss: '".WEB_PATH."assets/css/main.css',
	htmlEncodeOutput: false,
	entities: false,
	bodyClass: 'ckeditor',
	protectedSource: [/\{fuel_\w+\(.+\)\}/g, /<\?[\s\S]*?\?>/g],
	toolbarCanCollapse: false,
	extraPlugins: 'fuellink,fuelimage',
	removePlugins: 'link,image',
	allowedContent: true
	}";

try to change the "format" button to include "Font" and "FontSize" but not successful. No sure where went wrong, can you point a direction? also which file intepret this configuration?

admin

The ck_editor_settings configuration parameters are merged into the fuel_header_jqx.php which is in the header of a FUEL page and assigned to the javascript variable jqx_config.ckeditorConfig. This variable gets passed to CKEditor upon intialization in the fuel/modules/fuel/assets/js/fuel/custom_fields.js file.

Also, CKEditor loves to cache files so be wary of that as well.

onegun

for fuellink and fuelimage, how you set which icons to use in the toolbar

admin

If you look in the fuel/modules/fuel/assets/css/fuel.css file towards to the very bottom of the file, you'll see three styles that are used for the buttons:
.cke_button__fuellink_icon { background: url(../js/editors/ckeditor/skins/moono/icons.png) no-repeat 0 -528px !important; } .cke_button__fuelunlink_icon { background: url(../js/editors/ckeditor/skins/moono/icons.png) no-repeat 0 -552px !important; } .cke_button__fuelimage_icon { background: url(../js/editors/ckeditor/skins/moono/icons.png) no-repeat 0 -360px !important; }
Note that this file gets compiled into fuel.min.css by browsing in fuel to fuel/build so any changes to that file must run that command.

However, you can add your own CSS file to FUEL so you won't have to modify the core by adding the following to your fuel/application/config/MY_fuel.php file:
$config['xtra_css'] = 'fuel';
And then add your css to an "assets/css/fuel.css" file.

onegun

thanks, any tips to define two version of ckeditor with two version of tool bar configuration?

admin

There is a "editor_config" parameter you can set which will set different configuration values. This talks more about setting configuration values per field here:
http://docs.getfuelcms.com/general/forms#wysiwyg