Getting Started

28 Feb 20175 minutes to read

This section briefly describes about how to create a RichTextEditor in your application with JSP.

This section helps to understand the getting started of RichTextEditor control with the step-by-step instruction.

The external script dependencies of the RichTextEditor widget is,

  • jQuery 1.7.1 and later versions.
File  Description / Usage
ej.core.min.js Must be referred always before using all the controls.
ej.data.min.js Used to handle data operation and should be used while binding data to controls.
ej.scroller.min.js Should be referred when using scroller in RichTextEditor.
ej.draggable.min.js Should be referred when using dragging in RichTextEditor.
ej.button.min.js Should be referred when using togglebutton in RichTextEditor.
ej.splitbutton.min.js Should be referred when using splitbutton in RichTextEditor.
ej.checkbox.min.js Should be referred when using checkbox in RichTextEditor.
ej.radiobutton.min.js Should be referred when using radiobutton in RichTextEditor.
ej.dropdownlist.min.js Should be referred when using dropdownlist in RichTextEditor.
ej.dialog.min.js Should be referred when using dialog in RichTextEditor.
ej.toolbar.min.js Should be referred when using toolbar in RichTextEditor.
ej.editor.min.js Should be referred when using editor in RichTextEditor.
ej.menu.min.js Should be referred when using menu in RichTextEditor.
ej.tab.min.js Should be referred when using tab in RichTextEditor.
ej.slider.min.js Should be referred when using slider in RichTextEditor.
ej.treeview.min.js Should be referred when using treeview in RichTextEditor.
ej.uploadbox.min.js Should be referred when using uploadbox in RichTextEditor.
ej.splitter.min.js Should be referred when using splitter in RichTextEditor.
ej.colorpicker.min.js Should be referred when using colorpicker in RichTextEditor.
ej.fileexplorer.min.js Should be referred when using fileexplorer in RichTextEditor.
ej.grid.min.js Should be referred when using grid in RichTextEditor.
ej.tooltip.min.js Should be referred when using tooltip in RichTextEditor.

For getting started you can use the ‘ej.web.all.min.js’ file, which encapsulates all the ‘ej’ controls and frameworks in one single file.
For themes, you can use the ‘ej.web.all.min.css’ CDN link from the snippet given. To add the themes in your application, please refer this link.

Create a simple RichTextEditor in JSP

You can create an JSP application and add necessary scripts with the help of the given JSP Getting Started Documentation..

The RichTextEditor can be created in JSP by using the below given code.

  • html
  • <ej:rte id="rteSample" width="100%">
    		<ej:rte-contentTemplate>
    			&lt;p&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;/p&gt;
    		    &lt;p&gt;The Rich Text Editor (RTE) control is an easy to render in
    		    client side. Customer easy to edit the contents and get the HTML content for
    		    the displayed content. A rich text editor control provides users with a toolbar
    		    that helps them to apply rich text formats to the text entered in the text
    		    area. &lt;/p&gt;
    		    &lt;p&gt;&lt;b&gt;Functional
    		    Specifications/Requirements:&lt;/b&gt;&lt;/p&gt;
    		    &lt;ol&gt;&lt;li&gt;&lt;p&gt;Provide
    		    the tool bar support, it's also customizable.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Options
    		    to get the HTML elements with styles.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Support
    		    to insert image from a defined path.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Footer
    		    elements and styles(tag / Element information , Action button (Upload, Cancel))&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Re-size
    		    the editor support. &lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Provide
    		    efficient public methods and client side events.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Keyboard
    		    navigation support.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;
    		</ej:rte-contentTemplate>
    	</ej:rte>

    You can execute the above code example to display the RichTextEditor control.

    Configuring the RichTextEditor

    This section encompasses the details on how to configure the RichTextEditor component with its API properties like enableRTL, isResponsive.

  • html
  • <ej:rte id="rteSample" isResponsive="true" enableRTL="true" width="100%">
    		<ej:rte-contentTemplate>
    			&lt;p&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;/p&gt;
    		    &lt;p&gt;The Rich Text Editor (RTE) control is an easy to render in
    		    client side. Customer easy to edit the contents and get the HTML content for
    		    the displayed content. A rich text editor control provides users with a toolbar
    		    that helps them to apply rich text formats to the text entered in the text
    		    area. &lt;/p&gt;
    		    &lt;p&gt;&lt;b&gt;Functional
    		    Specifications/Requirements:&lt;/b&gt;&lt;/p&gt;
    		    &lt;ol&gt;&lt;li&gt;&lt;p&gt;Provide
    		    the tool bar support, it's also customizable.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Options
    		    to get the HTML elements with styles.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Support
    		    to insert image from a defined path.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Footer
    		    elements and styles(tag / Element information , Action button (Upload, Cancel))&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Re-size
    		    the editor support. &lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Provide
    		    efficient public methods and client side events.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Keyboard
    		    navigation support.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;
    		</ej:rte-contentTemplate>
    	</ej:rte>

    The above code will render the following output in the display screen

    Setting and Getting Content

    You can set the content of the editor as follows.

  • html
  • <ej:rte id="rteSample" value="The Rich Text Editor (RTE) control is an easy to render in client side. Customer easy to edit the contents and get the HTML content for the displayed content" width="100%">
    		<ej:rte-contentTemplate>
    			&lt;p&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;/p&gt;
    		    &lt;p&gt;The Rich Text Editor (RTE) control is an easy to render in
    		    client side. Customer easy to edit the contents and get the HTML content for
    		    the displayed content. A rich text editor control provides users with a toolbar
    		    that helps them to apply rich text formats to the text entered in the text
    		    area. &lt;/p&gt;
    		    &lt;p&gt;&lt;b&gt;Functional
    		    Specifications/Requirements:&lt;/b&gt;&lt;/p&gt;
    		    &lt;ol&gt;&lt;li&gt;&lt;p&gt;Provide
    		    the tool bar support, it's also customizable.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Options
    		    to get the HTML elements with styles.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Support
    		    to insert image from a defined path.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Footer
    		    elements and styles(tag / Element information , Action button (Upload, Cancel))&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Re-size
    		    the editor support. &lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Provide
    		    efficient public methods and client side events.&lt;/p&gt;&lt;/li&gt;&lt;li&gt;&lt;p&gt;Keyboard
    		    navigation support.&lt;/p&gt;&lt;/li&gt;&lt;/ol&gt;
    		</ej:rte-contentTemplate>
    	</ej:rte>