List Format in Vue DOCX Editor

28 Aug 20267 minutes to read

Vue DOCX Editor (Document Editor) supports both single-level and multilevel lists. Lists are used to organize data as step-by-step instructions in documents for easy understanding of key points. You can apply a list to paragraphs using the supported APIs.

Create bullet list

Bullets are usually used for unordered lists. To apply a bulleted list to selected paragraphs, use the following method of the Editor instance.

applyBullet(bullet, fontFamily);

Parameter	Type	Description
Bullet	string	Bullet character.
fontFamily	string	Bullet font family.

Refer to the following sample code.

this.$refs.documenteditor.ej2Instances.editor.applyBullet('\uf0b7', 'Symbol');

Create numbered list

Numbered lists are usually used for ordered lists. To apply a numbered list to selected paragraphs, use the following method of the Editor instance.

applyNumbering(numberFormat,listLevelPattern)

Parameter	Type	Description
numberFormat	string	The “%n” representations in the numberFormat parameter will be replaced by the respective list level’s value. “%1)” will be displayed as “1)”.
listLevelPattern(optional)	string	Default value is ‘Arabic’.

Refer to the following example.

this.$refs.documenteditor.ej2Instances.editor.applyNumbering('%1)', 'UpRoman');

Clear list

You can also clear the list formatting applied to selected paragraphs. Refer to the following sample code.

this.$refs.documenteditor.ej2Instances.editor.clearList();

Working with lists

The following sample demonstrates how to create bulleted and numbered lists in DOCX Editor.

Composition API (~/src/App.vue)

<template>
  <div style="width:100%;height:330px">
    <div>
      <ejs-toolbar v-bind:clicked='toolbarButtonClick'>
        <e-items>
          <e-item prefixIcon="e-de-ctnr-bullets e-icons" tooltipText="Bullets" id="Bullets"></e-item>
          <e-item prefixIcon="e-de-ctnr-numbering e-icons" tooltipText="Numbering" id="Numbering"></e-item>
          <e-item text="Clear" id="clearlist" tooltipText="Clear List"></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
    <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
      :enableEditorHistory='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
  </div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, SfdtExport, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';
import { ToolbarComponent as EjsToolbar } from "@syncfusion/ej2-vue-navigations";
import { provide } from 'vue';

provide('DocumentEditor', [SfdtExport, EditorHistory, Selection, Editor])

const toolbarButtonClick = function (args) {
  switch (args.item.id) {
    case 'Bullets':
      //To create bullet list
      this.$refs.documenteditor.ej2Instances.editor.applyBullet('\uf0b7', 'Symbol');
      break;
    case 'Numbering':
      //To create numbering list
      this.$refs.documenteditor.ej2Instances.editor.applyNumbering('%1)', 'UpRoman');
      break;
    case 'clearlist':
      //To clear list
      this.$refs.documenteditor.ej2Instances.editor.clearList();
      break;
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>

Options API (~/src/App.vue)

<template>
  <div style="width:100%;height:330px">
    <div>
      <ejs-toolbar v-bind:clicked='toolbarButtonClick'>
        <e-items>
          <e-item prefixIcon="e-de-ctnr-bullets e-icons" tooltipText="Bullets" id="Bullets"></e-item>
          <e-item prefixIcon="e-de-ctnr-numbering e-icons" tooltipText="Numbering" id="Numbering"></e-item>
          <e-item text="Clear" id="clearlist" tooltipText="Clear List"></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
    <ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
      :enableEditorHistory='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
  </div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, SfdtExport, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';
import { ToolbarComponent } from "@syncfusion/ej2-vue-navigations";

export default {
  components: {
    'ejs-documenteditor': DocumentEditorComponent,
    'ejs-toolbar': ToolbarComponent
  },
  data: function () {
    return {
    };
  },
  provide: {
    DocumentEditor: [SfdtExport, EditorHistory, Selection, Editor]
  },
  methods: {
    toolbarButtonClick: function (args) {
      switch (args.item.id) {
        case 'Bullets':
          //To create bullet list
          this.$refs.documenteditor.ej2Instances.editor.applyBullet('\uf0b7', 'Symbol');
          break;
        case 'Numbering':
          //To create numbering list
          this.$refs.documenteditor.ej2Instances.editor.applyNumbering('%1)', 'UpRoman');
          break;
        case 'clearlist':
          //To clear list
          this.$refs.documenteditor.ej2Instances.editor.clearList();
          break;
      }
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>

Editing numbered list

DOCX Editor restarts the numbering or continues numbering for a numbered list. These options are found in the built-in context menu if the list value is selected. Refer to the following screenshot.

Online Demo

Explore how to apply bullets and numbering in Word documents using the Vue DOCX Editor in this live demo.

See Also

• List dialog