Using Document editor API’s, you can insert text
or image
in table
programmatically based on your requirement.
Use selection
API’s to navigate between rows and cells.
The following example illustrates how to create 2*2 table and then add text and image programmatically.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
DocumentEditorContainerComponent,
Toolbar,
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
export class Default extends React.Component {
onCreated() {
// To insert the table in cursor position
this.container.documentEditor.editor.insertTable(2, 2);
// To insert the image at table first cell
this.container.documentEditor.editor.insertImage(
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
);
// To move the cursor to next cell
this.moveCursorToNextCell();
// To insert the image at table second cell
this.container.documentEditor.editor.insertImage(
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
);
// To move the cursor to next row
this.moveCursorToNextRow();
// To insert text in cursor position
this.container.documentEditor.editor.insertText('Text');
// To move the cursor to next cell
this.moveCursorToNextCell();
// To insert text in cursor position
this.container.documentEditor.editor.insertText('Text');
}
moveCursorToNextCell() {
// To get current selection start offset
var startOffset = this.container.documentEditor.selection.startOffset;
// Increasing cell index to consider next cell
var cellIndex = parseInt(startOffset.substring(6, 7)) + 1;
// Changing start offset
startOffset =
startOffset.substring(0, 6) +
cellIndex.toString() +
startOffset.substring(7, startOffset.length);
// Navigating selection using select method
this.container.documentEditor.selection.select(startOffset, startOffset);
}
moveCursorToNextRow() {
// To get current selection start offset
var startOffset = this.container.documentEditor.selection.startOffset;
// Increasing row index to consider next row
var rowIndex = parseInt(startOffset.substring(4, 5)) + 1;
var cellIndex =
parseInt(startOffset.substring(6, 7)) != 0
? parseInt(startOffset.substring(6, 7)) - 1
: 0;
// Changing start offset
startOffset =
startOffset.substring(0, 4) +
rowIndex.toString() +
startOffset.substring(5, 6) +
cellIndex +
startOffset.substring(7, startOffset.length);
// Navigating selection using select method
this.container.documentEditor.selection.select(startOffset, startOffset);
}
render() {
return (
<DocumentEditorContainerComponent
id="container"
ref={(scope) => {
this.container = scope;
}}
height={'590px'}
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
enableToolbar={true}
created={this.onCreated.bind(this)}
/>
);
}
}
ReactDOM.render(<Default />, document.getElementById('sample'));
The output will be like below.