Out of the box, the aloha editor uses a file named styleconfig.js to allow you to select styles and classes via the Advanced Inspector plugin to insert into your content. In previous versions, the content designer editor offered a way to add in classes to content by using a dropdown and the css provided by the folder. This sample illustrates how you can achieve something like that in Aloha by dynamically loading and populating the the values from your folder's stylesheet property in the editor.
*Please note that this is a sample and is something that should be reviewed and may need to be tweaked to function in your environment. The support team will not be able to assist with support, customizations, or installations of this sample. Please also note that any CU's or site upgrades can wipe out this functionality.
- Unzip these files to a new folder.
- Open the bin folder and copy the ExCSS.dll into your site's bin folder
Dll is from https://github.com/TylerBrinks/ExCSS which may require a rebuild depending on your version. - Open your web.config file and locate the <assemblies> tag. Paste in the following line
<add assembly="System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" /> - In your site root folder, add a folder named "handlers" if no folder exists.
- Copy the file located in the handlers folder from the zip into the newly created or existing handlers folder of your website.
- This step will setup the ability to generate and apply styles to elements in Aloha. Skip if you don't want to set this up.
In your site root folder on the webserver, open the following path:
\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plugins\ektron\general\lib\general-plugin.js - Comment out or delete the following lines (approximately line 444):
$.ajax({ url: uiPath + '/js/Ektron/Controls/EktronUI/Editor/Aloha/plugins/ektron/advancedinspector/lib/StyleConfig.js', dataType: 'json', async: false, success: function (data) { StyleConfigs = data; } });
- Replace the lines with the following and save the file:
var path = window.location.search.toLowerCase() path = path.substring(path.indexOf('folderid=') + 9); var fid = path.substring(0, path.toLowerCase().indexOf('&')) $.ajax({ url: '/handlers/styleconfigloader.ashx?fid=' + fid +"&showstyle=true", dataType: 'json', async: false, success: function (data) { StyleConfigs = data; } });
- This step will setup the ability to generate and apply classes to elements in Aloha. Skip if you don't want to set this up.
In your site root folder on the webserver, open the following path:
\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\plugins\ektron\advancedinspector\lib\advancedinspector-plugin.js - Comment out or delete the following lines (approximately line 444):
$.ajax({ url: Ektron.Context.Cms.UIPath + '/js/Ektron/Controls/EktronUI/Editor/Aloha/plugins/ektron/advancedinspector/lib/StyleConfig.js', dataType: 'json', async: false, success: function (data) { styleConfigJson = data; } });
- Replace the lines with the following and save the file:
var path = window.location.search.toLowerCase() path = path.substring(path.indexOf('folderid=') + 9); var fid = path.substring(0, path.toLowerCase().indexOf('&')) $.ajax({ url: '/handlers/styleconfigloader.ashx?fid=' + fid, dataType: 'json', async: false, success: function (data) { styleConfigJson = data; } });
- Clear your browser's cache. You may also need to recycle the site's application pool as the js may be cached there as well.
- Login to the workarea interface and edit your folder properties in the workarea to make sure there is a valid css stylesheet for the folder you have selected. You can have the stylesheet inherited as well.
- Using the Aloha editor you should now add a content item and notice that the style selector should be populated with styles from your stylesheet as well as the advanced inspector should have a listing of your classes. If you are not seeing some, there is logic in the handler file that can be updated to your liking to return what you want.
Please sign in to leave a comment.