The Editor and How HTML is Displayed

Introduction

AutoKB features a built in editor that will assist you when you create your articles and glossary words. It has several built in functions that will allow you to quickly insert HTML formatting tags. This document gives an overview of how the built in editor works and how HTML is handled in articles, comments, and glossary words.

The Editor

Below is an example of how the editor will appear when you add or edit a glossary word or article.


Near the top of the editor you will find several icons that will assist you with automatically inserting HTML code into your article or glossary word. Each of those icons is explained below.

Create bold text
Clicking this icon will insert <b></b> tags where the cursor is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by <b></b> tags.


Create italicized text
Clicking this icon will insert <i></i> tags where the cursor is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by <i></i> tags.


Create underlined text
Clicking this icon will insert <u></u> tags where the cursor is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by <u></u> tags.


Create a section of non-rendered HTML code
Clicking this icon will insert [html][/html] tags where the cursor is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by [html][/html] tags.
The [html][/html] tags tell the software that the text inside those tags should not be rendered as HTML, but instead the actual HTML code should be displayed.


Insert a color value
Clicking this icon will pop up a window containing a color palette where you can select a color that you want to use. If no text is selected, the color value will be inserted at the cursor position within the text editor. If text is selected, the color value will be inserted in the style attribute of a span tag and the selected text will be surrounded by the span tag.


Align left
Clicking this icon will insert <div style="text-align: left"></div> tags where the curso is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by <div style="text-align: left"></div> tags.


Center
Clicking this icon will insert <div style="text-align: center"></div> tags where the curso is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by <div style="text-align: center"></div> tags.


Align right
Clicking this icon will insert <div style="text-align: right"></div> tags where the curso is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by <div style="text-align: right"></div> tags.


Justify
Clicking this icon will insert <div style="text-align: justify"></div> tags where the curso is currently positioned within the text editor.
If you have selected some text in the text editor and you click this icon, the selected text will be surrounded by <div style="text-align: justify"></div> tags.


Create a hyperlink
Clicking this icon will open a pop up window where you can fill in information about the link that you want to create. The Link To field specifies the text or item that should be linked, the Link URL field specifies the URL that the Link To item should be linked to, and the Target field specifies the target value for the created link. When you click the Insert Hyperlink button, a link with the format <a href="http://www.linkurl.com" target="_self">Link To</a> will be inserted at the current cursor position of the text editor. If you have selected some text before clicking this icon, the Link To field will be automatically filled in and that item will be linked when you press the Insert Hyperlink icon.


Insert an image
Clicking this icon will open a pop up window where you can either upload a new image, use one of the already uploaded images, or provide the URL to an image on your server. The Alt Value field specifies the value of the img tag's alt attribute and the Title field specifies the value of the img tag's title attribute. Click on the Insert Image button to insert the HTML code for the image into the text editor at the current cursor position.


Display Preview
Clicking this icon will open a pop up window where you can see a simple preview of the article or glossary word.

How HTML is Displayed

Before we discuss how HTML is displayed it is important to note that AutoKB will automatically convert newline characters (\r, \n, and \r\n) into a <br> tag so that when the article, definition, or comment is displayed it will be formatted how you have it in the text editor. For example, if you have an article that looks like this:

This is an example article.
This will show how newline characters are handled.

Here we have a blank line before this sentence.

When AutoKB displays this article as part of your knowledge base, it will automatically add the necessary <br> tags to the article so that it looks the same way as it did when you edited it through the control panel. This is how it will be modified by AutoKB before it is displayed in the knowledge base:

This is an example article.<br>
This will show how newline characters are handled.<br>
<br>
Here we have a blank line before this sentence.

As you can see, each of the newline characters has been converted to a <br> tag. These tags will not be visible, but instead they will be rendered by the browser so that the article looks the same as it did in the text editor. Therefore, it is not necessary to enter your own <br> tags in the article for formatting purposes, you can let AutoKB take care of that for you.

And now on to the information on how HTML code is handled. In each of the major 3 types of items that will be displayed - articles, glossary word definitions, and user comments - HTML is handled in a different way. This section will describe how HTML is handled in each of these three types of items.

Articles and Glossary Word Definitions
When you include HTML code in your articles or glossary word definitions it will be rendered normally by your browser. For example, if you include this code in your article or definition:

<u>This is some underlined text</u>

It will be displayed like this when you view the article:

This is some underlined text

You will not see the <u> and </u> tags when you view the article or definition, instead they will be used by the browser as they would on a normal HTML page. If you do want to show some actual HTML code in your article, use the special [html] and [/html] tags defined by AutoKB. Using the example above, if you surround the section in the [html] and [/html] tags like this:

[html]<u>This is some underlined text</u>[/html]

It will be displayed like this when you view the article:

<u>This is some underlined text</u>

AutoKB will take care of removing the [html] and [/html] tags automatically and it will make sure that the actual HTML code is displayed instead of being rendered by the browser. It is not required that the [html] and [/html] tags appear on the same line, you can have them on separate lines as long as the closing tag [/html] comes after the opening tag [html]. Example:

[html]
<table>
<tr>
<td>
</td>
</tr>
</table>
[/html]

In your article or definition this section will appear like this:

<table>
<tr>
<td>
</td>
</tr>
</table>

Comments
For security purposes, all HTML code in user submitted comments will be displayed as the HTML code and will not be rendered by the browser. It is important that it be this way. If the HTML were left to be rendered normally by a browser, malicious users could potentially insert JavaScript code in their comments which could cause problems with your knowledge base. For example, if someone submitted the following comment:


I am a malicious user trying to break your knowledge base

<META HTTP-EQUIV=Refresh CONTENT="0; URL=http://www.somebadsite.com/">


Notice that this comment has included a META HTML tag which would send any surfer who views this page with the comment on it to http://www.somebadsite.com/. Obviously you don't want that to happen, so the software will automatically convert any HTML tags it finds in the comments so the HTML code is displayed as-is instead of being rendered by the browser.