如何自訂自己的Fck Editor..

此文對如何自訂 Fck Editor 做了一些介紹.

原文來自 : http://www.smart-thinker.com/Default.aspx?tabid=1070&EntryID=35

 

Objective: I wanted to customize the look of the FCK Editor on PokerDIY and allow users to select poker card icons as custom smileys in all modules that use the Rich HTML Editor, for example, Private Messages, the Poker Forums (in particular) and on all Wall posts (for example on Poker Player Profiles and Event Walls).
After reading my web usability book ("Steve Krug - Don't make me think!", highly recommend!) I also wanted to remove a lot of the options that the average poker player cares little about - e.g. "Paste from Word", "Tables" and the ubiquitous "Add Flash Object" ("Does a Flash Object beat a Straight?").

You can see the end result in the screenshot, or log in to PokerDIY and make a Wall post on your Wall to see the customized FCK editor (click on the Smileys icon to open the new smileys).

Lets start with adding a nice set of custom smileys - namely my cool poker cards! This is fairly simple to do (the hardest part was finding the right file to change and fighting my browser cache) :

1. Decide on the smiley set you want (either make your own or download some of the many free sets of smileys)
2. Copy them to the following location under your DNN install: "\Providers\HtmlEditorProviders\Fck\FCKeditor\editor\images\smiley" (I made a new folder called "poker")
3. Open the fckconfig.js (Back it up first!) file in Notepad under "\Providers\HtmlEditorProviders\Fck\Custom"
4. Scroll down to the very bottom (or search for "FCKConfig.SmileyPath")
5. Here you will see the current Smiley set (MSN) -

FCKConfig.SmileyPath    = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages    = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth        = 320 ;
FCKConfig.SmileyWindowHeight    = 240 ;

You need to customize this to your new folder, for example, I changed mine to use my new icons in the "poker" folder (I copied the existing ones from "MSN" to "Poker" as they were nice too - I have removed some for clarity's sake):

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/poker/' ;
FCKConfig.SmileyImages = ['spade2.gif','spade3.gif','spade4.gif','spade5.gif','spade6.gif','spade7.gif','spade8.gif','broken_heart.gif','kiss.gif','envelope.gif'] ;
FCKConfig.SmileyColumns = 13 ;
FCKConfig.SmileyWindowWidth    = 500 ;
FCKConfig.SmileyWindowHeight = 350 ;

I also increased the width, height and number of columns (13 spaded in a deck!) to make it more user-friendly.

Thats all there is to it - my users are going to love that - now on to the reduced toolbar:

Firstly, I want to mention Tom Kraak's article on customizing FCK toolbars - this is worth reading first to get an idea of how the process works. We going to go one step further and customize the buttons on one of the toolbars.
We are going to start with the Basic toolbar as it is the simplest already (you could modify any/all of them of course).

1. Before you start I would recommend opening your site as a user and as an admin (and any other roles you have) and identifying exactly WHAT you want to display on each toolbar for each role (my requirements are simple - I only have one role (user and admin see the same) and I want to make it as simple as possible, but still allow linking, smileys etc.
2. Once you have done this, open the fckconfig.js again (under "\Providers\HtmlEditorProviders\Fck\Custom").
3. Search for "FCKConfig.ToolbarSets["Basic"]"
4. This is the default, current Basic Toolbar layout. You can read Tom's article to learn how to show it instead of the other toolbars.
5. If you look just above this section in the .js file you will see the other toolbars and you can work out what command relates to what icon on the toolbar (e.g. 'Smiley' is the Smiley icon).

Here is the original Basic toolbar

FCKConfig.ToolbarSets["Basic"] = [
    ['Smiley','Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']

and here is my PokerDIY toolbar with the icons I wanted (I grabbed them from the options above and edited the file). You can see the scaled down toolbar in the screenshot below or log on to PokerDIY to test it.

FCKConfig.ToolbarSets["Basic"] = [
    ['FitWindow','Link','Unlink','-','Smiley','Image','Table','-','Bold','Italic','Underline','StrikeThrough','-','OrderedList','UnorderedList'],
    ['FontName','FontSize','TextColor','BGColor'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','About']

Save the file and ensure that your Rich Text boxes are displaying the Basic editor (if this is the one you modified).

Notes:

• The FCK custom editor options are notoriously tricky - they sometimes save and sometimes don't, and on a slow connection can contribute greatly towards hair-loss. I recommend trying this all locally first (clear your browser cache if the changes are not showing).
• I actually wanted to ADD a new custom toolbar type after "Basic" but I could not get this to work. Considering I only use 1 toolbar for all users I just edited the "Basic" toolbar. This also made the site easier to change.
• On upgrade the fckconfig.js file is overwritten, so remember to back your changed one up and replace it afterwards. Anyone know an easy way to preserve your changes on upgrade?
• I use the same FCK toolbar on Smart-Thinker but I refrained from adding the poker cards ;)

Hope this helps someone...