ejRTE

3 Aug 201824 minutes to read

Rich text editor is a component that help you to display or edit the content including tables, hyperlinks, paragraphs, lists, video, and images. The editor supports file and folder management using FileExplorer component.

Name	Type	Description
options	object	settings for RTE.

Example:

HTML

<textarea ej-rte width="100%" height="300px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

Requires

• module:jQuery

• module:ej.core.js

• module:ej.data.js

• module:ej.scroller.js

• module:ej.draggable.js

• module:ej.globalize.js

• module:ej.button.js

• module:ej.togglebutton.js

• module:ej.splitbutton.js

• module:ej.checkbox.js

• module:ej.radiobutton.js

• module:ej.dropdownlist.js

• module:ej.dialog.js

• module:ej.toolbar.js

• module:ej.editor.js

• module:ej.menu.js

• module:ej.tab.js

• module:ej.slider.js

• module:ej.treeview.js

• module:ej.uploadbox.js

• module:ej.splitter.js

• module:ej.colorpicker.js

• module:ej.fileexplorer.js

• module:ej.grid.js

• module:ej.tooltip.js

• module:ej.rte.js

Members

allowEditing boolean

Enables/disables the editing of the content.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [allowEditiog]=false [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

allowKeyboardNavigation boolean

RTE control can be accessed through the keyboard shortcut keys.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [allowKeyboardNavigation]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

autoFocus boolean

When the property is set to true, it focuses the RTE at the time of rendering.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

autoHeight boolean

Based on the content size, its height is adjusted instead of adding the scrollbar.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [autoHeight]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

pasteCleanupSettings object

This API holds configuration setting for paste cleanup behavior.

Default Value

• { listConversion: false, cleanCSS: false, removeStyles: false, cleanElements: false }

Example

HTML

<textarea ej-rte id="rteSample" rows="10" cols="30" [value]="val"  width=100% minWidth="100px" style="width: 740px; height: 440px" [pasteCleanupSettings]="pasteCleanupSettings">       
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    val:any;
    pasteCleanupSettings: any;

    constructor() {
       this.val="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.";
       this.pasteCleanupSettings={
               listConversion:true,
               cleanCSS:true,
               removeStyles:true,
               cleanElements:true
           };
    }
    
}

pasteCleanupSettings.listConversion boolean

This API is used to convert the list elements pasted from word document to editor.

Default Value

• false

pasteCleanupSettings.cleanCSS boolean

This API is used to clean the unwanted css in the elements pasted from word document to editor.

Default Value

• false

pasteCleanupSettings.removeStyles boolean

This API is used to remove all styles in the elements pasted from word document to editor.

Default Value

• false

pasteCleanupSettings.cleanElements boolean

This API is used to clean the unwanted elements pasted from word document to editor.

Default Value

• false

colorCode object

Sets the colorCode to display the color of the fontColor and backgroundColor in the font tools of the RTE.

Default Value

• [“000000”, “FFFFFF”, “C4C4C4”, “ADADAD”, “595959”, “262626”, “4f81bd”, “dbe5f1”, “b8cce4”, “95b3d7”, “366092”, “244061”, “c0504d”, “f2dcdb”, “e5b9b7”, “d99694”, “953734”,
  “632423”, “9bbb59”, “ebf1dd”, “d7e3bc”, “c3d69b”, “76923c”, “4f6128”, “8064a2”, “e5e0ec”, “ccc1d9”, “b2a2c7”, “5f497a”, “3f3151”, “f79646”, “fbd5b5”, “fac08f”,”e36c09”, “974806”]

Example

HTML

<textarea ej-rte class="rte" [(toolsList)]="List" [colorCode]="colorCode" [(tools)]="tools" ></textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    constructor() {
        this.List =  ["font"];
        this.tools = {
            font: ["fontColor", "backgroundColor"]
        };
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

colorPaletteColumns number

The number of columns given are rendered in the color palate popup.

Default Value

• 6

Example

HTML

<textarea ej-rte width="100%" height="300px" [(toolsList)]="List" [colorCode]="colorCode" [colorPaletteColumns]="colorPaletteColumns" [tools]="tools" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["font"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"]
        };
        this.colorPaletteColumns=10;
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

colorPaletteRows number

The number of rows given are rendered in the color palate popup.

Default Value

• 6

Example

HTML

<textarea ej-rte width="100%" height="300px" [(toolsList)]="List" [colorCode]="colorCode" [colorPaletteRows]="colorPaletteRows" [tools]="tools" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteRows: number;
    constructor() {
        this.List =  ["font"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"]
        };
        this.colorPaletteRows=10;
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646","fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

cssClass string

Sets the root class for the RTE theme. This cssClass API helps the usage of custom skinning option for the RTE control by including this root class in CSS.

Default Value

• ””

Example

HTML

<textarea ej-rte width="100%" height="300px" cssClass="cssclass" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

The css must be placed in stylesheet.

HTML

<style>
.cssclass{
    
}
</style>

enabled boolean

Enables/disables the RTE control’s accessibility or interaction.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [enabled]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

enableHtmlEncode boolean

When the property is set to true, it returns the encrypted text.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [enableHtmlEncode]=false [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

enablePersistence boolean

Maintain the values of the RTE after page reload.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [enablePersistence]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

enableResize boolean

Shows the resize icon and enables the resize option in the RTE.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [enableResize]=true [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

enableRTL boolean

Shows the RTE in the RTL direction.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

enableXHTML boolean

Formats the contents based on the XHTML rules.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [enableXHTML]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

enableTabKeyNavigation boolean

Enables the tab key action with the RichTextEditor content.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [enableTabKeyNavigation]=false [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

exportToPdfSettings object

This API allows to enable url and fileName for pdf export.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" [exportToPdfSettings]="exportToPdfSettings" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.exportToPdfSettings= {
  url: "http://js.syncfusion.com/demos/ejServices/api/RTE/PdfExport",


fileName: "Sample"};
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

exportToPdfSettings.url string

This API is used to receive the server-side handler for export related operations.

Default Value

• ””

Example

HTML

<textarea ej-rte width="100%" height="300px" [exportToPdfSettings]="exportToPdfSettings" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.exportToPdfSettings= {
  url: "http://js.syncfusion.com/demos/ejServices/api/RTE/PdfExport",


fileName: "Sample"};
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

exportToPdfSettings.fileName string

Specifies the file name for the exported pdf file.

Example

HTML

<textarea ej-rte width="100%" height="300px" [exportToPdfSettings]="exportToPdfSettings" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.exportToPdfSettings= {
  url: "http://js.syncfusion.com/demos/ejServices/api/RTE/PdfExport",


fileName: "Sample"};
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

exportToWordSettings object

This API allows to enable url and fileName for word export.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" [exportToWordSettings]="exportToPdfSettings" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.exportToWordSettings= {
  url: "http://js.syncfusion.com/demos/ejServices/api/RTE/PdfExport",


fileName: "Sample"};
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

exportToWordSettings.url string

This API is used to receive the server-side handler for export related operations.

Default Value

• ””

Example

HTML

<textarea ej-rte width="100%" height="300px" [exportToWordSettings]="exportToPdfSettings" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.exportToWordSettings= {
  url: "http://js.syncfusion.com/demos/ejServices/api/RTE/PdfExport",


fileName: "Sample"};
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

exportToWordSettings.fileName string

Specifies the file name for the exported word file.

Example

HTML

<textarea ej-rte width="100%" height="300px" [exportToWordSettings]="exportToPdfSettings" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.exportToWordSettings= {
  url: "http://js.syncfusion.com/demos/ejServices/api/RTE/PdfExport",


fileName: "Sample"};
        this.colorCode= [
                    "000000", "FFFFFF", "C4C4C4", "ADADAD", "595959", "262626", "4f81bd", "dbe5f1", "b8cce4", "95b3d7", "366092", "244061", "c0504d", "f2dcdb", "e5b9b7", "d99694", "953734","632423", "9bbb59", "ebf1dd", "d7e3bc", "c3d69b", "76923c", "4f6128", "8064a2", "e5e0ec", "ccc1d9", "b2a2c7", "5f497a", "3f3151", "f79646",  "fbd5b5", "fac08f",
                    "e36c09", "974806"
            ];
    }
    
}

externalCSS string

Load the external CSS file inside Iframe.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" [externalCSS]="css" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  css: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
      this.css = "default.css";
  }
}

