Vue

Search results

RichTextEditorComponent

ejs-richtexteditor represents the VueJS RichTextEditor Component.

<ejs-richtexteditor></ejs-richtexteditor>

Properties

autoSaveOnIdle
`boolean`

Enables or disables the auto-save option which performs the save action while in the idle state after typed content. If enabled, the Rich Text Editor will save the content on idle state with saveInterval property’s value. The change event will be triggered if the content has changed from the last saved state.

Defaults to false.

backgroundColor
`BackgroundColorModel`

Predefine the color palette that can be rendered for background color (text highlighted color) toolbar command.

<template>
  <div>
    <ejs-richtexteditor
      :toolbarSettings="toolbarSettings"
      :backgroundColor="backgroundColor"
    >
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      toolbarSettings: {
        items: ['BackgroundColor'],
      },
      backgroundColor: {
        columns: 4,
        colorCode: {
          Custom: [
            '#ffff00',
            '#ff0000',
            '#000080',
            '#008080',
            '#008000',
            '#800080',
            '#800000',
            '#808000',
            '#c0c0c0',
            '#000000',
            '',
          ],
        },
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to {columns: 5,colorCode: {‘Custom’: [‘#ffff00’, ‘#00ff00’, ‘#00ffff’, ‘#ff00ff’, ‘#0000ff’, ‘#ff0000’,‘#000080’, ‘#008080’, ‘#008000’, ‘#800080’, ‘#800000’, ‘#808000’,‘#c0c0c0’, ‘#000000’, ”]}}

bulletFormatList
`BulletFormatListModel`

Predefine the advanced list types that populate in the bulletFormatList dropdown list from the toolbar.

Defaults to {types: [{ text: ‘None’, value: ‘none’ },{ text: ‘Disc’, value: ‘disc’ },{ text: ‘Circle’, value: ‘circle’ },{ text: ‘Square’, value: ‘square’ }]}

cssClass
`string`

Specifies the CSS class name appended with the root element of the RichTextEditor. One or more custom CSS classes can be added to a RichTextEditor.

Defaults to null

editorMode
`EditorMode`

Specifies the editing mode of the RichTextEditor.

HTML - Render Rich Text Editor as HTML editor using <IFRAME> element or content editable <div> element or <textarea> element.
Markdown - Render Rich Text Editor as markdown editor using <textarea>.

Defaults to ‘HTML’

emojiPickerSettings
`EmojiSettingsModel`

Specifies the emoji picker options in Rich Text Editor with the following properties.

iconsSet – Specify an array of items representing emoji icons.
showSearchBox - Enables or disables the search box in an emoji picker.

enableAutoUrl
`boolean`

Enable enableAutoUrl to accept the given URL (relative or absolute) without validating the URL for hyperlinks, otherwise the given URL will automatically convert to absolute path URL by prefixing https:// for hyperlinks.

<template>
  <div>
    <ejs-richtexteditor :enableAutoUrl="enableAutoUrl"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      enableAutoUrl: true,
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to false

enableHtmlEncode
`boolean`

specifies the value whether the source code is displayed with encoded format.

Defaults to false.

enableHtmlSanitizer
`boolean`

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence
`boolean`

Enables or disables the persisting component’s state between page reloads. If enabled, the value of Rich Text Editor is persisted

<template>
  <div>
    <ejs-richtexteditor :enablePersistence="enablePersistence">
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      enablePersistence: true
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to false.

enableResize
`boolean`

Enables or disables the resizing option in the editor. If enabled, the Rich Text Editor can be resized by dragging the resize icon in the bottom right corner.

<template>
  <div>
    <ejs-richtexteditor :enableResize="enableResize"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      enableResize: true
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to false.

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

enableTabKey
`boolean`

Allows the tab key action in the Rich Text Editor content.

<template>
  <div>
    <ejs-richtexteditor :enableTabKey="enableTabKey"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      enableTabKey: true
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to false

enableXhtml
`boolean`

Specifies a value that indicates whether the xhtml is enabled or not.

Defaults to false.

enabled
`boolean`

Specifies a value that indicates whether the component is enabled or not.

<template>
  <div>
    <ejs-richtexteditor :enabled="enabled"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      enabled: true
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to true.

enterKey
`EnterKey`

Specifies tag to be inserted when enter key is pressed.

P - When the enter key is pressed a p tag will be inserted and the default value of the Rich Text Editor will be <p><br></p>.
DIV - When the enter key is pressed a div tag will be inserted instead of the default P tag and the default value of the Rich Text Editor will be <div><br></div>.
BR - When the enter key is pressed a br tag will be inserted instead of the default P tag and the default value of the Rich Text Editor will be <br>.

Defaults to ‘P’

exportPdf
`ExportPdfModel`

Specifies the file export options for the Rich Text Editor component, with the following properties:

serviceurl - Specifies the URL that will be used to export the Rich Text Editor content into PDF files.
fileName - Specifies the name of the exported PDF file.
stylesheet - Specifies the stylesheet to be applied to the exported PDF file.

Defaults to {serviceUrl:null,fileName:Sample.pdf,stylesheet: null,}

exportWord
`ExportWordModel`

Specifies the file export options for the Rich Text Editor component, with the following properties:

serviceurl - Specifies the URL that will be used to export the Rich Text Editor content into Word files.
fileName - Specifies the name of the exported Word file.
stylesheet - Specifies the stylesheet to be applied to the exported Word file.

Defaults to {serviceUrl:null,fileName:Sample.docx,stylesheet: null,}

fileManagerSettings
`FileManagerSettingsModel`

Specifies the image manager options in Rich Text Editor component and control with the following properties.

enable - set boolean value to enable or disable the image manager.
ajaxSettings - Specifies the AJAX settings of the image manager.
contextMenuSettings - Specifies the context menu settings of the image manager.
navigationPaneSettings - Specifies the navigation pane settings of the image manager.
toolbarSettings - Specifies the group of items aligned horizontally in the toolbar.
uploadSettings - Specifies the upload settings for the image manager.

Defaults to {enable: false,path: ’/‘,ajaxSettings: { getImageUrl: null, url: null, uploadUrl: null },contextMenuSettings: {visible: true,file: [‘Open’, ’|’, ‘Cut’, ‘Copy’, ’|’, ‘Delete’, ‘Rename’, ’|’, ‘Details’],folder: [‘Open’, ’|’, ‘Cut’, ‘Copy’, ‘Paste’, ’|’, ‘Delete’, ‘Rename’, ’|’, ‘Details’],layout: [‘SortBy’, ‘View’, ‘Refresh’, ’|’, ‘Paste’, ’|’, ‘NewFolder’, ‘Upload’, ’|’, ‘Details’, ’|’, ‘SelectAll’]},navigationPaneSettings: {visible: true,items: [‘NewFolder’, ‘Upload’, ‘Cut’, ‘Copy’, ‘Paste’, ‘Delete’, ‘Download’,‘Rename’, ‘SortBy’, ‘Refresh’, ‘Selection’, ‘View’, ‘Details’]},toolbarSettings: { visible: true, items: [‘Upload’, ‘NewFolder’] },uploadSettings: { autoUpload: true, minFileSize: 0, maxFileSize: 30000000, allowedExtensions: ”, autoClose: false }}

floatingToolbarOffset
`number`

Preserves the toolbar at the top of the Rich Text Editor on scrolling and specifies the offset of the floating toolbar from documents top position

Defaults to 0

fontColor
`FontColorModel`

Predefine the color palette that can be rendered for font color toolbar command .

<template>
  <div>
    <ejs-richtexteditor
      :fontColor="fontColor"
      :toolbarSettings="toolbarSettings"
    >
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      fontColor: {
        columns: 2,
        colorCode: {
          Custom: [
            '#ffff00',
            '#008000',
            '#800080',
            '#800000',
            '#808000',
            '#c0c0c0',
            '#000000',
            '',
          ],
        },
      },
      toolbarSettings: {
        items: ['FontColor'],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to {columns: 10,colorCode: {‘Custom’: [”, ‘#000000’, ‘#e7e6e6’, ‘#44546a’, ‘#4472c4’, ‘#ed7d31’, ‘#a5a5a5’, ‘#ffc000’, ‘#70ad47’, ‘#ff0000’,‘#f2f2f2’, ‘#808080’, ‘#cfcdcd’, ‘#d5dce4’, ‘#d9e2f3’, ‘#fbe4d5’, ‘#ededed’, ‘#fff2cc’, ‘#e2efd9’, ‘#ffcccc’,‘#d9d9d9’, ‘#595959’, ‘#aeaaaa’, ‘#acb9ca’, ‘#b4c6e7’, ‘#f7caac’, ‘#dbdbdb’, ‘#ffe599’, ‘#c5e0b3’, ‘#ff8080’,‘#bfbfbf’, ‘#404040’, ‘#747070’, ‘#8496b0’, ‘#8eaadb’, ‘#f4b083’, ‘#c9c9c9’, ‘#ffd966’, ‘#a8d08d’, ‘#ff3333’,‘#a6a6a6’, ‘#262626’, ‘#3b3838’, ‘#323e4f’, ‘#2f5496’, ‘#c45911’, ‘#7b7b7b’, ‘#bf8f00’, ‘#538135’, ‘#b30000’,‘#7f7f7f’, ‘#0d0d0d’, ‘#161616’, ‘#212934’, ‘#1f3763’, ‘#823b0b’, ‘#525252’, ‘#7f5f00’, ‘#375623’, ‘#660000’]}}

fontFamily
`FontFamilyModel`

Predefine the font families that populate in font family dropdown list from the toolbar.

<template>
  <div>
    <ejs-richtexteditor
      :fontFamily="fontFamily"
      :toolbarSettings="toolbarSettings"
    >
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      fontFamily: {
        default: 'Segoe UI',
        width: '65px',
        items: [
          { 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,Times,serif' },
          { text: 'Trebuchet MS', value: 'Trebuchet MS,Helvetica,sans-serif' },
          { text: 'Verdana', value: 'Verdana,Geneva,sans-serif' },
        ],
      },
      toolbarSettings: {
        items: ['FontName'],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to {default: ‘Segoe UI’,width: ‘65px’,items: [{ 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,Times,serif’ },{ text: ‘Trebuchet MS’, value: ‘Trebuchet MS,Helvetica,sans-serif’ },{ text: ‘Verdana’, value: ‘Verdana,Geneva,sans-serif’ }]}

fontSize
`FontSizeModel`

Predefine the font sizes that populate in font size dropdown list from the toolbar.

<template>
  <div>
    <ejs-richtexteditor :fontSize="fontSize" :toolbarSettings="toolbarSettings">
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      fontSize: {
        default: '10pt',
        width: '35px',
        items: [
          { text: '8', value: '8pt' },
          { text: '10', value: '10pt' },
          { text: '12', value: '12pt' },
          { text: '14', value: '14pt' },
          { text: '18', value: '18pt' },
          { text: '24', value: '24pt' },
          { text: '36', value: '36pt' },
        ],
      },
      toolbarSettings: {
        items: ['FontSize'],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to {default: ‘10pt’,width: ‘35px’,items: [{ text: ‘8’, value: ‘8pt’ },{ text: ‘10’, value: ‘10pt’ },{ text: ‘12’, value: ‘12pt’ },{ text: ‘14’, value: ‘14pt’ },{ text: ‘18’, value: ‘18pt’ },{ text: ‘24’, value: ‘24pt’ },{ text: ‘36’, value: ‘36pt’ }]}

format
`FormatModel`

Predefine the collection of paragraph styles along with quote and code style that populate in format dropdown from the toolbar.

<template>
  <div>
    <ejs-richtexteditor :Format="format" :toolbarSettings="toolbarSettings">
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      format: {
        default: 'Paragraph',
        width: '65px',
        types: [
          { text: 'Paragraph', value: 'P'},
          { text: 'Heading 1', value: 'H1' },
          { text: 'Heading 2', value: 'H2' },
          { text: 'Heading 3', value: 'H3' },
          { text: 'Heading 4', value: 'H4' },
          { text: 'Heading 5', value: 'H5' },
          { text: 'Heading 6', value: 'H6' },
          { text: 'Preformatted', value: 'Pre' },
        ],
      },
      toolbarSettings: {
        items: ['Formats'],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image],
  },
};
</script>

Defaults to {default: ‘Paragraph’,width: ‘65px’,types: [{ text: ‘Paragraph’, value: ‘P’},{ text: ‘Heading 1’, value: ‘H1’ },{ text: ‘Heading 2’, value: ‘H2’ },{ text: ‘Heading 3’, value: ‘H3’ },{ text: ‘Heading 4’, value: ‘H4’ },{ text: ‘Heading 5’, value: ‘H5’ },{ text: ‘Heading 6’, value: ‘H6’ },{ text: ‘Preformatted’, value: ‘Pre’ },]}

formatPainterSettings
`FormatPainterSettingsModel`

Specifies the format painter options in Rich Text Editor with the following properties.

allowedFormats - Sets the tag name selectors for elements from which the formats can be copied.
deniedFormats - Sets the selectors for elements from which formats cannot be copied.

<template>
  <div>
    <ejs-richtexteditor
      :toolbarSettings="toolbarSettings"
      :formatPainterSettings="formatPainterSettings"
    >
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
  FormatPainter,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      toolbarSettings: {
        items: ['FormatPainter'],
      },
      formatPainterSettings: {
        allowedFormats: 'span; strong;',
        deniedFormats: 'span(important)',
      },
    };
  },
  provide: {
    richtexteditor: [
      Toolbar,
      HtmlEditor,
      QuickToolbar,
      Link,
      Image,
      Table,
      FormatPainter,
    ],
  },
};
</script>

Defaults to {allowedFormats: ‘b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; ol; ul; li; pre;‘,deniedFormats: null}

formatter
`IFormatter`

Customize keyCode to change the key value.

<template>
  <div>
    <ejs-richtexteditor :formatter="formatter"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
  FormatPainter,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      formatter: null,
    };
  },
  provide: {
    richtexteditor: [
      Toolbar,
      HtmlEditor,
      QuickToolbar,
      Link,
      Image,
      Table,
      FormatPainter,
    ],
  },
};
</script>

Defaults to null

height
`string` | `number`

Specifies the height of the Rich Text Editor component.

Defaults to “auto”

htmlAttributes
{ : }

Allows additional HTML attributes such as title, name, etc., and It will be accepts n number of attributes in a key-value pair format.

Defaults to {}.

iframeSettings
`IFrameSettingsModel`

Specifies the items to be rendered in an iframe mode, and it has the following properties.

enable - Set Boolean value to enable, the editors content is placed in an iframe and isolated from the rest of the page.
attributes - Custom style to be used inside the iframe to display content. This style is added to the iframe body.
resources - we can add both styles and scripts to the iframe.
styles[] - An array of CSS style files to inject inside the iframe to display content
scripts[] - An array of JS script files to inject inside the iframe
metaTags[] - An array of meta tags to inject inside the iframe’s head for setting up various metadata like http-equiv, charset, etc.
sandbox - A string array defining the sandbox attribute for the iframe, which controls the security restrictions applied to the embedded content. By default, “allow-same-origin” is included in the Rich Text Editor’s iframe sandbox.

<template>
  <div>
    <ejs-richtexteditor :iframeSettings="iframeSettings"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      iframeSettings: {
        enable: true
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to {enable: false,attributes: null,resources: { styles: [], scripts: [] },metaTags: [],sandbox: null,}

importWord
`ImportWordModel`

Specifies the file insert options for the Rich Text Editor component, with the following property:

serviceUrl - Specifies the URL that will receive the uploaded files on the server.

Defaults to {serviceUrl: null,}

inlineMode
`InlineModeModel`

Enable or disable the inline edit mode.

enable - set boolean value to enable or disable the inline edit mode.
onSelection - If its set to true, upon selecting the text, the toolbar is opened in inline. If its set to false, upon clicking to the target element, the toolbar is opened.

<template>
  <div>
    <ejs-richtexteditor :inlineMode="inlineMode"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      inlineMode: {
        enable: true,
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to {enable: false,onSelection: true}

insertAudioSettings
`AudioSettingsModel`

Specifies the audio insert options in Rich Text Editor component and control with the following properties.

allowedTypes - Specifies the extensions of the audio types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.
layoutOption - Sets the default display for an audio when it is inserted in to the RichTextEditor. Possible options are: ‘Inline’ and ‘Break’.
saveFormat - Specifies the format to store the audio in the Rich Text Editor (Base64 or Blob).

If you want to insert a lot of tiny audios in the editor and don’t want a specific physical location for saving audios, you can opt to save format as Base64.
saveUrl - Specifies the service URL of save action that will receive the uploaded files and save them in the server.
path - Specifies the path of the location to store the audios and refer it to display the audios.

Defaults to {allowedTypes: [‘.wav’, ‘.mp3’, ‘.m4a’,‘.wma’],layoutOption: ‘Inline’,saveFormat: ‘Blob’saveUrl: null,path: null,}

insertImageSettings
`ImageSettingsModel`

Specifies the image insert options in Rich Text Editor component and control with the following properties.

allowedTypes - Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.
display - Sets the default display for an image when it is inserted in to the RichTextEditor. Possible options are: ‘inline’ and ‘block’.
width - Sets the default width of the image when it is inserted in the RichTextEditor.
saveFormat - Specifies the format to store the image in the Rich Text Editor (Base64 or Blob).

If you want to insert a lot of tiny images in the editor and don’t want a specific physical location for saving images, you can opt to save format as Base64.
height - Sets the default height of the image when it is inserted in the RichTextEditor.
saveUrl - Specifies the service URL of save action that will receive the uploaded files and save them in the server.
path - Specifies the path of the location to store the images and refer it to display the images.

<template>
  <div>
    <ejs-richtexteditor :insertImageSettings="insertImageSettings">
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      insertImageSettings: {
        allowedTypes: ['.jpeg', '.jpg', '.png'],
        display: 'inline',
        width: 'auto',
        height: 'auto',
        saveFormat: 'Blob',
      }
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table]
  },
};
</script>

Defaults to {allowedTypes: [‘.jpeg’, ‘.jpg’, ‘.png’],display: ‘inline’,width: ‘auto’,height: ‘auto’,saveFormat: ‘Blob’saveUrl: null,path: null,}

insertVideoSettings
`VideoSettingsModel`

Specifies the video insert options in Rich Text Editor component and control with the following properties.

allowedTypes - Specifies the extensions of the video types allowed to insert on bowering and passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.
layoutOption - Sets the default display for an video when it is inserted in to the RichTextEditor. Possible options are: ‘Inline’ and ‘Break’.
width - Sets the default width of the video when it is inserted in the RichTextEditor.
saveFormat - Specifies the format to store the video in the Rich Text Editor (Base64 or Blob).

If you want to insert a lot of tiny videos in the editor and don’t want a specific physical location for saving videos, you can opt to save format as Base64.
height - Sets the default height of the video when it is inserted in the RichTextEditor.
saveUrl - Specifies the service URL of save action that will receive the uploaded files and save them in the server.
path - Specifies the path of the location to store the videos and refer it to display the videos.

Defaults to {allowedTypes: [‘.mp4’, ‘.mov’, ‘.wmv’,‘.avi’],layoutOption: ‘Inline’,width: ‘auto’,height: ‘auto’,saveFormat: ‘Blob’saveUrl: null,path: null,}

keyConfig
{ : }

Customizes the key actions in RichTextEditor. For example, when using German keyboard, the key actions can be customized using these shortcuts.

<template>
  <div>
    <ejs-richtexteditor :keyConfig="keyConfig"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      keyConfig: { undo: 'ctrl+z', redo: 'ctrl+y', copy: 'ctrl+c' },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to null

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

maxLength
`number`

Specifies the maximum number of characters allowed in the Rich Text Editor component.

<template>
  <div>
    <ejs-richtexteditor :maxLength="maxLength"></ejs-richtexteditor>
  </div>
</template>

<script>
import Vue from "vue";
import { RichTextEditorPlugin, Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table } from "@syncfusion/ej2-vue-richtexteditor";

Vue.use(RichTextEditorPlugin);

export default Vue.extend({
  data: function() {
    return {
        maxLength: 500
    };
  },
  provide: {
    richtexteditor: [ Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table ]
  }
});
</script>

Defaults to -1

numberFormatList
`NumberFormatListModel`

Predefine the advanced list types that populate in the numberFormatList dropdown list from the toolbar.

Defaults to {types: [{ text: ‘None’, value: ‘none’ },{ text: ‘Number’, value: ‘decimal’ },{ text: ‘Lower Greek’, value: ‘lowerGreek’ },{ text: ‘Lower Roman’, value: ‘lowerRoman’ },{ text: ‘Upper Alpha’, value: ‘upperAlpha’ },{ text: ‘Lower Alpha’, value: ‘lowerAlpha’ },{ text: ‘Upper Roman’, value: ‘upperRoman’ },]}

pasteCleanupSettings
`PasteCleanupSettingsModel`

Specifies the pasting options in Rich Text Editor component and control with the following properties.

prompt - Set boolean value to enable or disable the prompt when pasting.
deniedAttrs - Specifies the attributes to restrict when pasting in RTE.
allowedStyleProps - Specifies the allowed style properties when pasting in RTE.
deniedTags - Specifies the tags to restrict when pasting in RTE.
keepFormat - Set boolean value to keep or remove the from when pasting.
plainText - Set boolean value to paste as plain text or not.

<template>
  <div>
    <ejs-richtexteditor :pasteCleanupSettings="pasteCleanupSettings">
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
  PasteCleanup,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      pasteCleanupSettings: {
        prompt: true,
        deniedAttrs: null,
        allowedStyleProps: [
          'background',
          'background-color',
          'border',
          'border-bottom',
          'border-width',
          'clear',
          'visibility',
          'white-space',
          'width',
        ],
        deniedTags: null,
        keepFormat: true,
        plainText: false,
      },
    };
  },
  provide: {
    richtexteditor: [
      Toolbar,
      HtmlEditor,
      QuickToolbar,
      Link,
      Image,
      Table,
      PasteCleanup
    ],
  },
};
</script>

