Enter key Configuration in Vue Rich Text Editor Component

26 Feb 202524 minutes to read

Rich Text Editor allows you to customize the behavior of the Enter key and Shift+Enter key combinations. This feature provides flexibility in formatting and structuring content within the editor.

Available Options

The enterKey property accepts the following values:

  • P (default)
  • DIV
  • BR

The shiftEnterKey property accepts the following values:

  • BR (default)
  • P
  • DIV

Enter key Customization

By default, pressing the Enter key in the Rich Text Editor creates a new <p> tag. You can customize this behavior using the enterKey property.

When you customize the Enter key, the editor will create the specified tag when the Enter key is pressed. This configuration also affects the default content structure of the Rich Text Editor.

<template>
    <div class="control-section">
        <div class="sample-container">
            <div class="default-section">
                <table class="api">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-dropdownlist ref="enterOptionInstance" :dataSource="enterData" :fields='fields'
                                        :popupHeight="height" :change="enterChange" :value='enterValue'
                                        :placeholder='enterPlaceHolder' :floatLabelType='floatLabelType'></ejs-dropdownlist>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br />
                <ejs-richtexteditor ref="rteInstance" :height="height" :value="rteValue">
                </ejs-richtexteditor>
            </div>
        </div>
    </div>
</template>

<style>
.api {
    width: 50%;
}

.api td {
    padding-right: 100px;
    margin-top: 3px;
}

@media only screen and (max-width: 600px) {
    .api {
        width: 100%;
    }

    .api td {
        display: block;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
    .api {
        width: 50%;
    }
}
</style>

<script setup>
import { provide, ref } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
const rteInstance = ref(null);
const enterOptionInstance = ref(null);
const rteValue = `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
const height = 250;
const enterPlaceHolder = 'When pressing the enter key';
const floatLabelType = 'Always';
const enterData = [
    { text: "Create a new <p>", value: "P" },
    { text: "Create a new <div>", value: "DIV" },
    { text: "Create a new <br>", value: "BR" }
];
const fields = { text: 'text', value: 'value' };
const enterValue = 'P';
const enterChange = function () {
    if (enterOptionInstance.value.ej2Instances.value === 'P') {
        rteInstance.value.ej2Instances.enterKey = 'P';
        rteInstance.value.ej2Instances.value = `<p>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
    } else if (enterOptionInstance.value.ej2Instances.value === 'DIV') {
        rteInstance.value.ej2Instances.enterKey = 'DIV';
        rteInstance.value.ej2Instances.value = `<div>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</div><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
    } else if (enterOptionInstance.value.ej2Instances.value === 'BR') {
        rteInstance.value.ej2Instances.enterKey = 'BR';
        rteInstance.value.ej2Instances.value = `In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
    }
}
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
    <div class="control-section">
        <div class="sample-container">
            <div class="default-section">
                <table class="api">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-dropdownlist ref="enterOptionInstance" :dataSource="enterData" :fields='fields' :popupHeight="height" :change="enterChange" :value='enterValue' :placeholder='enterPlaceHolder' :floatLabelType='floatLabelType'></ejs-dropdownlist>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br/>
                <ejs-richtexteditor ref="rteInstance" :height="height" :value="rteValue">
                </ejs-richtexteditor>
            </div>
        </div>
    </div>
</template>

<style>
    .api {
        width: 50%;
    }
    .api td {
        padding-right: 100px;
        margin-top: 3px;
    }
    @media only screen and (max-width: 600px) {
        .api {
            width: 100%;
        }
        .api td {
            display: block;
        }
    }
    @media only screen and (min-width: 600px) and (max-width: 1000px) {
        .api {
            width: 50%;
        }
    }
</style>


<script>

