Disable optimized text measuring in Vue Document editor component
11 Jun 20246 minutes to read
Starting from v19.3.0.x, the accuracy of text size measurements in Document editor is improved such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API enableOptimizedTextMeasuring
in Document editor settings.
If you want the Document editor component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions. Then you can disable this optimized text measuring improvement, by setting false
to enableOptimizedTextMeasuring
property of Vue Document Editor component.
Disable optimized text measuring in DocumentEditorContainer
instance
The following example code illustrates how to disable optimized text measuring improvement in DocumentEditorContainer
instance.
<template>
<div id="app">
<ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' height="590px" id='container'
:enableToolbar='true' :documentEditorSettings='settings'></ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide } from 'vue';
const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
const settings = { enableOptimizedTextMeasuring: false };
//Inject require modules.
provide('DocumentEditorContainer', [Toolbar])
</script>
<template>
<div id="app">
<ejs-documenteditorcontainer ref='documenteditor' :serviceUrl='serviceUrl' height="590px" id='container'
:enableToolbar='true' :documentEditorSettings='settings'></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',
settings: { enableOptimizedTextMeasuring: false }
};
},
provide: {
//Inject require modules.
DocumentEditorContainer: [Toolbar]
}
}
</script>
Disable optimized text measuring in DocumentEditor
instance
The following example code illustrates how to disable optimized text measuring improvement in DocumentEditor
instance.
<template>
<div id="app">
<ejs-documenteditor :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true'
:enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true'
:enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true'
:enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true'
:enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true'
:enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true'
:enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'
height="370px" :documentEditorSettings='settings'> </ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
import { provide } from 'vue';
const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
const settings = { enableOptimizedTextMeasuring: false };
//Inject require modules.
provide('DocumentEditor', [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]);
</script>
<template>
<div id="app">
<ejs-documenteditor :serviceUrl='serviceUrl' :isReadOnly='false' :enablePrint='true' :enableSfdtExport='true'
:enableSelection='true' :enableContextMenu='true' :enableSearch='true' :enableOptionsPane='true'
:enableWordExport='true' :enableTextExport='true' :enableEditor='true' :enableImageResizer='true'
:enableEditorHistory='true' :enableHyperlinkDialog='true' :enableTableDialog='true' :enableBookmarkDialog='true'
:enableTableOfContentsDialog='true' :enablePageSetupDialog='true' :enableStyleDialog='true'
:enableListDialog='true' :enableParagraphDialog='true' :enableFontDialog='true'
:enableTablePropertiesDialog='true' :enableBordersAndShadingDialog='true' :enableTableOptionsDialog='true'
height="370px" :documentEditorSettings='settings'> </ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data() {
return {
serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',
settings: { enableOptimizedTextMeasuring: false }
};
},
provide: {
//Inject require modules.
DocumentEditor: [Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog]
}
}
</script>