The Bottom Bar


How to utilize the bottom bar

The last item in the CK Editor we will cover is the bottom bar. Though most of the utility in the text editor is in the top toolbar, the bottom bar does have some uses.

Step 1:  Using the HTML Element Examiner

Let's start on the left side of the bottom bar. If you create a new page and look in the lower left hand of the body text editor, you will probably see a word and a letter, like in the example highlighted below:

Screenshot of body text with bottom bar highlighted

If you know HTML tags, you will recognize them as the body tag and the paragraph tag. The lower left-hand corner of the text editor shows which HTML elements are in the text you have your cursor on. If you click on one of these tags, you will notice that each tag's element will get highlighted. If you click on "body," the whole body text box will be highlighted. Similarly, if you click on "p," the whole paragraph will be highlighted:

Screenshot of body text with a paragraph highlighted

You may be asking yourself why this is useful. If you have formatting that is making your page look strange, knowing which tags are being used would help tremendously. Also, if you are trying to get rid of linked text, you can see if there is a space with the link tag (which is an "a") in your paragraph. You can also use it to discover the element referenced by a tag. In this example, I didn't know what "span" referred to, so I clicked on the tag in the bottom bar:

Screenshot of the span tag in action

Span is a special HTML element that is tied to specific CSS styling. In this case, span refers to the spell checker. You can read more about the span element here.


Step 2: Using the Text Box Resizer

The other utility that comes in the bottom bar is the text box resizer. Are you creating content that requires you to see all of your body text to edit it effectively? If the answer is yes, then the text box resizer will come in handy. It is located on the right side of the bottom bar.

Screenshot of body text with text resizer highlighted

Using the text box resizer is very simple. Click on the arrow that is highlighted above and drag the text box up or down until it is the size you desire. This is what the maximum text box size looks like (click for full size):

Screenshot of the enitre text box

Hopefully, these tutorials answered all of your questions about the CK Editor!!

 We talked about everything in the toolbar, from the clipboard to the body text resize button. If you have any other questions or concerns, please e-mail Ann Greazel at