Toolbar not working

[Marcos]

I was following the instructions on the tutorial in Vue3 and i cannot make the toolbar working.

Could you help me?

This is my code:

<template>

<ejs-documenteditorcontainer

ref="doceditcontainer"

:service-url="serviceUrl"

:enable-toolbar="true"

height="600px">

</ejs-documenteditorcontainer>

</template>

<script lang="ts">

import { defineComponent } from 'vue';

import {

DocumentEditorContainerComponent,

Toolbar,

} from '@syncfusion/ej2-vue-documenteditor';

import '@syncfusion/ej2-base/styles/material.css';

import '@syncfusion/ej2-buttons/styles/material.css';

import '@syncfusion/ej2-inputs/styles/material.css';

import '@syncfusion/ej2-popups/styles/material.css';

import '@syncfusion/ej2-lists/styles/material.css';

import '@syncfusion/ej2-navigations/styles/material.css';

import '@syncfusion/ej2-splitbuttons/styles/material.css';

import '@syncfusion/ej2-dropdowns/styles/material.css';

import '@syncfusion/ej2-vue-documenteditor/styles/material.css';

export default defineComponent({

name: 'Editor',

components: {

'ejs-documenteditorcontainer': DocumentEditorContainerComponent,

},

provide: {

DocumentEditorContainer: [Toolbar],

},

data() {

return {

serviceUrl:

'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',

};

},

});

</script>

And the HTML result in the toolbar is:

[Suriya Murugan]

Hi Marcos, 

 

Syncfusion Greetings! 

 

From checking the provided code snippet, you have added hyphen when enabling toolbar and service URL. Please change it like below: 

 

<template>

<ejs-documenteditorcontainer

ref="doceditcontainer"

:serviceUrl="serviceUrl" 

:enableToolbar="true" 

height="600px">

</ejs-documenteditorcontainer>

</template>

 

Can you please check the below KB and sample for reference?  

 

https://www.syncfusion.com/kb/12917/how-to-view-and-edit-word-documents-in-vue3-app-using-syncfusion-word-processor
 

https://ej2.syncfusion.com/vue/documentation/document-editor/getting-started-vue-3/#adding-documenteditorcontainer-component-in-the-application
 

 

https://github.com/SyncfusionExamples/View-and-edit-Word-document-in-Vue/tree/main/Vue3
 

 

Please let us know if you need any further assistance. 

 

Regards, 

Suriya M.