How to Fcking Skin the Fckeditor
I really love pet projects. I like doing small things to improve Smallbox that I can pick at inbetween client work. I inherited the task of reskinning the Rich Text Editor a few weeks back and I had no idea what was ahead of me. We are using this Fckeditor as our RTE for a reason, it's a good little plugin that works well and our clients find it intuitive to use. That's about where the intuition stops though as I discovered when I dove in to skin this thing, the entire skinning process is riddled with what we like to call "secret buttons". I found no information on the web and felt very frustrated and alone in the universe. I finally figured it out and now I think it's my duty to share my steps with the rest of the web.
So I, in association with Smallbox Software present : How to Fcking Skin the Fckeditor.
This tutorial assumes you have the following :
1. An html editor and knowledge of how to use it
2. Basic image editing skills
3. Some web development skills
4. Some CSS knowledge
5. A copy of fckeditor available here : http://www.fckeditor.net/ (we are using version 2.6.4)
A great place to start is the FCKeditor Docs. They'll point you to all the basic files you'll need to make small tweaks to the fckeditor skin. As you'd imagine you can make a lot of different changes using just the editor/skins/your_skin/fck_editor.css file. This is where you can play with background colours, borders and you can hide items that you want gone without having to find the configuration in the mess of code. (Not that I necessary support this as good practice).
It also gives you the location of the file where you'll edit your icons. That's right I said file. Singular. It's a stripe/sprite image. (We'll take a deep breath and move on). Changing the sprite image is pretty simple if you stick to the 16 by 16px size limit. But what if you want a different size for your icons? Too bad? No I say! There is a way and this is where most of the frustration and mystery comes from. I'm basically going to go through step by step how I re-skinned this thing for Smallbox.
I mocked up what I wanted the fckeditor to eventually look like, no compromises. Compromises are for quitters. I did this in illustrator with eventual transfer to photoshop in mind.
I opened a strip from the source file that I downloaded in Photoshop and resized it so it had a width of 26px which was the ideal width of my icons. I made sure to constrain proportions so that everything sized up properly. This next step is a bit tedious; what I basically did was copy and pasted each icon from illustrator, onto the strip, overtop of the original icons. This helped with placement, especially since I didn't build every icon in the strip, just the ones we use. You'll find that it still takes some fiddling with but the existing icons really help. I recommend naming the icon layers for easy adjusting later. You can either trash the base layer or keep it just in case you need to use those icons temporarily.
When everything is said in done this is what my strip looked like. You'll want to throw this into /editor/skins/your_skin_name/ and replace the old file. For my base skin I'm using the pre-packaged "silver" skin. To see how to change skins in your configure file visit the fckeditor docs
Before we do anything with the css we'll dive right into the hard stuff. Now keep in mind this may be a breeze for you programmer types but I deal primarily with front end so it had to take some creative searching and experimentation to find these.
The files we will be messing with are in /editor/js/
Now I'd love to tell you what all this code means, but I can't, however I do know the lines you want to change to resize your icons. Now I say use the term 'lines' loosely. In this file the code is all squished together and unnecessary whitespace has been removed. When you feel the size of the file in your editor you'll know why but it does make finding things hard. If you do not have a search option for your editor of choice, quit now and go find one that does. Below are the lines you'll want to edit and I've bolded the part you need to change.
You may have guess that the number you're changing is height and width of your icon. For my skin I changed it to 26.
Feel free to test your page at this point. You can do this by opening the /_samples/default.html file
This is my skin so far, very pretty :
My next step is going to be configuring which buttons I want to use. Clearly there are more buttons here than I need in my skin. This is another step that has already been expertly explained here
It's now looking a little less scary :
Now, my favorite part: throwing some CSS at it. The file is located at /editor/skins/your_skin_name/fck_editor.css. I can't really tell you how to do this part because I'm assuming you have some CSS knowledge. I will suggest that if you aren't already using the Web Developer toolbar for Firefox that you do. This helps you narrow down all the elements to edit. After performing my magic on the pretty straight forward stylesheet my skin now looks like this :
Looking pretty snazzy if I do say so myself. You'll notice that I cheated and hid some key items like the 'Source' and 'Style' labels. We're planning on putting some nice tooltips on our buttons so they won't be necessary.
You can see that there is something funky happening with the style drop down and that the icons are squished over to the left side. This requires one more tweak in the /editor/js/ files. I left this to the end so I could see exactly what was happening with the skin.
This took some fiddling but the exact pixel number I ended up needing was 174px. This is just the amount of space the drop down needed to accommodate the lack of label and my new spacing, I suggest playing around with this a little.
Now my icons are properly spaced but there is one more icon image I need in there. My drop-down button is separate from the strip and is located in /editor/skins/your_skin_name/images/ There are a lot of images there you may need. I didn't, but they are worth playing around with.
And there you have it, one skinned fckeditor. Installing it and working with the editor styles are a whole other tutorial, probably best left to someone else. I hope this has helped in the presentation area anyway.
I also have every intention of packing up this skin for others to use so stay tuned for that.
If there are any questions or comments feel free to leave them in the comments below. I'll be happy to answer them to the best of my ability.You can also catch me on twitter: @klancashire
The Smallbox toolset allows anyone to REALLY utilize their website. No more waiting for the techno-wizards, just do it yourself. Instantly!!
Matt Warburton, Past President
GDC Society of Graphic Designers of Canada