Getting Started

23 Nov 20173 minutes to read

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

Script and CSS reference

Create a new HTML file and include the below code

  • HTML
    • <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

    Add link to the CSS file from the specific theme folder to your HTML file within the head section. Refer the built-in available themes from here.

  • HTML
    • <head>
   <meta charset ="utf-8" />
   <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"/>
</head>

    Also add links to the CDN Script files along with the other external dependencies as depicted below,

  • HTML
    • <head>
   <meta charset="utf-8" />
   <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" />
   <script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
   <script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
   <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
   <script src="http://cdn.syncfusion.com/24.2.3/js/web/ej.web.all.min.js"></script>
</head>

    NOTE

    Uncompressed version of the required library files are available for the development or debugging purpose which can be generated from the custom script here. Also to reduce the file size further please use GZip compression in your server.

    Control Initialization

    Create a TextArea element within the body of the HTML document where the widget needs to be rendered.

  • HTML
    • <body>
   <textarea id ="editor"></textarea>
</body>

    Initialize the editor by adding the following script to the HTML document.

  • HTML
    • <body>
   <textarea id="editor"></textarea>
   
   <script type="text/javascript">
        $(function () {
            $("#editor").ejRTE();
        });
   </script>
</body>

    Toolbar–Configuration

    You can configure a toolbar with the tools using tools and toolsList properties as your application requires.

  • JAVASCRIPT
    • $(function () {
$("#editor").ejRTE({
toolsList: ["style", "lists", "doAction", "links", "images"],
tools: {
style: ["bold", "italic"],
lists: ["unorderedList", "orderedList"],
doAction: ["undo", "redo"],
links: ["createLink"],
images: ["image"]
}
});
});

    Setting and Getting Content

    You can set the content of the editor using value as follows.

  • JAVASCRIPT
    • <textarea id="editor"></textarea>
   
<script type="text/javascript">
    $("#editor").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.",
    });
</script>

    To retrieve the editor contents,

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

    You can find sample to quick start with the editor here.