Getting Started

6 Jun 20234 minutes to read

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

The external script dependencies of the RichTextEditor widget is,

And the internal script dependencies of the RichTextEditor widget are:

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.draggable.min.js Should be referred when using dragging in RichTextEditor
ej.scroller.min.js Should be referred when using scroller in RichTextEditor
ej.button.min.js Should be referred when using button in RichTextEditor
ej.togglebutton.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.

Preparing HTML document

You can create a PHP Project and add necessary scripts and styles with the help of the given PHP Getting Started Documentation.

Create a first PHP file in Xampp and name it appropriately with .php extension and also place it under the newly created sample folder. For example, say Index.php with the initial code as shown below -

Refer the required scripts and CSS files in your PHP page as mentioned below in order to render the RichTextEditor control -

  • HTML
    • <!DOCTYPE html>
       <html>
        <head>
                <title>Getting Started - RichTextEditor</title>
                <link href="http://cdn.syncfusion.com/24.2.3/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
                <link href="http://cdn.syncfusion.com/24.2.3/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
                <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js"></script>
                <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
        </head>
        <body>
           <?php require_once 'EJ/AutoLoad.php'; ?>
        </body>
    </html>

    Control Initialization

    The basic rendering of RichTextEditor is achieved by the default functionality.

  • HTML
    • <div id="controls">
	 <div class="cols-sample-area">	 
        <?php
        require_once '../EJ/AutoLoad.php';
        $toolsList = array("style", "lists", "doAction", "links", "images");
        $rte =new EJ\RTE('texteditor');
        $rte->templateStart();
        ?>
        The RichTextEditor (RTE) control enables you to edit the contents with insert table and images,
        it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea
        <?php
        $rte->templateEnd();
        echo $rte->render();
        ?>
     </div>
</div>

    Setting and Getting Content

    You can set the content of the editor as follows.

  • JAVASCRIPT
    • $("#texteditor").ejRTE({
value: "The RichTextEditor (RTE) control enables you to edit the contents with insert table and images," +
" it also provides a toolbar that helps to apply rich text formats to the content entered in the TextArea.",
});

    To retrieve the editor contents,

  • JAVASCRIPT
    • var currentValue = $("#texteditor").ejRTE("model.value");