Enter key in Vue Rich text editor component

11 Jun 202424 minutes to read

Rich Text Editor allows to customize the tag that is inserted when pressing the enter key and shift + enter key in the Rich Text Editor.

Enter key customization

By default, the <p> tag will be created while pressing the enter key. The enter key can be customized by using the enterKey property, where the possible tags that can be used to customize are <p>, <div>, and <br>.

When the enter key is customized with any of the possible values, pressing the enter key in the editor will create a new tag that is configured. Also, when the enter key is configured the default value of the Rich Text Editor will also change respectively with the configured values.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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">
                    <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>
                </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 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">
                <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>
            </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 {
        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, the <br> tag will be created while pressing the shift + enter key. The shift + enter key can be customized by using the shiftEnterKey property where the possible tags that can be used to customize are <br>, <p>, <div>.

When the shift + enter key is customized with any of the possible values, pressing the shift + enter key in the editor will create a new tag that is configured. Also, when the shift + enter key is configured the default value of the Rich Text Editor will change respectively with the configured values.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<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">
                <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>
            </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 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">
                <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>
            </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 {
        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>