-
Notifications
You must be signed in to change notification settings - Fork 260
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.
First, add in a file into your /app/assets/javascripts folder, and name it whatever you want, something like ckeditor_custom_config.js. Then add in this code to get started. There are a lot of configurations you can set here, and a lot of settings you can change in the Toolbar as well. The main one configuration you might want to add would be custom CSS: CKEDITOR.config.contentsCss = '/assets/wysiwyg.css';. This is referencing another stylesheet you can add to redfine styles in the WYSIWYG editor if you want to. Obviously, /assets/wysiwyg.css is just an example, you would still need to create this file in your project.
Next, open your /config/application.rb file and add this:
# Determines which ckeditor file will be used to configure all instances.
# There should be at most ONE of these, so use manifest files which require the below one to augement it.
config.cms.ckeditor.configuration_file = '/assets/ckeditor_custom_config.js'
And replace ckeditor_custom_config with whatever you named your file. Lastly, exit out of your app, and run rake tmp:clear to clear out the asset pipeline. Then when you restart your app, the necessary files will have been recreated to point to the correct config file.
Adding custom styles and templates are possible, we just have not gotten around to testing these out yet.
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:
- 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:
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.
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.
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.
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.