fileBrowser object

This API allows to enable the file browser support in the RTE control to browse, create, delete and upload the files in the specified current directory.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" [(toolsList)]="List" [tools]="tools" [fileBrowser]="fileBrowser" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fileBrowser: any;
    content: string;
   
    constructor() {
        this.List =  ["images"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            images: ["image"]
        };
        this.fileBrowser = {
  filePath: "../FileExplorerContent/",
 extensionAllow: "*.png, *.doc, *.pdf, *.txt, *.docx",
ajaxAction: "http://mvc.syncfusion.com/OdataServices/api/fileoperation/",
};
    }
    
}

fileBrowser.ajaxAction string

This API is used to receive the server-side handler for file related operations.

Default Value

• ””

fileBrowser.extensionAllow string

Specifies the file type extension shown in the file browser window.

fileBrowser.filePath string

Specifies the directory to perform operations like create, delete and rename folder and files, and upload the selected files to the current directory.

fontName object

Sets the fontName in the RTE.

Default Value

• {text: “Segoe UI”, value: “Segoe UI” },
  {text: “Arial”, value: “Arial,Helvetica,sans-serif” },
  {text: “Courier New”, value: “Courier New,Courier,Monospace” },
  {text: “Georgia”, value: “Georgia,serif” },
  {text: “Impact”, value: “Impact,Charcoal,sans-serif” },
  {text: “Lucida Console”, value: “Lucida Console,Monaco,Monospace” },
  {text: “Tahoma”, value: “Tahoma,Geneva,sans-serif” },
  {text: “Times New Roman”, value: “Times New Roman” },
  {text: “Trebuchet MS”, value: “Trebuchet MS,Helvetica,sans-serif” },
  {text: “Verdana”, value: “Verdana,Geneva,sans-serif”}

Example

HTML

<textarea ej-rte class="rte" [(toolsList)]="List" [(tools)]="tools"  [fontName]="fonts" ></textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    constructor() {
        this.fonts = [
                { text: "Segoe UI", value: "Segoe UI" },
                //Added from Google web fonts
                { text: "Noto Sans", value: "Noto Sans" },
                { text: "Roboto", value: "Roboto" },
                { text: "Great vibes", value: "Great Vibes,cursive" }
         ];
        this.List = ["links", "lists", "doAction", "style", "images"];
        this.tools = { style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"] };
    }
   
}

fontSize object

Sets the fontSize in the RTE.

Default Value

• { text: “1”, value: “1” },
  { text: “2 (10pt)”, value: “2” },
  { text: “3 (12pt)”, value: “3” },
  { text: “4 (14pt)”, value: “4” },
  { text: “5 (18pt)”, value: “5” },
  { text: “6 (24pt)”, value: “6” },
  { text: “7 (36pt)”, value: “7” }

Example

HTML

<textarea ej-rte class="rte" [(toolsList)]="List" [(tools)]="tools"  [fontSize]="fonts" ></textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    constructor() {
        this.fonts = [
               {
                    text: "1",
                    value: "1"
                },
                {
                    text: "2 (10pt)",
                    value: "2"
                },
                {
                    text: "3 (12pt)",
                    value: "3"
                },
                {
                    text: "4 (14pt)",
                    value: "4"
                },
                {
                    text: "5 (18pt)",
                    value: "5"
                },
                {
                    text: "6 (24pt)",
                    value: "6"
                },
                {
                    text: "7 (36pt)",
                    value: "7"
                }
         ];
        this.List = ["links", "lists", "doAction", "style", "images"];
        this.tools = { style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"] };
    }
   
}

format string

Sets the format in the RTE.

Default Value

