Selection in Vue Rich Text Editor Component

18 Nov 201824 minutes to read

Text selection

The Rich Text Editor supports character range-based text selection using the Syncfusion Slider component. This feature allows users to select a specific range of characters (e.g., 33–45) within the editor content, which is then automatically highlighted.

Adding a Slider for character range selection

The Rich Text Editor can be integrated with the Slider component to enable precise character range-based text selection. The slider is configured in range type, allowing users to select a start and end index within the editor content. When the slider values change, the corresponding text range is highlighted automatically.

This approach is particularly useful for scenarios where exact character-level selection is required for operations such as copying, formatting, or analysis.

~/src/App.vue
<template>
    <ejs-slider id="range" :type="'Range'" :value="sliderValue" :min="0" :max="maxLength" />
</template>

<script>
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent,
        'ejs-slider': SliderComponent,
    },
    data: function() {
        return {
            sliderValue: [0, 50],
            maxLength: 400,
        };
    },
    provide:{
        richtexteditor:[Toolbar, Link, Image, HtmlEditor, QuickToolbar]
    }
}
</script>

Dynamic range adjustment based on content

When the editor is created, the actual length of the text content is calculated, and the slider’s maximum value is updated dynamically to match this length. This ensures that the slider range always reflects the current content size. The editor is also focused programmatically to make the selection visible, and an initial selection is applied based on the slider’s default values.

~/src/App.vue
<template>
    <ejs-richtexteditor ref="rteObj" id="editor" :value="rteValue" @created="onEditorCreated"> </ejs-richtexteditor>
</template>

