Footer

5 Dec 20186 minutes to read

This option allows you to specify which footer elements should display at the bottom of the editor. The available footer elements are listed below:

1. HTML View
2. HTML Tag Info
3. Characters Count / Word Count
4. Clear Format
5. Resizer
   It is enabled by using showFooter property.

HTML

<textarea id="editor"></textarea>

<script type="text/javascript">

    $("#editor").ejRTE({
        showFooter: true
    });
    
</script>

Source View

RichTextBox includes the ability for users to directly edit HTML code via “Source View” in a separate dialog. If you made any modification in Source view directly, click Update button to synchronize with Design view. This provides power users with more flexibility over the content they create.

You can paste HTML text into Source view. If you cut or copy from HTML source such as page source of Browser usingshowHtmlSource, paste as HTML (without escape characters) into Source view.

HTML

<textarea id="editor"></textarea>

<script type="text/javascript">

    $("#editor").ejRTE({
        showFooter:true,
        showHtmlSource:true
    });

</script>

NOTE

Source view is useful for working directly with raw HTML text, so this tool is mainly used for advanced users who would like to have more control over the source of their content.

HTML Tag Info

The HTML tag info tool that shows the path of currently selected tag along with hierarchy of parent tags to which it belongs using show Html tag Info property. The tag information is displayed at the bottom of the editor. It is used to determine which element has the focus in the editor’s content.

HTML

<textarea id="editor"></textarea>

<script type="text/javascript">

    $("#editor").ejRTE({
        showFooter:true,
        showHtmlTagInfo:true
    });

</script>

NOTE

The outermost tag is the body tag of < iframe > element in design view, so it shows the path from currently selected path to the body tag.

Characters Count/Word Count

The editor automatically counts the number of characters and words in the content while you type using showCharCount property. The characters and words count displayed at the bottom of the editor. You can limit the number of characters in your content using maxLength property. By default, the editor sets the characters limit value as 7000 characters.

HTML

<textarea id="editor"></textarea>
<script type="text/javascript">
    $(function () {

        $("#editor").ejRTE({
            showFooter: true,
            showWordCount: true,
            showCharCount: true,
            maxLength: 500
        });

    });
</script>

NOTE

The editor counts the characters by including the space, and this validation occurs while pasting the content into the editor also.

Clear Format

The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles. When you set the showClearFormat property to true, the clear format tool will be displayed at bottom of the editor.

JAVASCRIPT

<textarea id="editor"></textarea>

<script type="text/javascript">

    $("#editor").ejRTE({
        showFooter:true,
        showClearFormat:true
    });

</script>

Resize Handle

When you set the enableResize property to true, resize handle will be displayed at bottom-right corner of the editor. You can drag the handle to change its size. On resizing, the editor will automatically adjust the toolbar, content area, and footer within it accordingly. Resize limits can be defined via minHeight, maxHeight, minWidth, and maxWidth properties. You can specify the size of the editor programmatically through the height and width properties.

HTML

<textarea id="editor"></textarea>

<script type="text/javascript">

    $("#editor").ejRTE({
        showFooter:true,
        enableResize:true,
        width:600,minWidth:250,maxWidth:750,
        height:300,minHeight:250,maxHeight:500
    });

</script>

NOTE

1. As resizable option will be added in the footer of RTE, so set the showFooter property also as “true”.
   
2. In order to showcase only the resizer, disable the other properties in the Footer such as showClearFormat, showClearFormat, showCharCount, showWordCount
   
3. When you set the enableRTL property to true, the resize handle will automatically positioned to the bottom-left corner of the editor.
   

Characters Count/Word Count

The editor automatically counts the number of characters and words in the content while you type. The characters and words count displayed at the bottom of the editor. You can limit the number of characters in your content using maxLength property. By default, the editor sets the characters limit value as 7000 characters.

HTML

<textarea id="editor"></textarea>
    <script type="text/javascript">
        $(function () {

            $("#editor").ejRTE({
                showFooter: true,
                showWordCount: true,
                showCharCount: true,
                maxLength: 500
            });

        });
    </script>

By clicking the Characters Count/Word Count labels in footer , The word and character count information dialog is opened. It contains the details of the number of words and characters with and without spacing.

NOTE

The editor counts the characters by including the space, and this validation occurs while pasting the content into the editor also.