• { text: “Paragraph”, value: “<p>”, spriteCssClass: “e-paragraph” },
  { text: “Quotation”, value: “<blockquote>”, spriteCssClass: “e-quotation” },
  { text: “Heading 1”, value: “<h1>”, spriteCssClass: “e-h1” },
  { text: “Heading 2”, value: “<h2>”, spriteCssClass: “e-h2” },
  { text: “Heading 3”, value: “<h3>”, spriteCssClass: “e-h3” },
  { text: “Heading 4”, value: “<h4>”, spriteCssClass: “e-h4” },
  { text: “Heading 5”, value: “<h5>”, spriteCssClass: “e-h5” },
  { text: “Heading 6”, value: “<h6>”, spriteCssClass: “e-h6”}

Example

HTML

<textarea ej-rte class="rte" [(toolsList)]="List" [(tools)]="tools"  [format]="format" ></textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    format:any;
    constructor() {
        this.format = [
              { text: "Paragraph", value: "<p>", spriteCssClass: "e-paragraph" },
                { text: "Quotation", value: "<blockquote>", spriteCssClass: "e-quotation" }, 
                { text: "Heading 1", value: "<h1>", spriteCssClass: "e-h1" }, 
                { text: "Heading 2", value: "<h2>", spriteCssClass: "e-h2" }, 
                { text: "Heading 3", value: "<h3>", spriteCssClass: "e-h3" }, 
                { text: "Heading 4", value: "<h4>", spriteCssClass: "e-h4" }, 
                { text: "Heading 5", value: "<h5>", spriteCssClass: "e-h5" }, 
                { text: "Heading 6", value: "<h6>", spriteCssClass: "e-h6" }
         ];
        this.List = ["links", "lists", "doAction", "style", "images"];
        this.tools = { style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"] };
    }
   
}

height string number

Defines the height of the RTE textbox.

Default Value

• 370

Example

HTML

<textarea ej-rte width="100%" height="300px" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

htmlAttributes object

Specifies the HTML Attributes of the ejRTE.

Default Value

• {}

Example

HTML

<textarea ej-rte class="rte" [(toolsList)]="List" [(tools)]="tools"  [htmlAttributes]="html" ></textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    html: Object;
    
    constructor() {
        this.html={readOnly: "readOnly"};
        this.List = ["links", "lists", "doAction", "style", "images"];
        this.tools = { style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"] };
    }
   
}

iframeAttributes object

Sets the given attributes to the iframe body element.

Default Value

• {}

Example

HTML

<textarea ej-rte class="rte" [(toolsList)]="List" [(tools)]="tools"  [iframeAttributes]="iframe" ></textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    iframe: Object;
    
    constructor() {
        this.iframeAttributes = { style :"color:#5C5C5C" };
        this.List = ["links", "lists", "doAction", "style", "images"];
        this.tools = { style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"] };
    }
   
}

imageBrowser object

This API allows the image browser to support in the RTE control to browse, create, delete, and upload the image files to the specified current directory.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" [(toolsList)]="List" [tools]="tools" [imageBrowser]="imageBrowser" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    content: string;
    imageBrowser: any;
    constructor() {
        this.List =  ["images"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            images: ["image"]
        };
        this.imageBrowser= {
  filePath: "../FileExplorerContent/",
 extensionAllow: "*.png, *.gif, *.jpg, *.jpeg, *.docx",
ajaxAction: "http://mvc.syncfusion.com/OdataServices/api/fileoperation/",
};
    }
    
}

imageBrowser.ajaxAction string

This API is used to receive the server-side handler for the file related operations.

imageBrowser.extensionAllow string

Specifies the file type extension shown in the image browser window.

imageBrowser.filePath string

Specifies the directory to perform operations like create, delete and rename folder and files, and upload the selected images to the current directory.

importSettings object

This API allows to enable the url for connecting to RTE import.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px"  [importSettings]="importSettings" [(toolsList)]="List" [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;    
    content: string;
    importSettings: any;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.importSettings = { url: "http://js.syncfusion.com/demos/ejServices/api/RTE/Import" };        
    }
    
}

importSettings.url string

This API is used to receive the server-side handler for import operations.

Default Value

• ””

Example

HTML

<textarea ej-rte width="100%" height="300px"  [importSettings]="importSettings" [(toolsList)]="List" [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;    
    content: string;
    importSettings: any;
    constructor() {
        this.List =  ["font","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            font: ["fontColor", "backgroundColor"],



importExport: ["import", "wordExport", "pdfExport"],
        };
        this.importSettings = { url: "http://js.syncfusion.com/demos/ejServices/api/RTE/Import" };        
    }
    
}

isResponsive boolean

Enables/disables responsive support for the RTE control toolbar items during the window resizing time.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [isResponsive]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

locale string

Sets the culture in the RTE when you set the localization values are needs to be assigned to the corresponding text as follows.

Default Value

• “en-US”

Example

HTML

<textarea ej-rte width="100%" height="300px" locale="es-ES" [(value)]="content" [(toolsList)]="List" [isResponsive]="responsive">
</textarea>

TS

import {Component} from '@angular/core';