Defaults to {prompt: false,deniedAttrs: null,allowedStyleProps: [‘background’, ‘background-color’, ‘border’, ‘border-bottom’, ‘border-left’, ‘border-radius’,‘border-right’, ‘border-style’, ‘border-top’, ‘border-width’, ‘clear’, ‘color’, ‘cursor’,‘direction’, ‘display’, ‘float’, ‘font’, ‘font-family’, ‘font-size’, ‘font-weight’, ‘font-style’,‘height’, ‘left’, ‘line-height’, ‘list-style-type’, ‘margin’, ‘margin-top’, ‘margin-left’,‘margin-right’, ‘margin-bottom’, ‘max-height’, ‘max-width’, ‘min-height’, ‘min-width’,‘overflow’, ‘overflow-x’, ‘overflow-y’, ‘padding’, ‘padding-bottom’, ‘padding-left’, ‘padding-right’,‘padding-top’, ‘position’, ‘right’, ‘table-layout’, ‘text-align’, ‘text-decoration’, ‘text-transform’, ‘text-indent’,‘top’, ‘vertical-align’, ‘visibility’, ‘white-space’, ‘width’],deniedTags: null,keepFormat: true,plainText: false}

placeholder
`string`

Specifies the placeholder for the RichTextEditor’s content used when the Rich Text Editor body is empty.

