gpEasy's HTML Editor (CKEditor)

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.

This is a simple gpEasy Tutorial to familiarize you with the WYSIWYG HTML editor used in gpEasy CMS, CKEditor.

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.

CKEditor Tutorial

  • The HTML Editor - CKEditor

    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.

  • Collapse the toolbar

    At the right of CKEditor is a little arrow that allows you to collapse the toolbar.

  • The toolbar collapsed.
  • The Source View Button

    This button toggles the view between the WYSIWYG view and the code view.

  • The Source View

    See the code?

  • The Templates Button

    Not a button I recommend using. These are templates that come with CKEditor. Applying a template WILL erase everything else in the editor.

  • Paste As Text Button

    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.

  • Paste From Word

    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.

  • The Spellchecker Buttons

    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.

  • The Find Button

    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.

  • Replace

    Yep, it even have a replace feature.

  • The Link Button

    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.

  • Link Target Dialog
  • Advanced options for links
  • The Anchor Button

    It's a flag? Yeah, doesn't remind you much of an anchor.

  • Insert Image Button

    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.

  • Link option for images

    Fill this in if you want your image linked to itself or something else.

  • Image advanced options

    More options for images.

  • Flash Properties Dialog

    This is the dialog you will have to fill out in order to insert a flash file.

  • Flash Properties Dialog
  • Advanced properties for flash files.
  • Table Properties Dialog

    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.

  • Insert a Smiley
  • The Special Character Dialog
  • The format menu

    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.

  • The Font Menu
  • Font size menu
  • The Maximize Button

    This button will maximize CKEditor to fill the entire screen. It's Very useful.

  • Show Blocks Button

    This button toggles the blocks view on and off.

  • About CKEditor

    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.

 

gpEasy B2sq Theme by CS @True Acupuncture