declare var ej: any;
@Component({
  selector: 'ej-app',
  templateUrl: './localization.component.html'
})
export class LocalizationComponent {
  content: string;
  responsive: boolean;
  List: any;
  constructor() {
    this.responsive = true;
    this.content = 'Description: 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 from RTE';
    this.List = ['formatStyle', 'font', 'style', 'effects', 'alignment', 'lists', 'indenting', 'clipboard', 'doAction', 'clear', 'casing', 'customTools', 'print'];
  }
}
ej.RTE.Locale['es-ES'] = {
  bold: 'audaz',
  italic: 'itálico',
  underline: 'subrayar',
  strikethrough: 'Tachado',
  superscript: 'sobrescrito',
  subscript: 'subíndice',
  justifyCenter: 'Centrar texto',
  justifyLeft: 'Alinear texto a la izquierda',
  justifyRight: 'Alinear texto a la derecha',
  justifyFull: 'justificar',
  fileBrowser: 'archivo Browser',
  unorderedList: 'Inserte lista desordenada',
  orderedList: 'Insertar lista ordenada',
  indent: 'muesca',
  solid: 'solida',
  dashed: 'frauditaj',
  dotted: 'punktita',
  doubled: 'duobla',
  closeIcon: 'Fermi',
  buttonApply: 'apliki',
  buttonCancel: 'nuligi',
  outdent: 'reducir sangría',
  cut: 'Cortar',
  copy: 'Copia',
  paste: 'Pegar',
  undo: 'deshacer',
  redo: 'rehacer',
  upperCase: 'Mayúscula',
  lowerCase: 'Minúscula',
  clearAll: 'Borrar todo',
  clearFormat: 'Claro Formato',
  createLink: 'Insertar / Editar hipervínculo',
  removeLink: 'quitar hipervínculo',
  tableProperties: 'Propiedades de la tabla',
  insertTable: 'Insertar',
  deleteTables: 'Borrar',
  imageProperties: 'Propiedades de la imagen',
  openLink: 'Abrir hipervínculo',
  image: 'insertar una imagen',
  video: 'insertar vídeo',
  embedVideo: 'Pegue su código de inserción por debajo de',
  viewHtml: 'Ver HTML',
  fontName: 'Seleccione familia de fuentes',
  fontSize: 'Seleccione el tamaño del texto',
  fontColor: 'Seleccionar el color',
  format: 'formato',
  backgroundColor: 'Color de fondo',
  style: 'estilos',
  deleteAlert: '¿Está seguro que desea borrar todo el contenido?',
  copyAlert: 'Su navegador no es compatible con el acceso directo al portapapeles. Utilice el teclado Ctrl + C atajo en lugar de operación de copia .',
  pasteAlert: 'Su navegador no es compatible con el acceso directo al portapapeles. Por favor, use la combinación de teclas Ctrl + V en lugar de operación de pegado ',
  cutAlert: 'Su navegador no es compatible con el acceso directo al portapapeles. Utilice el Ctrl + X combinación de teclas en lugar de la operación de corte .',
  copyPastAlert: 'Your browser doesnt support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.',
  videoError: 'El área de texto no puede estar vacío',
  imageWebUrl: 'Dirección web',
  imageAltText: 'Descripción',
  dimensions: 'dimensiones',
  constrainProportions: 'Restringir proporciones',
  linkWebUrl: 'Dirección web',
  linkText: 'texto',
  linkTooltipLabel: 'ToolTip',
  html5Support: 'Este icono de la herramienta sólo disponible en HTML5 apoyó navegadores',
  linkOpenInNewWindow: 'Abrir enlace en una nueva ventana',
  tableColumns: 'No. de Columnas',
  tableRows: 'Numero de Filas',
  tableWidth: 'ancho de la mesa',
  tableHeight: 'altura de la mesa',
  tableCellSpacing: 'El espaciado',
  tableCellPadding: 'Relleno',
  tableBorder: 'frontera',
  tableCaption: 'subtítulo',
  dialogUpdate: 'actualización',
  dialogInsert: 'insertar',
  dialogCancel: 'cancelar',
  dialogOk: 'bueno',
  createTable: 'Crear una tabla',
  addColumnLeft: 'Añadir la columna de la izquierda',
  addColumnRight: 'Añadir columna a la derecha',
  addRowAbove: 'Añadir fila encima',
  addRowBelow: 'Añadir fila abajo',
  deleteRow: 'Elimine la fila',
  deleteColumn: 'Eliminar la columna',
  deleteTable: 'Eliminar la tabla',
  customTable: 'Crear una tabla personalizada',
  characters: 'Personajes',
  dialogApply: 'aplicar',
  textAlign: 'Texto Alinear',
  imageLink: 'Imagen como Enlace',
  imageBorder: 'Imagen de fronteras',
  imageStyle: 'Estilo',
  editTable: 'Editar las propiedades de la tabla',
  words: 'palabras',
  general: 'corriente',
  advanced: 'avanzada',
  table: 'tabla',
  row: 'fila',
  column: 'columna',
  cell: 'célula',
  maximize: 'Maximizar',
  resize: 'Minimizar',
  swatches: 'Muestras',
  paragraph: 'acápite',
  quotation: 'cita',
  heading1: 'título 1',
  heading2: 'título 2',
  heading3: 'título 3',
  heading4: 'título 4',
  heading5: 'título 5',
  heading6: 'título 6',
  disc: 'Disco',
  circle: 'Círculo',
  square: 'Cuadrado',
  number: 'Número',
  loweralpha: 'Baja Alfa',
  upperalpha: 'Alta Alfa',
  lowerroman: 'Baja romano',
  upperroman: 'Alta romano',
  none: 'Ninguna',
  linkTooltip: 'ctrl + clic para seguir el enlace',
  charSpace: 'Caracteres (con espacios)',
  charNoSpace: 'Caracteres (sin espacios)',
  wordCount: 'El recuento de palabras',
  right: 'derecho',
  left: 'izquierda',
  center: 'centrar',
  FindAndReplace: 'Buscar y reemplazar',
  Find: 'Encontrar',
  MatchCase: 'Coincidencia',
  WholeWord: 'Palabra completa',
  ReplaceWith: 'Remplazar con',
  Replace: 'Reemplazar',
  ReplaceAll: 'Reemplaza todo',
  FindErrorMsg: 'No se pudo encontrar la palabra especificada .',
  customFontColor: 'Mas colores...',
  customBGColor: 'Mas colores...',
  TransBGColor: 'transparente',
  w: 'W',
  c: 'C'
};

maxHeight string number

Sets the maximum height for the RTE outer wrapper element.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" maxHeight="900px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

maxLength number

Sets the maximum length for the RTE outer wrapper element.

Default Value

• 7000

Example

HTML

<textarea ej-rte width="100%" [maxLength]="maxLength" maxHeight="900px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  maxLength: number;
  constructor() {
    this.maxLength = 900;
      this.content = 'Description: 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 from RTE';
  }
}

maxWidth string number

Sets the maximum width for the RTE outer wrapper element.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" maxWidth="900px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

minHeight string number

Sets the minimum height for the RTE outer wrapper element.

Default Value

• 280