Defaults to null.

quickToolbarSettings
`QuickToolbarSettingsModel`

Specifies the items to be rendered in quick toolbar based on the target element.

It has following fields:
enable - set boolean value to show or hide the quick toolbar
actionOnScroll - it has two possible options
hide: The quickToolbar is closed when the parent element is scrolled.
none: The quickToolbar cannot be closed even the parent element is scrolled.
link - Specifies the items to be rendered in quick toolbar based on link element such as Open, Edit, and UnLink.
image - Specifies the items to be rendered in quick toolbar based on image element such as ‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ‘InsertLink’, ‘Display’, ‘AltText’, ‘Dimension’.
text - Specifies the items to be rendered in quick toolbar based on text element such as ‘Cut’, ‘Copy’, ‘Paste’.

<template>
  <div>
    <ejs-richtexteditor :quickToolbarSettings="quickToolbarSettings">
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      quickToolbarSettings: {
        enable: true,
        actionOnScroll: 'hide',
        link: ['Open', 'Edit', 'UnLink'],
        image: [
          'Replace',
          'Align',
          'Caption',
          'Remove',
          '-',
          'InsertLink',
          'Display',
          'AltText',
          'Dimension',
        ],
        audio: ['AudioReplace', 'AudioRemove', 'AudioLayoutOption'],
        video: [
          'VideoReplace',
          'VideoAlign',
          'VideoRemove',
          'VideoLayoutOption',
          'VideoDimension',
        ],
        table: [
          'TableHeader',
          'TableRows',
          'TableColumns',
          'BackgroundColor',
          '-',
          'TableRemove',
          'Alignments',
          'TableCellVerticalAlign',
          'Styles',
        ],
        text: ['Bold', 'Italic', 'FontColor', 'BackgroundColor'],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to {enable: true,actionOnScroll: ‘hide’,link: [‘Open’, ‘Edit’, ‘UnLink’],image: [‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ’-’, ‘InsertLink’, ‘Display’, ‘AltText’, ‘Dimension’],audio: [‘AudioReplace’, ‘AudioRemove’, ‘AudioLayoutOption’],video: [‘VideoReplace’, ‘VideoAlign’, ‘VideoRemove’, ‘VideoLayoutOption’, ‘VideoDimension’],}

readonly
`boolean`

The user interactions on the component are disabled, when set to true.

Defaults to false.

saveInterval
`number`

Specifies the saveInterval in milliseconds for autosave the value. The change event will be triggered if the content was changed from the last saved interval.

<template>
  <div>
    <ejs-richtexteditor :saveInterval="saveInterval"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      saveInterval: 500,
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to 10000

shiftEnterKey
`ShiftEnterKey`

Specifies tags to be inserted when shift+enter key is pressed.

BR - When the shift + enter key is pressed a br tag will be inserted which is the default behavior.
P - When the shift + enter key is pressed a p tag will be inserted instead of the default br tag.
DIV - When the shift + enter key is pressed a div tag will be inserted instead of the default br tag.

Defaults to ‘BR’

showCharCount
`boolean`

Sets Boolean value to enable or disable the display of the character counter.

<template>
  <div>
    <ejs-richtexteditor :showCharCount="showCharCount"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
  Count,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      showCharCount: true,
    };
  },
  provide: {
    richtexteditor: [
      Toolbar,
      HtmlEditor,
      QuickToolbar,
      Link,
      Image,
      Table,
      Count,
    ],
  },
};
</script>

