Customizing FCKeditor Toolbars
FCKeditor has been the default rich-text editor for DotNetNuke for quite a while now. I find it mostly intuitive and easy-to-use right out of the box. It provides more functionality than most website administrators will ever need and behaves much like any familiar Microsoft office application. There are times, however, when you’ll want to trim back some of that capability to avoid confusing your website users.
For example, we use Active Forums on liftkettlebells.com. We intended to give our users some limited text formatting ability, but the default FCKeditor includes a whopping 48 toolbar buttons! Frankly, it looks too busy and no one uses all those buttons when drafting a forum post. We just wanted to offer our visitors a few obvious options to pretty up their posts: bold, italics, bullets, lists, and hyperlinks.
One approach is to make modifications to your toolbars in the fckconfig.js file located in \Providers\HtmlEditorProviders\Fck\Custom, but those changes are then applied globally. I suggest using this method if you want to add/delete single buttons on the toolbars themselves. Let’s save those details for a future blog post.
For now, let’s focus on "hiding" toolbars using the FCKeditor's custom options page. If you are logged in as a host or admin, you will see a Show Custom Editor Options link below the compose window of any FCKeditor instance.
In Active Forums, for example, pick any forum and click the Add New Topic button. Then click Show Custom Editor Options.
Notice the three Settings Type options: Instance, Module, and Portal. These options are meant to confine your custom settings to a single instance of FCKeditor, to every instance within the current module, or portal-wide to every module and instance on your website. Unfortunately, it often doesn’t quite work that way. You may need to experiment with your selection to get the intended results. In this case, I’ve found that Instance modifications actually push my changes out across the entire Active Forums module. A little counter-intuitive to say the least!
Select Editor Toolbar View Options to view your toolbar choices. This is where you "turn off" unwanted toolbars. Select the pencil icon to expand the selected toolbar. For example, DNNDefault. Note, you may need to scroll back down to the Editor toolbar view options section after clicking the pencil icon.
You can disable the toolbar for all users, or a selected subset of users based on role. For our forum, I checked Disabled for All Users. Attention, you must click on the check mark image to the left of the row for your changes to take affect. This is another quirky little detail that took me a few hours to figure out!
You will need to repeat these steps for each toolbar you want to disable. So, I also disabled the Default and NoGallery toolbars. That leaves only the desired Basic toolbar visible to our users.
Once you have disabled the unwanted toolbars, click Apply in the Apply Custom Settings To section with Instance selected in the dropdown box. You should then see a “Settings applied successfully to Instance” message as shown below.
Now close the dialog box. To see your changes, don’t forget to click Refresh Editor at the bottom of the compose window.
And that’s it! These changes are only applicable to Active Forums. So, when I’m editing content using any other modules, I still have access to the full suite of toolbars. But, my forum members get to see a simpler, smaller set of formatting choices:
We would love to hear from you. What have you learned while customizing the FCKeditor for your needs? Please share in the comments below.
Comments are closed