Example

HTML

<textarea ej-rte width="100%" height="300px" minHeight="300px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

minWidth string number

Sets the minimum width for the RTE outer wrapper element.

Default Value

• 400

Example

HTML

<textarea ej-rte width="100%" height="300px" minWidth="300px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

name string

Sets the name in the RTE. When the name value is not initialized, the ID value is assigned to the name.

Default Value

• ””

Example

HTML

<textarea ej-rte width="100%" height="300px" name="commentBlog" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showClearAll boolean

Shows ClearAll icon in the RTE footer.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" [showClearAll]=true height="300px" [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showClearFormat boolean

Shows the clear format in the RTE footer.

Default Value

• true

Example

HTML

<textarea ej-rte width="100%" [showClearFormat]=true height="300px" [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

SHOWCLEARFORMAT

showCustomTable boolean

Shows the Custom Table in the RTE.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [showCustomTable]=true [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showContextMenu boolean

The showContextMenu property helps to enable custom context menu within editor area.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [showContextMenu]=false [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showDimensions boolean

This API is used to set the default dimensions for the image and video. When this property is set to true, the image and video dialog displays the dimension option.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" [showDimensions]=false height="300px" [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showFontOption boolean

Shows the FontOption in the RTE.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [showFontOption]=false [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showFooter boolean

Shows footer in the RTE. When the footer is enabled, it displays the HTML tag, word Count, character count, clear format, resize icon and clear all the content icons, by default.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showHtmlSource boolean

Shows the HtmlSource in the RTE footer.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [showHtmlSource]=true [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showHtmlTagInfo boolean

When the cursor is placed or when the text is selected in the RTE, it displays the tag info in the footer.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [showHtmlTagInfo]=true [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showToolbar boolean

Shows the toolbar in the RTE.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" [showToolbar]=true height="300px" [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showCharCount boolean

Counts the total characters and displays it in the RTE footer.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" [showCharCount]=true height="300px" [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showRoundedCorner boolean

Enables or disables rounded corner UI look for RTE.

Default Value

• false

Example

HTML

<textarea ej-rte width="100%" height="300px" [showRoundedCorner]=true [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

showWordCount boolean

Counts the total words and displays it in the RTE footer.

Default Value

• True

Example

HTML

<textarea ej-rte width="100%" height="300px" [showWordCount]=true [showFooter]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

tableColumns number

The given number of columns render the insert table pop.

Default Value

• 10

Example

HTML

<textarea ej-rte width="100%" height="300px" [tableColumns]="tableColumns" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    tableColumns: string;
    content: string;
    
    constructor() {
        this.List =  ["font","links", "lists", "doAction","tables", "style", "images","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], 



doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"],



 tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
            effects: ["superscript", "subscript"],
        };
        this.tableColumns = 10;
    }
    
}

tableRows number

The given number of rows render the insert table pop.

Default Value

• 8

Example

HTML

<textarea ej-rte width="100%" height="300px" [tableRows]="tableColumns" [(toolsList)]="List" [colorCode]="colorCode"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    tableRows: string;
    content: string;
    
    constructor() {
        this.List =  ["font","links", "lists", "doAction","tables", "style", "images","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], 



doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"],



 tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
            effects: ["superscript", "subscript"],
        };
        this.tableRows = 10;
    }
    
}

tools object

Sets the tools in the RTE and gets the inner display order of the corresponding group element. Tools are dependent on the toolsList property.

Default Value

• formatStyle: [“format”],
  style: [“bold”, “italic”, “underline”, “strikethrough”],
  alignment: [“justifyLeft”, “justifyCenter”, “justifyRight”, “justifyFull”],
  lists: [“unorderedList”, “orderedList”],
  indenting: [“outdent”, “indent”],
  doAction: [“undo”, “redo”],
  links: [“createLink”,”removeLink”],
  images: [“image”],
  media: [“video”],
  tables: [“createTable”, “addRowAbove”, “addRowBelow”, “addColumnLeft”, addColumnRight”, “deleteRow”, “deleteColumn”, “deleteTable”]],
  view:[“fullScreen”,”zoomIn”,”zoomOut”],
  print:[“print”]

Example

HTML

<textarea ej-rte width="100%" height="300px" [(toolsList)]="List"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './tools.component.html'
})
export class AllToolsComponent {
    content: string;
    responsive: boolean;
    tools: any;
    constructor() {
        this.content = 'Description: 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 from RTE';
        this.responsive = true;
        this.tools = {
            formatStyle: ['format'],
            edit: ['findAndReplace'],
            font: ['fontName', 'fontSize', 'fontColor', 'backgroundColor'],
            style: ['bold', 'italic', 'underline', 'strikethrough'],
            alignment: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            lists: ['unorderedList', 'orderedList'],
            clipboard: ['cut', 'copy', 'paste'],
            doAction: ['undo', 'redo'],
            indenting: ['outdent', 'indent'],
            clear: ['clearFormat', 'clearAll'],
            links: ['createLink', 'removeLink'],
            images: ['image'],
            media: ['video'],
            tables: ['createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'deleteTable'],
            effects: ['superscript', 'subscript'],
            casing: ['upperCase', 'lowerCase'],
            print: ['print'],
            customUnorderedList: [{
                name: 'unOrderInsert',
                tooltip: 'Custom UnOrderList',
                css: 'e-rte-toolbar-icon e-rte-unlisted customUnOrder'
            }],
            customOrderedList: [{
                name: 'orderInsert',
                tooltip: 'Custom OrderList',
                css: 'e-rte-toolbar-icon e-rte-list customOrder',
                text: 'Lower-Greek',
                listStyle: 'lower-greek'
            }]
        };
    }
}

tools.alignment object

Specifies the alignment tools and the display order of this tool in the RTE toolbar.

tools.casing array

Specifies the casing tools and the display order of this tool in the RTE toolbar.

tools.clear array

Specifies the clear tools and the display order of this tool in the RTE toolbar.

tools.clipboard array

Specifies the clipboard tools and the display order of this tool in the RTE toolbar.

tools.edit array

Specifies the edit tools and the displays tool in the RTE toolbar.

tools.doAction array

Specifies the doAction tools and the display order of this tool in the RTE toolbar.

tools.effects array

Specifies the effect of tools and the display order of this tool in RTE toolbar.

tools.font array

Specifies the font tools and the display order of this tool in the RTE toolbar.

tools.formatStyle array

Specifies the formatStyle tools and the display order of this tool in the RTE toolbar.

tools.images array

Specifies the image tools and the display order of this tool in the RTE toolbar.

tools.indenting array

Specifies the indent tools and the display order of this tool in the RTE toolbar.

tools.links array

Specifies the link tools and the display order of this tool in the RTE toolbar.

tools.lists array

Specifies the list tools and the display order of this tool in the RTE toolbar.

tools.media array

Specifies the media tools and the display order of this tool in the RTE toolbar.

tools.style array

Specifies the style tools and the display order of this tool in the RTE toolbar.

tools.tables array

Specifies the table tools and the display order of this tool in the RTE toolbar.

tools.view array

Specifies the view tools and the display order of this tool in the RTE toolbar.

tools.print array

Specifies the print tools and the display order of this tool in the RTE toolbar.

tools.importExport array

Specifies the importExport tools and the display order of this tool in the RTE toolbar.

tools.customOrderedList array

Specifies the customOrderedList tools and the display order of this tool in the RTE toolbar.

tools.customOrderedList.name string

Specifies the name for customOrderedList item.

tools.customOrderedList.tooltip string

Specifies the title for customOrderedList item.

tools.customOrderedList.css string

Specifies the styles for customOrderedList item.

tools.customOrderedList.text string

Specifies the text for customOrderedList item.

tools.customOrderedList.listStyle string

Specifies the list style for customOrderedList item.

tools.customOrderedList.listImage string

Specifies the image for customOrderedList item.

tools.customUnorderedList array

Specifies the customUnOrderedList tools and the display order of this tool in the RTE toolbar.

tools.customUnorderedList.name string

Specifies the name for customUnorderedList item.

tools.customUnorderedList.tooltip string

Specifies the title for customUnorderedList item.

tools.customUnorderedList.css string

Specifies the styles for customUnorderedList item.

tools.customUnorderedList.text string

Specifies the text for customUnorderedList item.

tools.customUnorderedList.listStyle string

Specifies the list style for customUnorderedList item.

tools.customUnorderedList.listImage string

Specifies the image for customUnorderedList item.

toolsList array

Specifies the list of groups and order of those groups displayed in the RTE toolbar. The toolsList property is used to get the root group order and tools property is used to get the inner order of the corresponding groups displayed. When the value is not specified, it gets its default display order and tools.

Default Value

• [“formatStyle”, “font”, “style”, “effects”, “alignment”, “lists”, “indenting”, “clipboard”, “doAction”, “clear”, “links”, “images”, “media”, “tables”, “casing”,”view”, “customTools”,”print”,”edit”]

Example

HTML

<textarea ej-rte width="100%" height="300px" [(toolsList)]="List"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: './tools.component.html'
})
export class AllToolsComponent {
    content: string;
    responsive: boolean;
    tools: any;
    constructor() {
        this.content = 'Description: 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 from RTE';
        this.responsive = true;
        this.tools = {
            formatStyle: ['format'],
            edit: ['findAndReplace'],
            font: ['fontName', 'fontSize', 'fontColor', 'backgroundColor'],
            style: ['bold', 'italic', 'underline', 'strikethrough'],
            alignment: ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
            lists: ['unorderedList', 'orderedList'],
            clipboard: ['cut', 'copy', 'paste'],
            doAction: ['undo', 'redo'],
            indenting: ['outdent', 'indent'],
            clear: ['clearFormat', 'clearAll'],
            links: ['createLink', 'removeLink'],
            images: ['image'],
            media: ['video'],
            tables: ['createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'deleteTable'],
            effects: ['superscript', 'subscript'],
            casing: ['upperCase', 'lowerCase'],
            print: ['print'],
            customUnorderedList: [{
                name: 'unOrderInsert',
                tooltip: 'Custom UnOrderList',
                css: 'e-rte-toolbar-icon e-rte-unlisted customUnOrder'
            }],
            customOrderedList: [{
                name: 'orderInsert',
                tooltip: 'Custom OrderList',
                css: 'e-rte-toolbar-icon e-rte-list customOrder',
                text: 'Lower-Greek',
                listStyle: 'lower-greek'
            }]
        };
    }
}

toolbarOverflowMode enum|string

Specifies the overflow mode for RTE responsive toolbar

Name	Description
Popup	To display the RTE toolbar overflow items as popup
Inline	To display the RTE toolbar overflow items as inline toolbar

Default Value

• Popup

Example

HTML

<textarea ej-rte width="100%" height="300px" toolbarOverflowMode="inline" [(toolsList)]="List"  [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    content: string;
    
    constructor() {
        this.List =  ["font","links", "lists", "doAction","tables", "style", "images","importExport"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            style: ["bold", "italic"], lists: ["unorderedList", "orderedList"], 



doAction: ["undo", "redo"], links: ["createLink", "removeLink"], images: ["image"],



 tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"],
            effects: ["superscript", "subscript"],
        };
    }
    
}

tooltipSettings object

Display the hints for the tools in the Toolbar.

Default Value

• { associate: “mouseenter”, showShadow: true, position: { stem: { horizontal: “left”, vertical: “top” } }, tip: { size: { width: 5, height: 5 }, isBalloon: false }

Example

HTML

<textarea ej-rte width="100%" height="300px" [tooltipSettings]="tooltipSettings" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  tooltipSettings: any;
  constructor() {
      this.tooltipSettings = { showShadow :false};
      this.content = 'Description: 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 from RTE';
  }
}

undoStackLimit number

Gets the undo stack limit.

Default Value

• 50

Example

HTML

<textarea ej-rte width="100%" height="300px" [undoStackLimit]="undo" [autoFocus]=true [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  undo: number;
  constructor() {
      this.undo = 70;
      this.content = 'Description: 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 from RTE';
  }
}

value string

The given string value is displayed in the editable area.

Default Value

• null

Example

HTML

<textarea ej-rte width="100%" height="300px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

validationRules object

Sets the jQuery validation rules to the Rich Text Editor.

Default Value

• null

Example

HTML

<form id="form1">
<textarea id="rteSample" ej-rte width="100%" height="300px" [(value)]="content"  [validationRules]="validRule"  [validationMessage]="validMessage">
</textarea>
<div><br/>
<input type="submit" value="Validate">
 </div>
</form>

TS

import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'src/RTE/rte.component.html',
})
export class RTEComponent {

