Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Add RichEdit to a Vue Application

  • 4 minutes to read

This topic describes how to add the client-side RichEdit control to a Vue application.

View Example: RichEdit Vue Application

Tip

You can import RichEdit types from modules or access them from a global namespace.

Code samples in this documentation use the global namespace approach. RichEdit types are accessed via the following prefix:

[window.]DevExpress.RichEdit. (for instance, DevExpress.RichEdit.DocumentFormat)

To use the modular approach, do the following.

  • Remove the DevExpress.RichEdit. prefix from type references.
  • Import the types from the RichEdit npm package, for instance:

    import { DocumentFormat } from 'devexpress-richedit';

    Note, the public RichEdit API is contained in the devexpress-richedit module. The sub-modules contain the private API.

#Prerequisites

  • In the command prompt, install the Vue CLI globally.

    console
    npm install -g @vue/cli
    

#Requirements

  • To use the RichEdit control in a Vue application, you need to have a Universal, DXperience, or ASP.NET subscription.
  • Versions of the devexpress npm packages should be identical (their major and minor versions should be the same).

#How to Create an Application with RichEdit

#Create a Vue Application

In the command prompt, create a Vue application and navigate to the created folder as follows.

console
vue create rich-edit-vue -d
cd rich-edit-vue

#Install RichEdit Package

The devexpress-richedit npm package references devextreme-dist as peerDependencies. The peerDependencies packages should be installed manually. This allows developers to control a version of the peerDependencies packages and guarantees that the package is installed once.

Install a RichEdit package with required peerDependencies:

  1. If the package.json file does not exist, create an npm configuration file as follows: npm init -y
  2. Install a RichEdit package with required peerDependencies:

    console
    npm i devextreme devextreme-dist devexpress-richedit --save
    

You can find all the libraries in the node_modules folder after the installation is completed.

#Add RichEdit Styles

Add styles to the src/main.js file.

...
import "../node_modules/devextreme-dist/css/dx.light.css";
import "../node_modules/devexpress-richedit/dist/dx.richedit.css";
...

#Configure RichEdit

Replace the content of the src/App.vue file with the following code.

<template>
  <div ref="richEdit"/>
</template>

<script>
import { create, createOptions, RichEdit, Interval, ViewType, RichEditUnit, DocumentFormat } from 'devexpress-richedit';