Defaults to false

showTooltip
`boolean`

Specify the value whether tooltip will be displayed for the Rich Text Editor toolbar.

Defaults to true.

slashMenuSettings
`SlashMenuSettingsModel`

Specifies the list items in the mention popup.

enable- Specifies to enable or disable the slash menu in the Editor.
items- Specfies the items to be rendered in the slash menu.
popupWidth- Specifies the width of the slash menu popup in pixels/number/percentage. The number value is considered as pixels.
popupHeight- Specifies the height of the slash menu popup in pixels/number/percentage. The number value is considered as pixels.

Defaults to {enable: false,items: [‘Paragraph’, ‘Heading 1’, ‘Heading 2’, ‘Heading 3’, ‘Heading 4’, ‘OrderedList’, ‘UnorderedList’.‘CodeBlock’, ‘BlockQuote’],popupWidth: ‘300px’,popupHeight: ‘320px’}

tableSettings
`TableSettingsModel`

Specifies the table insert options in Rich Text Editor component and control with the following properties.

styles - Class name should be appended by default in table element. It helps to design the table in specific CSS styles always when inserting in editor.
width - Sets the default width of the table when it is inserted in the RichTextEditor.
minWidth - Sets the default minWidth of the table when it is inserted in the RichTextEditor.
maxWidth - Sets the default maxWidth of the table when it is inserted in the RichTextEditor.
resize - To enable resize the table.