  content: string;

  validRule: any;

validMessage: any;
  constructor() {

  

  $.validator.setDefaults({
        ignore: [],// To include hidden input validation.
        errorClass: 'e-validation-error', // to get the error message on jquery validation
        errorPlacement: function (error, element) {
            $(error).insertAfter(element.closest(".e-widget"));
        }
    });


      this.content = 'Description: 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 from RTE';

  this.validRule={
  required: true,
  minlength: 15,
  maxlength: 150,
  minWordCount: 10,
  maxWordCount: 50,
};
this.validMessage={
  required: "Required RTE value",
  minWordCount: "Minimum word count not reached.",
  maxWordCount: "Maximum word count reached."
};
  }
}

validationMessage object

Sets the jQuery validation error message to the Rich Text Editor.

Default Value

• null

Example

HTML

<form id="form1">
<textarea id="rteSample" ej-rte width="100%" height="300px" [(value)]="content"  [validationRules]="validRule"  [validationMessage]="validMessage">
</textarea>
<div><br/>
<input type="submit" value="Validate">
 </div>
</form>

TS

import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'src/RTE/rte.component.html',
})
export class RTEComponent {

  content: string;

  validRule: any;

validMessage: any;
  constructor() {

  

  $.validator.setDefaults({
        ignore: [],// To include hidden input validation.
        errorClass: 'e-validation-error', // to get the error message on jquery validation
        errorPlacement: function (error, element) {
            $(error).insertAfter(element.closest(".e-widget"));
        }
    });


      this.content = 'Description: 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 from RTE';

  this.validRule={
  required: true,
  minlength: 15,
  maxlength: 150,
  minWordCount: 10,
  maxWordCount: 50,
};
this.validMessage={
  required: "Required RTE value",
  minWordCount: "Minimum word count not reached.",
  maxWordCount: "Maximum word count reached."
};
  }
}

