BrowserCMS Code Snippets

This page is meant to just be a collection of issues we've run into whilst developing on bcms and some snippets / tips of how to get around these until future releases address them.

Using Ckeditor and Updating Styles

For those sites using ckeditor and a client wants the editor to be styled like the output content on the site, here is what you need to do:

• First, create a /bcms folder and a /ckeditor folder inside of it. Then create a config.js file inside this folder and add the following to it:

View the snippet

• Next, inside the /stylesheets folder, create a wysiwyg.css file and add in all the styles you'd like to be included in the editor.
• Finally, if you want to give the client templates for image uploading and captioning, add a file in the folder /javascripts and call it dropdown_templates.js. In here, you can add whatever you like, but here is an example of the syntax:

View the snippet

This should help get the editor to be a lot more similar to what the end content rendered out will be. Of course, it might not look the same due to CSS inheritance based on elements only on the actual site, but it should still suffice for the client needs.

Using Fckeditor and Updating Styles & Templates

After adding bcms_fkceditor to your project, move the /site folder in the /public folder into the /bcms folder. Inside here is a file named customconfig.js; here's where we'll be defining the new files for the new styles and templates. Add the following snippet to this file, and edit the name of the subsequent files to whatever your project is.

View the snippet

Then, in the /bcms_config folder, there should be a /fckeditor folder. In here, there should be one file already: fckstyles.xml. Rename this to whatever you called in the customconfig.js folder. * This is a bug in bcms right now where this has to be changed to override the default Fckeditor styles. Then, add a new file named [project_name]_templates.xml.

In the [project_name]_fckstyles.xml file, you can edit the styles as you see fit. However, adding new elements to be styled is not very easy. So, the easiest way to do this is to add these in via custom templates. Add the following snippet and then edit as you see fit for your project.

View the snippet

Lastly, you need to edit the 'FCKConfig.ToolbarSets["CMS"]' part of the /bcms/fckeditor/fckconfig.js file. After the last definition 'Style', just add in ,'Templates' and this will enable the templates button in the editor.

NOTE: you can apply these toolbar edits directly in the customconfig.js file. Just copy and paste FCKConfig.ToolbarSets["CMS"] snippet into here, and it should work; saving you one step.