Note for gpEasy 2.x. CKEditor now has a floating window. Otherwise the info here is generally the same. When editing extra content files you will see the CKEditor as it appears in these screenshots however, when editiong an Editable Text section of a page you will have a floating toolbar and true inline WYSIWYG editing.
What's WYSIWYG? It an abbreviation for, what you see is what you get. In other words, it's a visual editor that displays the final look of a page instead of the code; however, CKEditor can also display the source code.
What's an HTML editor? Simply put it's a software application specifically designed for creating and editing web pages and working with HTML code. While you can use a text editor to edit HTML code a HTML editor can make it much easier especially for the novice HTML coder. What's CKEditor? It's a full featured open source WYSIWYG HTML editor plugin that gpEasy uses as its HTML editor. You don't really need to know much more about it than that. Most users will just use the HTML editor in gpEasy CMS as is; however, a few of us will want to customize it. For those that do, you can checkout my CKEditor tips page. Also on that page are some general tips for working in CKEditor that all users ought to familiarize themselves with.
This CKEditor tutorial is concerned with familiarizing you with CKEditor's toolbar buttons. Many of the toolbar buttons will be familiar to all who have used any type of word processor such as, bold, italic, justify, etc. Therefore, this will not be an exhaustive explanation of all features but a general guide pointing out the more unique features and dialogs you will find in CKEditor. This tutorial will not explain what the different HTML fields do. To learn about HTML coding please do a Google search as there are thousands of HTML & CSS tutorials on the net.
Once again this is a pictorial tutorial, enjoy.
You should know how to get to the editor by this point.
The toolbar buttons you see are a custom set for gpEasy.
Take a minute and hover your mouse over the different toolbar buttons. Many of the buttons are just like the ones on most word processors.
At the right of CKEditor is a little arrow that allows you to collapse the toolbar.
This button toggles the view between the WYSIWYG view and the code view.
See the code?
Not a button I recommend using. These are templates that come with CKEditor. Applying a template WILL erase everything else in the editor.
This is a feature you need to be familiar with when using an HTML editor.
When you need to paste pre-formatted text into a page but do NOT want to keep the formatting this is how you do it. The paste as text feature strips all formatting.
This another paste as feature. This one is designed to work with MS Word.
Personally I don't want MS Wrod's extra code in my clean HTML web pages so I usually use the paste as text feature; however, if you are insistent on keeping the exact look of something from Word then this is your feature.
I've removed the button from my toolbar.
Personally I use the browser's build in spell checking; however, if you really want to enable CKEditor's check spelling as you type feature then here you are.
Just what you think it would be.
I rarely use this as the browser has a nice built in find, but for those times you only want to find within the document. . . this is it.
Yep, it even have a replace feature.
This is a very important feature for web pages. You will use this regularly.
CKEditor has most of the normal fields that link editors have.
This tutorial is not about teaching you all the different HTML tags, elements and attributes. To learn about those things there are plenty of HTML tutorials on line.
It's a flag? Yeah, doesn't remind you much of an anchor.
This is the dialog you will get when you insert an image.
Notice you can browse the server for an image. If you do, you will enter the uploaded files manager that we used in the gallery tutorial.
Fill this in if you want your image linked to itself or something else.
More options for images.
This is the dialog you will have to fill out in order to insert a flash file.
When you click the table button you will get this dialog. CKEditor doesn't have that many table features. . . most HTML editors are lacking in this area when compared to word processors.
This is where you find your formatting for header, paragraphs, and text in general. Most formatting for web pages is done via cascading style sheets.
This button will maximize CKEditor to fill the entire screen. It's Very useful.
This button toggles the blocks view on and off.
The final button tells you a little about CKEditor. You can learn more at the CKEditor web site.
That's all there is to this tutorial. It isn't designed to teach you HTML. It's only hear to help you familiarize yourself with CKEditor's toolbar.