width string number

Defines the width of the RTE textbox.

Default Value

• 786

Example

HTML

<textarea ej-rte width="100%" height="300px" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
}

zoomStep string number

Increases and decreases the contents zoom range in percentage

Default Value

• 0.05

Example

HTML

<textarea ej-rte width="100%" height="300px" zoomStep="0.1" [(toolsList)]="List" [tools]="tools" [(value)]="content">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: 'app/components/rte/rte.component.html'
})
export class RTEComponent {
    List: any;
    tools: Object;
    fonts:any;
    colorCode: any;
    content: string;
    colorPaletteColumns: number;
    constructor() {
        this.List =  ["view"];
        this.content = 'ECMAScript (or ES) is a trademarked scripting-language specification standard';
        this.tools = {
            view:[“zoomIn”,”zoomOut”]
        };
        
    }
    
}

Methods

createRange()

Returns the range object.

Returns: Object

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">create Range</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


console.log(("#rteSample").ejRTE("createRange"));

}
}

disable()

Disables the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.disable();

}
}

disableToolbarItem()

Disables the corresponding tool in the RTE ToolBar.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.disableToolbarItem("createTable");

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Disable</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("disableToolbarItem","rteSampleCreateTable");

}
}

enable()

Enables the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Enable</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.enable();

}
}

enableToolbarItem()

Enables the corresponding tool in the toolbar when the tool is disabled.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Enable</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.enableToolbarItem("createTable");

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Enable</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("enableToolbarItem","rteSampleCreateTable");

}
}

executeCommand(cmdName, args, [textnodeType])

Performs the action value based on the given command.

Name	Type	Description
cmdName	string	Command Name.
args	object	Content to be inserted as argument.
textnodeType	boolean	Boolean value to specify whether the argument is textNode or not, this is optional.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Execute Command</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.executeCommand("bold", true);

}
}

focus()

Focuses the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Focus</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.focus());

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Focus</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("focus");

}
}

getCommandStatus()

Gets the command status of the selected text based on the given comment in the RTE control.

Returns: boolean

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Status</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.getCommandStatus("bold");

}
}

getDocument()

Gets the Document from the RTE control.

Returns: Document

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Status</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.getDocument();

}
}

getHtml()

Gets the HTML string from the RTE control.

Returns: Element

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">GetHtml</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.getHtml("bold");

}
}

getSelectedHtml()

Gets the selected HTML string from the RTE control.

Returns: Element

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Get</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.getSelectedHtml();

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Get</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("getSelectedHtml");

}
}

getText()

Gets the content as string from the RTE control.

Returns: string

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Get Text</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.getText();

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Get Text</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("getText");

}
}

hide()

Hides the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Hide</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.hide();

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Hide</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("hide");

}
}

insertMenuOption()

Inserts new item to the target contextmenu node.

Name	Type	Description
option	object	Object data’s for inserting the new item to the context menu. Name Type Description newItem string Target menu item text. targetItem string Target menu item text insertType string Menu item insertion type - insert||insertAfter||insertBefore”. menuType object menu visibility types. - text:boolean, image: boolean, hyperlink: boolean, table: boolean spriteCssClass string Sprite CSS class name for menu item icon.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Insert</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.insertMenuOption({newItem:"Show Table Details",targetItem:"Table Properties", insertType:("insertAfter"), menuType:{text:false,image:false,hyperlink:false,table:true},spriteCssClass:"e-rte-toolbar-icon tableProperties"}); 

}
}

insertColumn([before],[cell])

Add a table column at the right or left of the specified cell

Name	Type	Description
before	boolean	If it’s true, add a column at the left of the cell, otherwise add a column at the right of the cell
cell	jQuery	Column will be added based on the given cell element

