The "Literal text" button is located in the "Special Tools" area of the OE toolbar, it looks like this:

The "Literal text" button

This button can be used to create an area into which you may input unformatted text, for example program source code, HTML code, XML content, etc. Everything that is inside a literal block will be rendered in the same way (character by character) when the final output (the XHTML code) is generated. The system will use the "pre" tag when rendering literal blocks, this behavior is determined by the "/design/standard/templates/content/datatype/view/ezxmltags/literal.tpl" template.

Inserting literal text

1. Position the cursor at a location where you for example want to have a chunk of source code.
2. Click the "Literal text" button. You can also right click at the target location and choose the "Insert literal text" from the context menu. A modal dialog will appear (the screenshot is given below).

   

   The "Insert literal text" dialog.

3. If necessary, choose a class from the dropdown list. Click the "OK" button.
   A box with purple background will appear in the OE text area.
4. Type in the text inside the purple box as shown in the screenshot below.

   

   Online Editor: the content of the purple box will be displayed as literal text.

Changing the class for a literal box

1. Right click on the table border and select "Properties" from the context menu:

   

   Online Editor: accessing the literal text properties.

   
   You will see a modal dialog (as described in "Inserting a literal text).
2. Select the desired class from the dropdown list and click the "OK" button.

Removing literal text

Literal text is visualized using a purple box. When using a Mozilla based browser, you can simply click somewhere inside the purple area, you will see two "x" elements near the borders. Click on one of the "x" elements to remove the table. When using Internet Explorer, you can simply right click on the purple box and select "Delete" from the context menu.

Creating a simple HTML editor using the literal feature

In this example we will create a special literal box that will function as a simple HTML editor. In other words, the solution will allow you to use and publish HTML directly using the Online Editor. This will be done using a custom class and a modified version of the template that is used to render literal text.

1. Add a class called "html" using the "AvailableClasses[]" configuration array within an override for "content.ini".
2. Create a custom/replacement version of the "literal.tpl" template. Simply copy the standard template and place it in the "templates/content/datatype/view/ezxmltags/" directory within your custom design. The system will use this template when rendering literal text.
3. If the "html" class is used, the literal text should be rendered directly as HTML code. If not, it should be rendered using the "pre" tag. You can easily achieve this functionality by replacing the original template code in the custom "literal.tpl" file with the following:
   

   {if ne( $classification, 'html' )}
   <pre{if ne( $classification|trim, '' )} class="{$classification|wash}"{/if}>{$content|wash( xhtml )}</pre>
   {else}
   {$content}
   {/if}
   

4. Clear the caches and test the functionality by writing HTML into an "html"-classified literal box. When the page is rendered, the code that you typed into the "html"-classified literal box should be output as HTML. Literal content that is not using the "html" class will be washed and encapsulated by "pre" tags.

Please note that in eZ Publish 3.8.4 and later versions this type of classification will be disabled by default since allowing editors to insert HTML and Javascript code directly into XML blocks is not safe. It is not recommended to enable the "html" class unless you really trust all users who have privileges to edit objects containing XML blocks.