<template>
  <div>
    <ejs-richtexteditor :tableSettings="tableSettings"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      tableSettings: {
        width: '100%',
        styles: [
          {
            text: 'Dashed Borders',
            command: 'Table',
            subCommand: 'Dashed',
          },
          {
            text: 'Alternate Rows',
            command: 'Table',
            subCommand: 'Alternate',
          },
        ],
        resize: true,
        minWidth: 0,
        maxWidth: null,
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to {width: ‘100%‘,styles: [{ text: ‘Dashed Borders’, class: ‘e-dashed-borders’, command: ‘Table’, subCommand: ‘Dashed’ },{ text: ‘Alternate Rows’, class: ‘e-alternate-rows’, command: ‘Table’, subCommand: ‘Alternate’ }],resize: true,minWidth: 0,maxWidth: null,}

toolbarSettings
`ToolbarSettingsModel`

Specifies the group of items aligned horizontally in the toolbar as well as defined the toolbar rendering type. By default, toolbar is float at the top of the RichTextEditor. When you scroll down, the toolbar will scroll along with the page on Rich Text Editor with the specified offset value.

enable: set boolean value to show or hide the toolbar.
enableFloating: Set Boolean value to enable or disable the floating toolbar. Preserves the toolbar at top of the Rich Text Editor on scrolling.
type: it has two possible options
Expand: Hide the overflowing toolbar items in the next row. Click the expand arrow to view overflowing toolbar items
MultiRow: The toolbar overflowing items wrapped in the next row.
items: Specifies the array of items aligned horizontally in the toolbar.

| and - can insert a vertical and horizontal separator lines in the toolbar.
itemConfigs: Modify the default toolbar item configuration like icon class.

By default, The toolbar is rendered with scrollable in mobile devices and does not support the toolbar type.

<template>
  <div>
    <ejs-richtexteditor :toolbarSettings="toolbarSettings">
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      toolbarSettings: {
        items: [
          'Bold',
          'Italic',
          'Underline',
          'StrikeThrough',
          'FontName',
          'FontSize',
          'FontColor',
          'BackgroundColor',
          'LowerCase',
          'UpperCase',
          'SuperScript',
          'SubScript',
          '|',
          'Formats',
          'Alignments',
          'OrderedList',
          'UnorderedList',
          'Outdent',
          'Indent',
          '|',
          'CreateTable',
          'CreateLink',
          'Image',
          '|',
          'ClearFormat',
          'Print',
          'SourceCode',
          'FullScreen',
          '|',
          'Undo',
          'Redo',
        ],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to {enable: true,enableFloating: true,type: ToolbarType.Expand,items: [‘Bold’, ‘Italic’, ‘Underline’, ’|’, ‘Formats’, ‘Alignments’, ‘OrderedList’,‘UnorderedList’, ’|’, ‘CreateLink’, ‘Image’, ’|’, ‘SourceCode’, ‘Undo’, ‘Redo’],itemConfigs: {}}

undoRedoSteps
`number`

Specifies the count of undo history which is stored in undoRedoManager.

<template>
  <div>
    <ejs-richtexteditor :undoRedoSteps="undoRedoSteps"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      undoRedoSteps: 10,
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to 30

undoRedoTimer
`number`

Specifies the interval value in milliseconds that store actions in undoRedoManager. The minimum value is 300 milliseconds.

Defaults to 300

value
`string`

Specifies the value displayed in the RichTextEditor’s content area and it should be string. The content of Rich Text Editor can be loaded with dynamic data such as database, AJAX content, and more.

<template>
  <div>
    <ejs-richtexteditor :value="value"> </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  data: function () {
    return {
      value: 'rich text editor',
    };
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to null

valueTemplate
`string` | `Function`

Accepts the template design and assigns it as RichTextEditor’s content. The built-in template engine which provides options to compile template string into a executable function. For EX: We have expression evolution as like ES6 expression string literals

<template>
  <div>
    <ejs-richtexteditor>
      <p>Rich Text Editor</p>
    </ejs-richtexteditor>
  </div>
</template>
<script>
import {
  RichTextEditorComponent,
  Toolbar,
  HtmlEditor,
  QuickToolbar,
  Link,
  Image,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';

export default {
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },
  provide: {
    richtexteditor: [Toolbar, HtmlEditor, QuickToolbar, Link, Image, Table],
  },
};
</script>

Defaults to null

width
`string` | `number`

Specifies the width of the RichTextEditor.

Defaults to ‘100%’

Methods

closeDialog

Close the dialog in the Rich Text Editor.

Parameter	Type	Description
type	`DialogType`	specifies the dialog type.

Returns void

destroy

Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).

Returns void

disableToolbarItem

Disables the given toolbar items in the Rich Text Editor component.

Parameter	Type	Description
items	`string` \| `string[]`	Specifies the single or collection of items
muteToolbarUpdate (optional)	`boolean`	enable/disables the toolbar item status in RichTextEditor. that you want to be disable in Rich Text Editor’s Toolbar.

Returns void

enableToolbarItem

Enables the give toolbar items in the Rich Text Editor component.

Parameter	Type	Description
items	`string` \| `string[]`	Specifies the single or collection of items
muteToolbarUpdate (optional)	`boolean`	enable/disables the toolbar item status in RichTextEditor. that you want to be enable in Rich Text Editor’s Toolbar.

Returns void

executeCommand

Executes the commands

Parameter	Type	Description
commandName	`CommandName`	Specifies the name of the command to be executed.
value (optional)	`string` \| `HTMLElement` \| `ILinkCommandsArgs` \| `IImageCommandsArgs` \| `ITableCommandsArgs` \| `FormatPainterSettingsModel` \| `IAudioCommandsArgs` \| `IVideoCommandsArgs`	Specifies the value that you want to execute.
option (optional)	`ExecuteCommandOption`	specifies the command option

Returns void

focusIn

Focuses the Rich Text Editor component

Returns void

focusOut

Blurs the Rich Text Editor component

Returns void

getCharCount

Returns the maximum number of characters in the Rich Text Editor.

Returns number

getContent

Returns the HTML or Text inside the RichTextEditor.

Returns Element

getHtml

Retrieves the HTML from RichTextEditor.

Returns string

getRange

Get the selected range from the RichTextEditor’s content.

Returns Range

getSelectedHtml

Returns the html value of the selected content as string.

Returns string

getSelection

Retrieves the HTML markup content from currently selected content of RichTextEditor.

Returns string

getText

Returns the text content as string.

Returns string

getXhtml

Retrieves the Rich Text Editor’s XHTML validated HTML content when enableXhtml property is enabled.

Returns string

hideInlineToolbar

It hides the inline quick toolbar

Returns void

print

By default, prints all the pages of the RichTextEditor.

Returns void

refreshUI

Refresh the view of the editor.

Returns void

removeToolbarItem

Removes the give toolbar items from the Rich Text Editor component.

Parameter	Type	Description
items	`string` \| `string[]`	Specifies the single or collection of items that you want to be remove from Rich Text Editor’s Toolbar.

Returns void

sanitizeHtml

This method will clean up the HTML against cross-site scripting attack and return the HTML as string. It’s only applicable to editorMode as HTML.

Parameter	Type	Description
value	`string`	Specifies the value that you want to sanitize.

Returns string

selectAll

Selects all the content in RichTextEditor

Returns void

selectRange

Selects a content range or an element

Parameter	Type	Description
range	`Range`	Specify the range which you want to select within the content. The method used to select a particular sentence or word or entire document.

Returns void

showDialog

Show the dialog in the Rich Text Editor.

Parameter	Type	Description
type	`DialogType`	specifies the dialog type.

Returns void

showEmojiPicker

Shows the emoji picker

Parameter	Type	Description
x (optional)	`number`	specifies the number value.
y (optional)	`number`	specifies the number value.

Returns void

showFullScreen

Shows the Rich Text Editor component in full-screen mode.

Returns void

showInlineToolbar

It shows the inline quick toolbar

Returns void

showSourceCode

Shows the source HTML/MD markup.

Returns void

Events

actionBegin
`EmitType<ActionBeginEventArgs>`

Triggers before command execution using toolbar items or executeCommand method. If you cancel this event, the command cannot be executed. Set the cancel argument to true to cancel the command execution.

actionComplete
`EmitType<ActionCompleteEventArgs>`

Triggers after command execution using toolbar items or executeCommand method.

afterImageDelete
`EmitType<AfterImageDeleteEventArgs>`

Event triggers when the selected image is cleared from the Rich Text Editor Content.

afterMediaDelete
`EmitType<AfterMediaDeleteEventArgs>`

Event triggers when the selected media is cleared from the Rich Text Editor Content.

afterPasteCleanup
`EmitType<object>`

Triggers after cleanup the copied content.

beforeDialogClose
`EmitType<BeforeCloseEventArgs>`

Event triggers when the dialog is being closed. If you cancel this event, the dialog remains opened. Set the cancel argument to true to prevent closing a dialog.

beforeDialogOpen
`EmitType<BeforeOpenEventArgs>`

Event triggers when the dialog is being opened. If you cancel this event, the dialog remains closed. Set the cancel argument to true to cancel the open of a dialog.

beforeFileUpload
`EmitType<BeforeUploadEventArgs>`

Event triggers before the media audio/video upload process.

beforeImageDrop
`EmitType<ImageDropEventArgs>`

Triggers before drop the image.

beforeImageUpload
`EmitType<BeforeUploadEventArgs>`

Event triggers before the image upload process.

beforePasteCleanup
`EmitType<PasteCleanupArgs>`

Triggers before cleanup the copied content.

beforeQuickToolbarOpen
`EmitType<BeforeQuickToolbarOpenArgs>`

Event triggers when the quick toolbar is being opened.

beforeSanitizeHtml
`EmitType<BeforeSanitizeHtmlArgs>`

Event triggers before sanitize the value. It’s only applicable to editorMode as HTML.

blur
`EmitType<Object>`

Triggers when Rich Text Editor is focused out.

change
`EmitType<ChangeEventArgs>`

Triggers only when Rich Text Editor is blurred and changes are done to the content.

created
`EmitType<Object>`

Triggers when the Rich Text Editor is rendered.

destroyed
`EmitType<Object>`

Triggers when the Rich Text Editor is destroyed.

dialogClose
`EmitType<Object>`

Event triggers after the dialog has been closed.

dialogOpen
`EmitType<Object>`

Event triggers when a dialog is opened.

fileRemoving
`EmitType<RemovingEventArgs>`

Event triggers when the selected media is cleared from the insert audio/video dialog.

fileSelected
`EmitType<SelectedEventArgs>`

Event triggers when the media is selected or dragged into the insert media audio/video dialog.

fileUploadFailed
`EmitType<Object>`

Event triggers when there is an error in the media upload.

fileUploadSuccess
`EmitType<Object>`

Event triggers when the media is successfully uploaded to the server side.

fileUploading
`EmitType<UploadingEventArgs>`

Event triggers when the selected media begins to upload in the insert media audio/video dialog.

focus
`EmitType<Object>`

Triggers when Rich Text Editor is focused in

imageRemoving
`EmitType<RemovingEventArgs>`

Event triggers when the selected image is cleared from the insert image dialog.

imageSelected
`EmitType<SelectedEventArgs>`

Event triggers when the image is selected or dragged into the insert image dialog.

imageUploadFailed
`EmitType<Object>`

Event triggers when there is an error in the image upload.

imageUploadSuccess
`EmitType<Object>`

Event triggers when the image is successfully uploaded to the server side.

imageUploading
`EmitType<UploadingEventArgs>`

Event triggers when the selected image begins to upload in the insert image dialog.

quickToolbarClose
`EmitType<Object>`

Event triggers after the quick toolbar has been closed.

quickToolbarOpen
`EmitType<Object>`

Event triggers when a quick toolbar is opened.

resizeStart
`EmitType<ResizeArgs>`

Triggers only when start resize the image.

resizeStop
`EmitType<ResizeArgs>`

Triggers only when stop resize the image.

resizing
`EmitType<ResizeArgs>`

Triggers only when resizing the image.

slashMenuItemSelect
`EmitType<SlashMenuItemSelectArgs>`

Triggers when an slash menu item in the popup is selected by the user either with mouse/tap or with keyboard navigation.

toolbarClick
`EmitType<Object>`

Triggers when Rich Text Editor Toolbar items is clicked.

toolbarStatusUpdate
`EmitType<Object>`

This event is deprecated and no longer works. Use updatedToolbarStatus event to get the undo and redo status.

updatedToolbarStatus
`EmitType<ToolbarStatusEventArgs>`

Triggers when the toolbar items status is updated.

Contents

RichTextEditorComponent

Properties

autoSaveOnIdle boolean

backgroundColor BackgroundColorModel

bulletFormatList BulletFormatListModel

cssClass string

editorMode EditorMode

emojiPickerSettings EmojiSettingsModel

enableAutoUrl boolean

enableHtmlEncode boolean

enableHtmlSanitizer boolean

enablePersistence boolean

enableResize boolean

enableRtl boolean

enableTabKey boolean

enableXhtml boolean

enabled boolean

enterKey EnterKey

exportPdf ExportPdfModel

exportWord ExportWordModel

fileManagerSettings FileManagerSettingsModel

floatingToolbarOffset number

fontColor FontColorModel

fontFamily FontFamilyModel

fontSize FontSizeModel

format FormatModel

formatPainterSettings FormatPainterSettingsModel

formatter IFormatter

height string | number

htmlAttributes { : }

iframeSettings IFrameSettingsModel

importWord ImportWordModel

inlineMode InlineModeModel

insertAudioSettings AudioSettingsModel

insertImageSettings ImageSettingsModel

insertVideoSettings VideoSettingsModel

keyConfig { : }

locale string

maxLength number

numberFormatList NumberFormatListModel

pasteCleanupSettings PasteCleanupSettingsModel

placeholder string

quickToolbarSettings QuickToolbarSettingsModel

readonly boolean

saveInterval number

shiftEnterKey ShiftEnterKey

showCharCount boolean

showTooltip boolean

slashMenuSettings SlashMenuSettingsModel

tableSettings TableSettingsModel

toolbarSettings ToolbarSettingsModel

undoRedoSteps number

undoRedoTimer number

value string

valueTemplate string | Function

width string | number

Methods

closeDialog

destroy

disableToolbarItem

enableToolbarItem

executeCommand

focusIn

focusOut

getCharCount

getContent

getHtml

getRange

getSelectedHtml

getSelection

getText

getXhtml

hideInlineToolbar

print

refreshUI

removeToolbarItem

sanitizeHtml

selectAll

selectRange

showDialog

autoSaveOnIdle
`boolean`

backgroundColor
`BackgroundColorModel`

bulletFormatList
`BulletFormatListModel`

cssClass
`string`

editorMode
`EditorMode`

emojiPickerSettings
`EmojiSettingsModel`

enableAutoUrl
`boolean`

enableHtmlEncode
`boolean`

enableHtmlSanitizer
`boolean`

enablePersistence
`boolean`

enableResize
`boolean`

enableRtl
`boolean`

enableTabKey
`boolean`

enableXhtml
`boolean`

enabled
`boolean`

enterKey
`EnterKey`

exportPdf
`ExportPdfModel`

exportWord
`ExportWordModel`

fileManagerSettings
`FileManagerSettingsModel`

floatingToolbarOffset
`number`

fontColor
`FontColorModel`

fontFamily
`FontFamilyModel`

fontSize
`FontSizeModel`

format
`FormatModel`

formatPainterSettings
`FormatPainterSettingsModel`

formatter
`IFormatter`

height
`string` | `number`

htmlAttributes
{ : }

iframeSettings
`IFrameSettingsModel`

importWord
`ImportWordModel`

inlineMode
`InlineModeModel`

insertAudioSettings
`AudioSettingsModel`

insertImageSettings
`ImageSettingsModel`

insertVideoSettings
`VideoSettingsModel`

keyConfig
{ : }

locale
`string`

maxLength
`number`

numberFormatList
`NumberFormatListModel`

pasteCleanupSettings
`PasteCleanupSettingsModel`

placeholder
`string`

quickToolbarSettings
`QuickToolbarSettingsModel`

readonly
`boolean`

saveInterval
`number`

shiftEnterKey
`ShiftEnterKey`

showCharCount
`boolean`

showTooltip
`boolean`

slashMenuSettings
`SlashMenuSettingsModel`

tableSettings
`TableSettingsModel`

toolbarSettings
`ToolbarSettingsModel`

undoRedoSteps
`number`

undoRedoTimer
`number`

value
`string`

valueTemplate
`string` | `Function`

width
`string` | `number`

actionBegin
`EmitType<ActionBeginEventArgs>`

actionComplete
`EmitType<ActionCompleteEventArgs>`

afterImageDelete
`EmitType<AfterImageDeleteEventArgs>`

afterMediaDelete
`EmitType<AfterMediaDeleteEventArgs>`

afterPasteCleanup
`EmitType<object>`

beforeDialogClose
`EmitType<BeforeCloseEventArgs>`

beforeDialogOpen
`EmitType<BeforeOpenEventArgs>`

beforeFileUpload
`EmitType<BeforeUploadEventArgs>`

beforeImageDrop
`EmitType<ImageDropEventArgs>`

beforeImageUpload
`EmitType<BeforeUploadEventArgs>`

beforePasteCleanup
`EmitType<PasteCleanupArgs>`

beforeQuickToolbarOpen
`EmitType<BeforeQuickToolbarOpenArgs>`

beforeSanitizeHtml
`EmitType<BeforeSanitizeHtmlArgs>`

blur
`EmitType<Object>`

change
`EmitType<ChangeEventArgs>`

created
`EmitType<Object>`

destroyed
`EmitType<Object>`

dialogClose
`EmitType<Object>`

dialogOpen
`EmitType<Object>`

fileRemoving
`EmitType<RemovingEventArgs>`

fileSelected
`EmitType<SelectedEventArgs>`

fileUploadFailed
`EmitType<Object>`

fileUploadSuccess
`EmitType<Object>`

fileUploading
`EmitType<UploadingEventArgs>`

focus
`EmitType<Object>`

imageRemoving
`EmitType<RemovingEventArgs>`