export default {
  name: 'App',
  rich: RichEdit,
  components: {
  },

  mounted(){
    // the createOptions() method creates an object that contains RichEdit options initialized with default values
    const options = createOptions();
    options.bookmarks.visibility = true;
    options.bookmarks.color = '#ff0000';
    options.confirmOnLosingChanges.enabled = true;
    options.confirmOnLosingChanges.message = 'Are you sure you want to perform the action? All unsaved document data will be lost.';
    options.fields.updateFieldsBeforePrint = true;
    options.fields.updateFieldsOnPaste = true;
    options.mailMerge.activeRecord = 2;
    options.mailMerge.viewMergedData = true;
    options.mailMerge.dataSource = [
        { Name: 'Indy', age: 32 },
        { Name: 'Andy', age: 28 },
    ];
    // events
    options.events.activeSubDocumentChanged = () => { };
    options.events.autoCorrect = () => { };
    options.events.calculateDocumentVariable = () => { };
    options.events.characterPropertiesChanged = () => { };
    options.events.contentInserted = () => { };
    options.events.contentRemoved = () => { };
    options.events.documentChanged = () => { };
    options.events.documentFormatted = () => { };
    options.events.documentLoaded = () => { };
    options.events.gotFocus = () => { };
    options.events.hyperlinkClick = () => { };
    options.events.keyDown = () => { };
    options.events.keyUp = () => { };
    options.events.paragraphPropertiesChanged = () => { };
    options.events.lostFocus = () => { };
    options.events.pointerDown = () => { };
    options.events.pointerUp = () => { };
    options.events.saving = () => { };
    options.events.saved = () => { };
    options.events.selectionChanged = () => { };    
    options.events.customCommandExecuted = (s, e) => {
        switch (e.commandName) {
        case 'insertEmailSignature':
            s.document.insertParagraph(s.document.length);
            s.document.insertText(s.document.length, '_________');
            s.document.insertParagraph(s.document.length);
            s.document.insertText(s.document.length, 'Best regards,');
            s.document.insertParagraph(s.document.length);
            s.document.insertText(s.document.length, 'John Smith');
            s.document.insertParagraph(s.document.length);
            s.document.insertText(s.document.length, 'john@example.com');
            s.document.insertParagraph(s.document.length);
            s.document.insertText(s.document.length, '+1 (818) 844-0000');
            break;
        }
    };
    options.unit = RichEditUnit.Inch;
    options.view.viewType = ViewType.PrintLayout;
    options.view.simpleViewSettings.paddings = {
      left: 15,
      top: 15,
      right: 15,
      bottom: 15,
    };
    options.autoCorrect = {
        correctTwoInitialCapitals: true,
        detectUrls: true,
        enableAutomaticNumbering: true,
        replaceTextAsYouType: true,
        caseSensitiveReplacement: false,
        replaceInfoCollection: [
            { replace: "wnwd", with: "well-nourished, well-developed" },
            { replace: "(c)", with: "©" }
        ],
    };
    // capitalize the first letter at the beginning of a new sentence/line
    options.events.autoCorrect = function (s, e) {
        if (e.text.length == 1 && /\w/.test(e.text)) {
            var prevText = s.document.getText(new Interval(e.interval.start - 2, 2));
            if (prevText.length == 0 || /^([.]|[?]|[!] )$/.test(prevText) || prevText.charCodeAt(1) == 13) {
                var newText = e.text.toUpperCase();
                if (newText != e.text) {
                    s.beginUpdate();
                    s.history.beginTransaction();
                    s.document.deleteText(e.interval);
                    s.document.insertText(e.interval.start, newText);
                    s.history.endTransaction();
                    s.endUpdate();
                    e.handled = true;
                }
            }
        }
    };  
    options.exportUrl = 'https://siteurl.com/api/';
    options.readOnly = false;
    options.width = '1400px';
    options.height = '800px';
    this.rich = create(this.$refs.richEdit, options);

    var documentAsBase64 = "e1xydGYxXGRlZmYwe1xmb250dGJse1xmMCBDYWxpYnJpO319e1xjb2xvcnRibCA7XHJlZDB"
        + "cZ3JlZW4wXGJsdWUyNTUgO1xyZWQyNTVcZ3JlZW4yNTVcYmx1ZTI1NSA7fXtcKlxkZWZjaHAgXGZzMjJ9e1xzdHl"
        + "sZXNoZWV0IHtccWxcZnMyMiBOb3JtYWw7fXtcKlxjczFcZnMyMiBEZWZhdWx0IFBhcmFncmFwaCBGb250O317XCp"
        + "cY3MyXGZzMjJcY2YxIEh5cGVybGluazt9e1wqXHRzM1x0c3Jvd2RcZnMyMlxxbFx0c3ZlcnRhbHRcdHNjZWxsY2J"
        + "wYXQyXHRzY2VsbHBjdDBcY2x0eGxydGIgTm9ybWFsIFRhYmxlO319e1wqXGxpc3RvdmVycmlkZXRhYmxlfXtcaW5"
        + "mb31cbm91aWNvbXBhdFxzcGx5dHduaW5lXGh0bWF1dHNwXGV4cHNocnRuXHNwbHRwZ3BhclxkZWZ0YWI3MjBcc2V"
        + "jdGRcbWFyZ2xzeG4xNDQwXG1hcmdyc3huMTQ0MFxtYXJndHN4bjE0NDBcbWFyZ2JzeG4xNDQwXGhlYWRlcnk3MjB"
        + "cZm9vdGVyeTcyMFxwZ3dzeG4xMjI0MFxwZ2hzeG4xNTg0MFxjb2xzMVxjb2xzeDcyMFxwYXJkXHBsYWluXHFse1x"
        + "mczIyXGNmMFxjczEgRG9jdW1lbnQgdGV4dH1cZnMyMlxjZjBccGFyfQ==";
    this.rich.openDocument(documentAsBase64, 'DocumentName', DocumentFormat.Rtf);
  },
  beforeDestroy() {
    if (this.rich) {
      this.rich.dispose();
      this.rich = null;
    }
  }
}
</script>