› ›
CRITICAL SECURITY VERSION UPDATE:
https://github.com/daylightstudio/FUEL-CMS/releases/tag/1.4.13

CKEditor

onegunonegun
edited November 2014 in Modules
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?

Comments

  • adminadmin
    edited 5:06PM
    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.
  • onegunonegun
    edited 5:06PM
    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
  • adminadmin
    edited 5:06PM
    What version of FUEL are you using? In 1.2, these setting were updated is why I ask.
  • onegunonegun
    edited 5:06PM
    yes, i am using 1.2...
  • adminadmin
    edited 5:06PM
    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"
  • onegunonegun
    edited 5:06PM 

    $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?
  • adminadmin
    edited 5:06PM
    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.
  • onegunonegun
    edited 5:06PM
    for fuellink and fuelimage, how you set which icons to use in the toolbar
  • adminadmin
    edited 5:06PM
    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.
  • onegunonegun
    edited 5:06PM
    thanks, any tips to define two version of ckeditor with two version of tool bar configuration?
  • adminadmin
    edited 5:06PM
    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
Sign In or Register to comment.