Content Control in React Document Editor

22 Jul 20263 minutes to read

React Document Editor (Document Editor) provides support for inserting, editing content controls.

Content controls can be categorized based on their occurrence in a document as follows:

Inline Content Control: Among inline content within a paragraph as a child element.
Block Content Control: Among paragraphs and tables as a child of a Body or Header/Footer.

Types of Content Controls

  • Rich Text
  • Plain Text
  • Check Box
  • Date Picker
  • Drop-Down List and Combo Box
  • Picture

Insert Content Control

Content controls can be inserted using the insertContentControl method in the editor module.

  • TS
    • //Insert Rich Text Content Control
this.container.documentEditor.editor.insertContentControl('RichText');
//Insert Rich Text Content Control with default sfdt string
let sfdt = {"sections":[{"blocks":[{"inlines":[{"text": "Hello"}]}]}]};
this.container.documentEditor.editor.insertContentControl('RichText', sfdt);

//Insert Plain Text Content Control
this.container.documentEditor.editor.insertContentControl('Text');
//Insert Plain Text Content Control with default string
this.container.documentEditor.editor.insertContentControl('Text', 'Hello World');

//Insert CheckBox Content Control
this.container.documentEditor.editor.insertContentControl('CheckBox');
//Insert CheckBox Content Control with a checked state specified
this.container.documentEditor.editor.insertContentControl('CheckBox', true);

//Insert ComboBox Content Control
this.container.documentEditor.editor.insertContentControl('ComboBox');
//Insert ComboBox Content Control with items
this.container.documentEditor.editor.insertContentControl('ComboBox', 'One', ['One', 'Two', 'Three']);

//Insert Date Content Control
this.container.documentEditor.editor.insertContentControl('Date');
//Insert Date Content Control
this.container.documentEditor.editor.insertContentControl('Date', '01/01/2024');

//Insert DropDownList Content Control
this.container.documentEditor.editor.insertContentControl('DropDownList');
//Insert DropDownList Content Control with items
this.container.documentEditor.editor.insertContentControl('DropDownList', 'One', ['One', 'Two', 'Three']);

//Insert Picture Content Control
this.container.documentEditor.editor.insertContentControl('Picture');
//Insert Picture Content Control with default image
this.container.documentEditor.editor.insertContentControl('Picture', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADgSURBVEhLY3jx4sV/WuDBafCluXH/D6ydhlWObIMPLmn8/32KPBiD2OjyKAY7+zbDsX945/91azehiBWU9IPVgVwJMxSX4SgG65jXwrGVa+v/6TOXoojBDEZ2LQh/m676/+D+/XBzQJgsg0EY5GqQgSCDsYUz2QaDMCiosIUvCKMYDFKIjK9dvYrCB3kXJIaMkfUjY5JdDEpioCCAYZCFyGbAMFkGI0fcMDUYpAgZY4s8EEYWwxWBJLsYhJHFQIYjmwHDQ9xgkGEwDCp0QAYji8EMRhYjymBq4lGDofjFfwCV5AGEIf9DQQAAAABJRU5ErkJggg==');

    Import Content Control Properties

    Content control properties can be set using the ContentControlInfo and imported using the importContentControlData method.

  • TS
    • let data: ContentControlInfo[] = [];
let contentControlData: ContentControlInfo = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
data.push(contentControlData);
this.container.documentEditor.importContentControlData(data);

    Export Content Control Properties

    Content control properties can be exported using the exportContentControlData method.

  • TS
    • let contentControlInfos: ContentControlInfo[] = this.container.documentEditor.exportContentControlData();

    Reset Content Control

    Content control properties can be reset using the resetContentControlData method.

  • TS
    • let data: ContentControlInfo[] = [];
let contentControlData: ContentControlInfo = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
data.push(contentControlData);
this.container.documentEditor.resetContentControlData(data);

    NOTE

    Content controls with custom XML mapping of file type WordML are converted as normal Rich Text Content Control to provide lossless round-tripping upon saving.