Search results

Insert text or image in table programmatically in React DocumentEditor component

18 May 2022 / 2 minutes to read

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.

Copied to clipboard
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. Insert text or image in table programmatically