Returns: Element

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Insert</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.insertColumn(true, $($("#rteSample").ejRTE("instance").getDocument().body).find("table tr:first td:first"));

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Insert</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


$("#rteSample").ejRTE("insertColumn", "true $($('#rteSample').ejRTE('instance').getDocument().body).find('table tr:first td:first')");

}
}

insertRow([before],[cell])

To add a table row below or above the specified cell.

Name	Type	Description
before	boolean	If it’s true, add a row before the cell, otherwise add a row after the cell
cell	jQuery	Row will be added based on the given cell element

Returns: Element

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Insert</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.insertRow(true, $($("#rteSample").ejRTE("instance").getDocument().body).find("table tr:first td:first"));

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Insert</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


$("#rteSample").ejRTE("insertRow", "true $($('#rteSample').ejRTE('instance').getDocument().body).find('table tr:first td:first')");

}
}

pasteContent()

This method helps to insert/paste the content at the current cursor (caret) position or the selected content to be replaced with our text by passing the value as parameter to the pasteContent method in the Editor.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Hide</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.pasteContent("place the content in current cursor position/replace the selected text "); 

}
}

refresh()

Refreshes the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Refresh</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.refresh();

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Refresh</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("refresh");

}
}

removeColumn([cell])

Removes the specified table column.

Name	Type	Description
cell	jQuery	Remove the given column element

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.removeRow(true, $($("#rteSample").ejRTE("instance").getDocument().body).find("table tr:first td:first"));

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


$("#rteSample").ejRTE("removeRow", "true $($('#rteSample').ejRTE('instance').getDocument().body).find('table tr:first td:first')");

}
}

removeRow([cell])

Removes the specified table row.

Name	Type	Description
cell	jQuery	Remove the given row element

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.removeColumn(true, $($("#rteSample").ejRTE("instance").getDocument().body).find("table tr:first td:first"));

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


$("#rteSample").ejRTE("removeColumn", "true $($('#rteSample').ejRTE('instance').getDocument().body).find('table tr:first td:first')");

}
}

removeTable([table])

Deletes the specified table.

Name	Type	Description
table	jQuery	Remove the given table

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.removeTable($($("#rteSample").ejRTE("instance").getDocument().body).find("table"));

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("removeTable", $($('#rteSample').ejRTE('instance').getDocument().body).find('table'));

}
}

removeMenuOption ()

Removes the target menu item from the RTE contextmenu.

Name	Type	Description
option	string	Target Node text.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.removeMenuOption("Target");

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("removeMenuOption","Target");

}
}

removeToolbarItem()

Removes the given tool from the RTE Toolbar.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.removeToolbarItem("createTable");

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Remove</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("removeToolbarItem","rteSampleCreateTable");

}
}

selectAll()

Selects all the contents within the RTE.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Select All</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.selectAll();

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">select all</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("selectAll");

}
}

selectRange()

Selects the contents in the given range.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Select Range</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
         var range = Obj.createRange();
    var tag = Obj.getDocument().getElementsByTagName("p");           
    if (!editor._isIE8()) {
        range.setStart(tag[0], 0);
        range.setEnd(tag[1], 1);
    }
    else {
       range = editor.getDocument().body.createTextRange()
       range.moveToElementText(tag[1]);
    }
    range.selectRange(range);

}
}

setColorPickerType()

Sets the color picker model type rendered initially in the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Color Picker</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.setColorPickerType("picker");

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">ColorPicker</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("setColorPickerType","picker");

}
}

setHtml()

Sets the HTML string from the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Set Html</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.setHtml("The Rich Text Editor (RTE) control is an easy to render in client side.");

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">set Html</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("setHtml","The Rich Text Editor (RTE) control is an easy to render in client side.");

}
}

show()

Displays the RTE control.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Show</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){


var Obj = $("#rteSample").data("ejRTE");
        Obj.show();

}
}

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content">
</textarea>
<button type="button" (click)="OnClick()"  style="margin-left: 35%;">Show</button>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  OnClick(){
        $("#rteSample").ejRTE("show");

}
}

Events

change

Fires when changed successfully.

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	returns the RTE model
type	string	returns the name of the event

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (ejchange)="change($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  change(args){

}
}

create

Fires when the RTE is created successfully

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	Returns the RTE model
type	string	Returns the name of the event

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (create)="create($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  create(args){

}
}

contextMenuClick

Fires when mouse click on menu items.

Name	Type	Description
argument	Object	Event parameters from menu. Name Type Description text string returns clicked menu item text. element Object returns clicked menu item element. selectedItem number returns the selected item.

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (contextMenuClick)="contextMenuClick($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  contextMenuClick(args){

}
}

destroy

Fires before the RTE is destroyed.

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	Returns the RTE model
type	string	Returns the name of the event

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (destroy)="destroy($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  destroy(args){

}
}

execute

Fires when the commands are executed successfully.

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	Returns the RTE model
type	string	Returns the name of the event

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (execute)="execute($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  execute(args){

}
}

keydown

Fires when the keydown action is successful.

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	Returns the RTE model
type	string	Returns the name of the event

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (keydown)="keydown($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  keydown(args){

}
}

keyup

Fires when the keyup action is successful.

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	Returns the RTE model
type	string	Returns the name of the event

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (keyup)="key($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  key(args){

}
}

preRender

Fires before the RTE Edit area is rendered and after the toolbar is rendered.

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	Returns the RTE model
type	string	Returns the name of the event

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (preRender)="preRender($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  preRender(args){

}
}

select

Fires when the text is selected in the text area

Name	Type	Description
cancel	boolean	When the event is canceled; otherwise, false.
model	object	Returns the RTE model
type	string	Returns the name of the event
event	object	Returns the event object

Example

HTML

<textarea ej-rte width="100%" id="rteSample" height="300px" [autoFocus]=true [(value)]="content" (select)="select($event)">
</textarea>

TS

import {Component} from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
  content: string;
  constructor() {
      this.content = 'Description: 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 from RTE';
  }
  select(args){

}
}