<script>
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent,
        'ejs-slider': SliderComponent,
    },
    data: function() {
        return {
            rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG ("what you see is what you get") editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`,
        };
    },
    provide:{
        richtexteditor:[Toolbar, Link, Image, HtmlEditor, QuickToolbar]
    },
    methods: {
        onEditorCreated() {
            const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
            const realLength = panel?.textContent?.length ?? 0;
            this.maxLength = realLength;
            panel.focus();
            // Initial selection based on sliderValue
            this.onSliderChange({ value: this.sliderValue });
        },
    }
}
</script>

Precise selection using DOM range

The selection logic is implemented in the change event of the slider. It retrieves the start and end positions from the slider and ensures they are within valid bounds. The code then uses a helper function, getTextNodeAtOffset(), which employs a TreeWalker to traverse text nodes and locate the exact node and offset for the given character positions.

A Range object is created using these offsets and applied to the current selection using the browser’s Selection API. This guarantees accurate highlighting even when the content spans multiple text nodes.

~/src/App.vue
<template>
    <ejs-slider id="range" :type="'Range'"  @change="onSliderChange" :value="sliderValue" :min="0" :max="maxLength" />
</template>

<script>
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent,
        'ejs-slider': SliderComponent,
    },
    data: function() {
        return {
            sliderValue: [0, 50],
            maxLength: 400,
        };
    },
    provide:{
        richtexteditor:[Toolbar, Link, Image, HtmlEditor, QuickToolbar]
    },
    methods: {
        onSliderChange(args) {
            const [start, end] = args.value;
            const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
            const maxLen = panel?.textContent?.length ?? 0;

            const safeStart = Math.min(start, maxLen);
            const safeEnd = Math.min(end, maxLen);

            const startInfo = this.getTextNodeAtOffset(panel, safeStart);
            const endInfo = this.getTextNodeAtOffset(panel, safeEnd);

            if (startInfo && endInfo) {
                const range = document.createRange();
                range.setStart(startInfo.node, startInfo.offset);
                range.setEnd(endInfo.node, endInfo.offset);

                const selection = window.getSelection();
                if (selection) {
                    selection.removeAllRanges();
                    selection.addRange(range);
                }
            }
            this.sliderValue = [safeStart, safeEnd];
        },
    }
}
</script>

Helper function for accurate offset calculation

The getTextNodeAtOffset() function uses a TreeWalker to traverse text nodes inside the editor and determine the exact node and offset for a given character index. This ensures that even complex content structures are handled correctly.

~/src/App.vue
<script>
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent,
        'ejs-slider': SliderComponent,
    },
    data: function() {},
    provide:{
        richtexteditor:[Toolbar, Link, Image, HtmlEditor, QuickToolbar]
    },
    methods: {
        getTextNodeAtOffset(root, offset) {
            let currentOffset = 0;
            const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
            while (walker.nextNode()) {
                const node = walker.currentNode;
                const nodeLength = node.textContent.length;

                if (currentOffset + nodeLength >= offset) {
                    return {
                        node,
                        offset: offset - currentOffset,
                    };
                }
                currentOffset += nodeLength;
            }
            return null;
        },
    }
}
</script>

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="control-section">
    <div class="sample-container">
      <ejs-slider
        id="range"
        :type="'Range'"
        :value="sliderValue"
        :min="0"
        :max="maxLength"
        @change="onSliderChange"
      />
      <ejs-richtexteditor
        ref="rteObj"
        id="editor"
        :value="rteValue"
        :height="400"
      >
        <ejs-richtexteditor-inject
          :services="[Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table]"
        />
      </ejs-richtexteditor>
    </div>
  </div>
</template>

<script setup>
import {
  RichTextEditorComponent as EjsRichtexteditor,
  Toolbar,
  Link,
  Image,
  HtmlEditor,
  QuickToolbar,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';
import { SliderComponent as EjsSlider } from '@syncfusion/ej2-vue-inputs';
import { ref, onMounted, provide } from 'vue';

provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table]);

const rteObj = ref(null);
const sliderValue = ref([0, 50]);
const maxLength = ref(400);

const rteValue = `<p>The Syncfusion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, hyperlinks, uploads, etc. Contains undo/redo manager.</p>`;

function onSliderChange(args) {
  const [start, end] = args.value;
  const panel = rteObj.value?.ej2Instances?.contentModule?.getEditPanel();
  const textNode = panel?.firstChild?.firstChild;
  if (!textNode || !(textNode instanceof Text)) return;

  const safeStart = Math.min(start, textNode.length);
  const safeEnd = Math.min(end, textNode.length);

  const range = document.createRange();
  range.setStart(textNode, safeStart);
  range.setEnd(textNode, safeEnd);

  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

onMounted(() => {
  const rteInstance = rteObj.value?.ej2Instances;
  if (!rteInstance) return;

  rteInstance.addEventListener('created', () => {
    const panel = rteInstance.contentModule?.getEditPanel();
    const textNode = panel?.firstChild?.firstChild;
    if (textNode && textNode.textContent) {
      maxLength.value = textNode.textContent.length;
    }
  });
});
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>
<template>
  <div class="control-section">
    <div class="sample-container">
      <label class="labeltext">Range Slider</label>
      <ejs-slider
        id="range"
        :type="'Range'"
        :value="sliderValue"
        :min="0"
        :max="maxLength"
        @change="onSliderChange"
      />
      <ejs-richtexteditor
        ref="rteObj"
        id="editor"
        :value="rteValue"
        :height="400"
        @created="onEditorCreated"
      >
      </ejs-richtexteditor>
    </div>
  </div>
</template>

<script>
import {
  RichTextEditorComponent,
  Toolbar,
  Link,
  Image,
  HtmlEditor,
  QuickToolbar,
  Table,
} from '@syncfusion/ej2-vue-richtexteditor';
import { SliderComponent } from '@syncfusion/ej2-vue-inputs';

export default {
  name: 'App',
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
    'ejs-slider': SliderComponent,
  },
  data() {
    return {
      rteValue: `<p>The Syncfusion Rich Text Editor, a WYSIWYG ("what you see is what you get") editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here. Key features: Provides IFRAME and DIV modes. Bulleted and numbered lists. Handles images, hyperlinks, videos, uploads, etc. Contains undo/redo manager.</p>`,
      sliderValue: [0, 50],
      maxLength: 400,
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar, Table]
  },
  methods: {
    onEditorCreated() {
      const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
      const realLength = panel?.textContent?.length ?? 0;
      this.maxLength = realLength;
      panel.focus();
      // Initial selection based on sliderValue
      this.onSliderChange({ value: this.sliderValue });
    },

    getTextNodeAtOffset(root, offset) {
      let currentOffset = 0;
      const walker = document.createTreeWalker(
        root,
        NodeFilter.SHOW_TEXT,
        null
      );

      while (walker.nextNode()) {
        const node = walker.currentNode;
        const nodeLength = node.textContent.length;

        if (currentOffset + nodeLength >= offset) {
          return {
            node,
            offset: offset - currentOffset,
          };
        }

        currentOffset += nodeLength;
      }

      return null;
    },
    onSliderChange(args) {
      const [start, end] = args.value;
      const panel = this.$refs.rteObj.ej2Instances.contentModule.getEditPanel();
      const maxLen = panel?.textContent?.length ?? 0;

      const safeStart = Math.min(start, maxLen);
      const safeEnd = Math.min(end, maxLen);

      const startInfo = this.getTextNodeAtOffset(panel, safeStart);
      const endInfo = this.getTextNodeAtOffset(panel, safeEnd);

      if (startInfo && endInfo) {
        const range = document.createRange();
        range.setStart(startInfo.node, startInfo.offset);
        range.setEnd(endInfo.node, endInfo.offset);

        const selection = window.getSelection();
        if (selection) {
          selection.removeAllRanges();
          selection.addRange(range);
        }
      }

      this.sliderValue = [safeStart, safeEnd];
    },
  },
};
</script>

Node selection

Node selection allows users to programmatically select entire HTML elements (nodes) such as paragraphs, images, or tables within the Rich Text Editor. This is useful when you want to highlight or manipulate specific content blocks without relying on manual user selection.

The following example demonstrates how to select a paragraph node programmatically using the browser’s native Range and Selection APIs.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div>
    <button class="e-btn" style="margin-bottom: 20px" @click="selectSecondParagraph">
      Select Paragraph
    </button>
    <ejs-richtexteditor ref="rteRef" :value="rteValue" height="400">
    </ejs-richtexteditor>
  </div>
</template>

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

const rteRef = ref();

const rteValue = `<p>This is paragraph one.</p><p>This is paragraph two.</p>`;

function selectSecondParagraph() {
  const panel = rteRef.value?.ej2Instances?.contentModule?.getEditPanel();
  if (!panel) return;

  const paragraphs = panel.querySelectorAll('p');
  if (paragraphs.length > 1) {
    const range = document.createRange();
    range.selectNode(paragraphs[1]);

    const selection = window.getSelection();
    if (selection) {
      selection.removeAllRanges();
      selection.addRange(range);
    }
  }
}
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>
<template>
  <div>
    <button
      class="e-btn"
      style="margin-bottom: 20px"
      @click="selectSecondParagraph"
    >
      Select Paragraph
    </button>
    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
    </ejs-richtexteditor>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },

  data() {
    return {
      rteValue: `<p>This is paragraph one.</p><p>This is paragraph two.</p>`,
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar],
  },
  methods: {
    selectSecondParagraph() {
      const panel =
        this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
      const paragraphs = panel.querySelectorAll('p');

      if (paragraphs.length > 1) {
        const range = document.createRange();
        range.selectNode(paragraphs[1]); // Select second paragraph

        const selection = window.getSelection();
        if (selection) {
          selection.removeAllRanges();
          selection.addRange(range);
        }
      }
    },
  },
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>

Cell selection

Cell selection allows users to programmatically select specific table cells within the Rich Text Editor. This is useful for highlighting or manipulating content inside tables without requiring manual user interaction.

The following example demonstrates how to select a table cell programmatically using the browser’s native Range and Selection APIs.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div>
    <button
      class="e-btn"
      style="margin-bottom: 20px"
      @click="selectCell"
    >
      Select Cell
    </button>
    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
    </ejs-richtexteditor>
  </div>
</template>

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

const rteRef = ref();

const rteValue = `<table style="width:100%; border-collapse: collapse;" border="1">
    <thead>
      <tr>
        <th style="font-weight:bold; padding:8px;">Product</th>
        <th style="font-weight:bold; padding:8px;">Price</th>
        <th style="font-weight:bold; padding:8px;">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding:8px;">Product A</td>
        <td style="padding:8px;">$25</td>
        <td style="padding:8px;">Available</td>
      </tr>
      <tr>
        <td style="padding:8px;">Product B</td>
        <td style="padding:8px;">$40</td>
        <td style="padding:8px;">Out of Stock</td>
      </tr>
    </tbody>
  </table>`;

function selectCell() {
    const panel =
    this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
    const cells = panel.querySelectorAll('td');

    if (cells.length > 2) {
      const cell = cells[2]; // Third cell
      const range = document.createRange();
      range.selectNode(cell);

      const selection = window.getSelection();
      if (selection) {
        selection.removeAllRanges();
        selection.addRange(range);
      }

      cell.style.backgroundColor = '#cce5ff';
      cell.classList.add('e-cell-select');
    }

}
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>
<template>
  <div>
    <button
      class="e-btn"
      style="margin-bottom: 20px"
      @click="selectCell"
    >
      Select Cell
    </button>
    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
    </ejs-richtexteditor>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },

  data() {
    return {
      rteValue: `<table style="width:100%; border-collapse: collapse;" border="1">
    <thead>
      <tr>
        <th style="font-weight:bold; padding:8px;">Product</th>
        <th style="font-weight:bold; padding:8px;">Price</th>
        <th style="font-weight:bold; padding:8px;">Stock</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding:8px;">Product A</td>
        <td style="padding:8px;">$25</td>
        <td style="padding:8px;">Available</td>
      </tr>
      <tr>
        <td style="padding:8px;">Product B</td>
        <td style="padding:8px;">$40</td>
        <td style="padding:8px;">Out of Stock</td>
      </tr>
    </tbody>
  </table>`,
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar],
  },
  methods: {
    selectCell() {
      const panel =
        this.$refs.defaultRTE.ej2Instances.contentModule.getEditPanel();
        const cells = panel.querySelectorAll('td');

        if (cells.length > 2) {
          const cell = cells[2]; // Third cell
          const range = document.createRange();
          range.selectNode(cell);

          const selection = window.getSelection();
          if (selection) {
            selection.removeAllRanges();
            selection.addRange(range);
          }

          cell.style.backgroundColor = '#cce5ff';
          cell.classList.add('e-cell-select');
        }
     
      }
    }
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>

Select all content

To select all content within the Rich Text Editor, use the selectAll method. This method highlights all the text and elements inside the editor, allowing users to perform actions such as formatting or deleting the entire content.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div>
    <button class="e-btn" style="margin-bottom: 20px" @click="selectAllContent">
      Select All
    </button>

    <ejs-richtexteditor ref="rteRef" :value="rteValue">
    </ejs-richtexteditor>
  </div>
</template>

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

const rteRef = ref();

const rteValue = `<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
  <li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li>
  <li><p>Capable of handling markdown editing.</p></li>
  <li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
  <li><p>Provides a fully customizable toolbar.</p></li>
  <li><p>Provides HTML view to edit the source directly for developers.</p></li>
  <li><p>Supports third-party library integration.</p></li>
  <li><p>Allows preview of modified content before saving it.</p></li>
  <li><p>Handles images, hyperlinks, video, uploads, etc.</p></li>
  <li><p>Contains undo/redo manager.</p></li>
  <li><p>Creates bulleted and numbered lists.</p></li>
</ul>`;

function selectAllContent() {
  rteRef.value?.ej2Instances?.selectAll();
}
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/tailwind3.css";
</style>
<template>
  <div>
    <button class="e-btn" style="margin-bottom: 20px" @click="selectAllContent">
      Select All
    </button>
    <ejs-richtexteditor ref="defaultRTE" :value="rteValue">
    </ejs-richtexteditor>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    'ejs-richtexteditor': RichTextEditorComponent,
  },

  data() {
    return {
      rteValue: `<p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p></li><li><p>Capable of handling markdown editing.</p></li><li><p>Contains a modular library to load the necessary functionality on demand.</p></li><li><p>Provides a fully customizable toolbar.</p></li><li><p>Provides HTML view to edit the source directly for developers.</p></li><li><p>Supports third-party library integration.</p></li><li><p>Allows preview of modified content before saving it.</p></li><li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager.</p></li><li><p>Creates bulleted and numbered lists.</p></li></ul>`,
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, HtmlEditor, QuickToolbar],
  },
  methods: {
    selectAllContent() {
      this.$refs.defaultRTE.ej2Instances.selectAll();
    },
  },
};
</script>

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

Search docs

Ask Syncfusion AI Assistant