Skip to content

DOCINFRA-2341_merged_using_automation #451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 16, 2024
Merged

DOCINFRA-2341_merged_using_automation #451

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 74 additions & 2 deletions ej2-react/document-editor/content-control.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Content control in React Document editor control

Document Editor provides content control preservation support (i.e.) Content control present in the input document is preserved upon saving.
Document Editor provides support for inserting, editing content controls.

Content controls can be categorized based on its occurrence in a document as follows,

Expand All @@ -26,4 +26,76 @@ BlockContentControl: Among paragraphs and tables, as a child of a Body, HeaderFo
* Drop-Down List and Combo Box
* Picture

>Note: Content control with custom XML mapping of file type WordML is converted as normal Rich Text Content Control to provide lossless round-tripping upon saving.
## Insert content control

Content control can be inserted using [`insertContentControl`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor/#insertcontentcontrol) method in editor module.

{% highlight 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 mention checked state
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==');
{% endhighlight %}

## Import content control properties

Content control properties can be set using the [`ContentControlInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor/contentControlInfo/) and import it using [`importContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor/#importcontentcontroldata)

{% highlight 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);
{% endhighlight %}

## Export content control properties

Content control properties can be exported using the [`exportContentControlData`](https://ej2.syncfusion.com/react/documentation/api/document-editor/#exportcontentcontroldata)

{% highlight ts %}
let contentControlInfos: ContentControlInfo[] = this.container.documentEditor.exportContentControlData();
{% endhighlight %}

## Reset content control

Content control properties can be reset using the [`resetcontentcontroldata`](https://ej2.syncfusion.com/react/documentation/api/document-editor/#resetcontentcontroldata)

{% highlight 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);
{% endhighlight %}

>Note: Content control with custom XML mapping of file type WordML is converted as normal Rich Text Content Control to provide lossless round-tripping upon saving.