Kentico CMS is a great platform for developing and maintaining content driven websites. The product is extremely feature rich and allows nearly unlimited customizations for users. One of the most powerful features is the ability to design/format HTML content directly within the tool. This is accomplished with Kentico’s integration with FCKEditor (Now known as CKEditor). The FCKEditor (CKEditor) is a feature rich WYSIWYG utility that allows users to design and implement content and adds in all the appropriate HTML coding.
One of the limitations of the FCKEditor is that the options available to user are configured directly within the tool. Why is this bad you might ask? Well, when implemented in a basic site, allowing users to enter/design any style they desire may seem perfectly suitable. However, most sites have had a considerable amount of development devoted to designing a set list of styles. Those styles clearly define the look and feel of the site and the user experience. Allowing other styles to be used within such a site undermines the point of CSS and can quickly degrade the integrity of the design.
I previously had blogged about how to use Custom Styles/CSS using FCKEditor, however, that post was focused on modifying the defined styles within the tool. This post will detail the process to use the styles defined with the Kentico CMS.
There are a number of steps to enable this functionality, which I will detail below. It is assumed that you are familiar with Kentico CMS, as well as the basic functions/features of FCKEditor. Nearly all modifications will be done within the fckconfig.js file.
Update Process
1. In fckconfig.js, comment out the presets for the following items:
- FCKConfig.FontColors
- FCKConfig.FontNames
2. Add in XMLHttpRequest section to pull stylesheet from Kentico.
This is the part that will dynamically set the styles in FCKEditor. The XMLHttpRequest call will perform a GET request to the path and return its response. We will parse that response and load the FCKEditor with the values. The request is done asynchronously to allow the FCKEdtiro to fully load prior to setting the styles.
var req = new XMLHttpRequest();
req.open('GET', '[Path to FCKEditor CSS]', true);
req.onreadystatechange = function(aEvt) {
if (req.readyState == 4) {
if (req.status == 200) {
var strResponse;
//Set the font family
strResponse = req.responseText;
var intStart = strResponse.indexOf('font-family:');
var intEnd = intStart + strResponse.substring(intStart).indexOf(';');
FCKConfig.FontNames = strResponse.substring(intStart + 12, intEnd).replace(/,/g, ";");
//Set the font color
strResponse = req.responseText;
var intStart = strResponse.indexOf('color:');
var intEnd = intStart + strResponse.substring(intStart).indexOf(';');
FCKConfig.FontColors = strResponse.substring(intStart + 6, intEnd).replace(/#/g, "");
}
else {
alert("Custom styles not loaded!\n");
}
}
};
req.send(null);
Note: [Path to FCK Editor CSS] will be in the following format:
3. Set the CSS for the FCKEditor to match your existing CSS. This will allow the Format selection box to pull in your defined styles.
4. Create your custom CSS for defining styles for the FCKEditor, using the stylesheet name specified in your XMLHttpRequest call. The CSS will need to be in the format pictured below for the supplied js to work. If you want to structure your CSS differently, then just modify the js accordingly.
Optional Modifications
1.Disable custom color selection in FCKEditor
FCKConfig.EnableMoreFontColors = false ;
2. Remove Styles option from FCKEditor
3. Remove Source option from FCKEditor
Customized FCK Editor
Here is an updated fkconfig.js with the above changes: fckconfig.js (18.78 kb)
This process will modify your default js file for FCKEditor. You will want to make note of all of your changes in case the default code base changes in the future. All of these changes are pretty basic and I'm sure some more work could be done to make it even more integrated. Let me know if you have any ideas. Hope this helps!