import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
    name: "App",
    components: {
        "ejs-dropdownlist":DropDownListComponent,
        "ejs-richtexteditor":RichTextEditorComponent,
    },
    data() {
      return {
        rteValue: `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`,
        height: 250,
        enterPlaceHolder: 'When pressing the enter key',
        floatLabelType: 'Always',
        enterData:  [
            { text: "Create a new <p>", value: "P" },
            { text: "Create a new <div>", value: "DIV" },
            { text: "Create a new <br>", value: "BR" }
        ],
        fields: { text: 'text', value: 'value' },
        enterValue: 'P',
      };
    },
    methods: {
        enterChange: function() {
            if (this.$refs.enterOptionInstance.ej2Instances.value === 'P') {
                this.$refs.rteInstance.ej2Instances.enterKey = 'P';
                 this.$refs.rteInstance.ej2Instances.value = `<p>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
            } else if (this.$refs.enterOptionInstance.ej2Instances.value === 'DIV') {
                this.$refs.rteInstance.ej2Instances.enterKey = 'DIV';
                this.$refs.rteInstance.ej2Instances.value = `<div>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</div><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
            } else if (this.$refs.enterOptionInstance.ej2Instances.value === 'BR') {
                this.$refs.rteInstance.ej2Instances.enterKey = 'BR';
                this.$refs.rteInstance.ej2Instances.value = `In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
            }
        }
    },
    provide: {
      richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
    }
  }
</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>

Shift+Enter key Customization

By default, pressing Shift+Enter in the Rich Text Editor inserts a <br> tag. You can customize this behavior using the shiftEnterKey property.

When you customize the Shift+Enter key, the editor will create the specified tag when the key combination is pressed. This configuration also affects the default content structure of the Rich Text Editor.

<template>
    <div class="control-section">
        <div class="sample-container">
            <div class="default-section">
                <table class="api">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-dropdownlist ref="shiftEnterOptionInstance" :dataSource="shiftEnterData" :fields='fields' :popupHeight="height" :change="shiftEnterChange" :value='shiftEnterValue' :placeholder='shiftEnterPlaceHolder' :floatLabelType='floatLabelType'></ejs-dropdownlist>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br/>
                <ejs-richtexteditor ref="rteInstance" :height="height" :value="rteValue">ejs-richtexteditor>
            </div>
        </div>
    </div>
</template>

<style>
    .api {
        width: 55%;
    }
    .api td {
        padding-right: 100px;
        margin-top: 3px;
    }
    @media only screen and (max-width: 600px) {
        .api {
            width: 100%;
        }
        .api td {
            display: block;
        }
    }
    @media only screen and (min-width: 600px) and (max-width: 1000px) {
        .api {
            width: 55%;
        }
    }
</style>

<script setup>
import { provide, ref } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";

const rteValue = `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
const rteInstance = ref(null);
const shiftEnterOptionInstance = ref(null);
const height = 220;
const shiftEnterPlaceHolder = 'When pressing the shift + enter key';
const floatLabelType = 'Always';
const shiftEnterValue = 'BR';
const shiftEnterData =  [
    { text: "Create a new <br>", value: "BR" },
    { text: "Create a new <div>", value: "DIV" },
    { text: "Create a new <p>", value: "P" }
];
const fields = { text: 'text', value: 'value' };
const shiftEnterChange = function() {
    if (shiftEnterOptionInstance.value.ej2Instances.value === 'BR') {
        rteInstance.value.ej2Instances.shiftEnterKey = 'BR';
    } else if (shiftEnterOptionInstance.value.ej2Instances.value === 'DIV') {
        rteInstance.value.ej2Instances.shiftEnterKey = 'DIV';
    } else if (shiftEnterOptionInstance.value.ej2Instances.value === 'P') {
        rteInstance.value.ej2Instances.shiftEnterKey = 'P';
    }
}
provide('richtexteditor',  [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
    <div class="control-section">
        <div class="sample-container">
            <div class="default-section">
                <table class="api">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-dropdownlist ref="shiftEnterOptionInstance" :dataSource="shiftEnterData" :fields='fields' :popupHeight="height" :change="shiftEnterChange" :value='shiftEnterValue' :placeholder='shiftEnterPlaceHolder' :floatLabelType='floatLabelType'></ejs-dropdownlist>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br/>
                <ejs-richtexteditor ref="rteInstance" :height="height" :value="rteValue"></ejs-richtexteditor>
            </div>
        </div>
    </div>
</template>

<style>
    .api {
        width: 55%;
    }
    .api td {
        padding-right: 100px;
        margin-top: 3px;
    }
    @media only screen and (max-width: 600px) {
        .api {
            width: 100%;
        }
        .api td {
            display: block;
        }
    }
    @media only screen and (min-width: 600px) and (max-width: 1000px) {
        .api {
            width: 55%;
        }
    }
</style>

<script>  
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
    name: "App",
    components: {
        "ejs-dropdownlist":DropDownListComponent,
        "ejs-richtexteditor":RichTextEditorComponent
    },
    data() {
      return {
        rteValue: `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`,
        height: 220,
        shiftEnterPlaceHolder: 'When pressing the shift + enter key',
        floatLabelType: 'Always',
        shiftEnterValue: 'BR',
        shiftEnterData:  [
            { text: "Create a new <br>", value: "BR" },
            { text: "Create a new <div>", value: "DIV" },
            { text: "Create a new <p>", value: "P" }
        ],
        fields: { text: 'text', value: 'value' }
      };
    },
    methods: {
        shiftEnterChange: function() {
            if (this.$refs.enterOptionInstance.ej2Instances.value === 'BR') {
                this.$refs.rteInstance.ej2Instances.shiftEnterKey = 'BR';
            } else if (this.$refs.enterOptionInstance.ej2Instances.value === 'DIV') {
                this.$refs.rteInstance.ej2Instances.shiftEnterKey = 'DIV';
            } else if (this.$refs.enterOptionInstance.ej2Instances.value === 'P') {
                this.$refs.rteInstance.ej2Instances.shiftEnterKey = 'P';
            }
        }
    },
    provide: {
      richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
    }
  }
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>

Preventing Enter Key Manipulation

In some cases, you may want to prevent the default Enter key behavior entirely. The Rich Text Editor allows you to intercept and prevent the default action of the Enter key at the editor level by handling the actionBegin event. To ensure that the default behavior is also suppressed at the browser level, you need to call the preventDefault() method on the event object within the event handler. This approach allows for precise control over the editor’s behavior in response to the Enter key press, facilitating the implementation of custom functionality.

<template>
    <div class="control-section">
        <div class="sample-container">
            <div class="default-section">
                <table class="api">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-dropdownlist ref="enterOptionInstance" :dataSource="enterData" :fields='fields'
                                        :popupHeight="height" :change="enterChange" :value='enterValue'
                                        :placeholder='enterPlaceHolder' :floatLabelType='floatLabelType'></ejs-dropdownlist>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br />
                <ejs-richtexteditor ref="rteInstance" :height="height" :value="rtevalue" :actionBegin="onActionBegin">
                </ejs-richtexteditor>
            </div>
        </div>
    </div>
</template>

<style>
.api {
    width: 50%;
}

.api td {
    padding-right: 100px;
    margin-top: 3px;
}

@media only screen and (max-width: 600px) {
    .api {
        width: 100%;
    }

    .api td {
        display: block;
    }
}

@media only screen and (min-width: 600px) and (max-width: 1000px) {
    .api {
        width: 50%;
    }
}
</style>

<script setup>
import { provide, ref } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";

const rteInstance = ref(null);
const enterOptionInstance = ref(null);
const rteValue = `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
const height = 250;
const enterPlaceHolder = 'When pressing the enter key';
const floatLabelType = 'Always';
const enterData = [
    { text: "Create a new <p>", value: "P" },
    { text: "Create a new <div>", value: "DIV" },
    { text: "Create a new <br>", value: "BR" }
];
const fields = { text: 'text', value: 'value' };
const enterValue = 'P';
const enterChange = function () {
    if (enterOptionInstance.value.ej2Instances.value === 'P') {
        rteInstance.value.ej2Instances.enterKey = 'P';
        rteInstance.value.ej2Instances.value = `<p>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
    } else if (enterOptionInstance.value.ej2Instances.value === 'DIV') {
        rteInstance.value.ej2Instances.enterKey = 'DIV';
        rteInstance.value.ej2Instances.value = `<div>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</div><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
    } else if (enterOptionInstance.value.ej2Instances.value === 'BR') {
        rteInstance.value.ej2Instances.enterKey = 'BR';
        rteInstance.value.ej2Instances.value = `In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
    }
}

const onActionBegin = function(args){
    if (args.requestType === 'EnterAction') {
        args.cancel = true;
        args.originalEvent.preventDefault();
    }
}
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
    <div class="control-section">
        <div class="sample-container">
            <div class="default-section">
                <table class="api">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-dropdownlist ref="enterOptionInstance" :dataSource="enterData" :fields='fields' :popupHeight="height" :change="enterChange" :value='enterValue' :placeholder='enterPlaceHolder' :floatLabelType='floatLabelType'></ejs-dropdownlist>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <br/>
                <ejs-richtexteditor ref="rteInstance" :height="height" :value="rtevalue" :actionBegin="onActionBegin">
                </ejs-richtexteditor>
            </div>
        </div>
    </div>
</template>

<style>
    .api {
        width: 50%;
    }
    .api td {
        padding-right: 100px;
        margin-top: 3px;
    }
    @media only screen and (max-width: 600px) {
        .api {
            width: 100%;
        }
        .api td {
            display: block;
        }
    }
    @media only screen and (min-width: 600px) and (max-width: 1000px) {
        .api {
            width: 50%;
        }
    }
</style>


<script>

import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
    name: "App",
    components: {
        "ejs-dropdownlist":DropDownListComponent,
        "ejs-richtexteditor":RichTextEditorComponent,
    },
    data() {
      return {
        rteValue: `<p>In Rich Text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`,
        height: 250,
        enterPlaceHolder: 'When pressing the enter key',
        floatLabelType: 'Always',
        enterData:  [
            { text: "Create a new <p>", value: "P" },
            { text: "Create a new <div>", value: "DIV" },
            { text: "Create a new <br>", value: "BR" }
        ],
        fields: { text: 'text', value: 'value' },
        enterValue: 'P',
      };
    },
    methods: {
        enterChange: function() {
            if (this.$refs.enterOptionInstance.ej2Instances.value === 'P') {
                this.$refs.rteInstance.ej2Instances.enterKey = 'P';
                 this.$refs.rteInstance.ej2Instances.value = `<p>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</p><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
            } else if (this.$refs.enterOptionInstance.ej2Instances.value === 'DIV') {
                this.$refs.rteInstance.ej2Instances.enterKey = 'DIV';
                this.$refs.rteInstance.ej2Instances.value = `<div>In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:</div><ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
            } else if (this.$refs.enterOptionInstance.ej2Instances.value === 'BR') {
                this.$refs.rteInstance.ej2Instances.enterKey = 'BR';
                this.$refs.rteInstance.ej2Instances.value = `In Rich text Editor, the enter key and shift + enter key actions can be customized using the enterKey and shiftEnterKey APIs. And the possible values are as follows:<ul><li>P - When 'P' is configured, pressing enter or shift + enter will create a 'p' tag</li><li>DIV - When 'DIV' is configured, pressing enter or shift + enter will create a 'div' tag</li><li>BR - When 'BR' is configured, pressing enter or shift + enter will create a 'br' tag</li></ul>`;
            }
        },
        onActionBegin: function (args) {
            if (args.requestType === 'EnterAction') {
                args.cancel = true;
                args.originalEvent.preventDefault();
            }
        },
    },
    provide: {
      richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
    }
  }
</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>