890821: Updated the content control documentation contents

Author: SalmanBaris25

ej2-asp-core-mvc/document-editor/content-control.md

@@ -11,7 +11,7 @@ documentation: ug
 
 # Content Control in DocumentEditor
 
-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,
 
@@ -26,4 +26,76 @@ InlineContentControl: Among inline content inside, as a child of a paragraph. Bl
 * Drop-Down List and Combo Box
 * Picture
 
+## Insert content control
+
+Content control can be inserted using `insertContentControl` method in editor module.
+
+{% highlight ts %}
+//Insert Rich Text Content Control
+documentEditor.editor.insertContentControl('RichText');
+//Insert Rich Text Content Control with default sfdt string
+var sfdt = {"sections":[{"blocks":[{"inlines":[{"text": "Hello"}]}]}]};
+documentEditor.editor.insertContentControl('RichText', sfdt);
+
+//Insert Plain Text Content Control
+documentEditor.editor.insertContentControl('Text');
+//Insert Plain Text Content Control with default string
+documentEditor.editor.insertContentControl('Text', 'Hello World');
+
+//Insert CheckBox Content Control
+documentEditor.editor.insertContentControl('CheckBox');
+//Insert CheckBox Content Control with mention checked state
+documentEditor.editor.insertContentControl('CheckBox', true);
+
+//Insert ComboBox Content Control
+documentEditor.editor.insertContentControl('ComboBox');
+//Insert ComboBox Content Control with items
+documentEditor.editor.insertContentControl('ComboBox', 'One', ['One', 'Two', 'Three']);
+
+//Insert Date Content Control
+documentEditor.editor.insertContentControl('Date');
+//Insert Date Content Control
+documentEditor.editor.insertContentControl('Date', '01/01/2024');
+
+//Insert DropDownList Content Control
+documentEditor.editor.insertContentControl('DropDownList');
+//Insert DropDownList Content Control with items
+documentEditor.editor.insertContentControl('DropDownList', 'One', ['One', 'Two', 'Three']);
+
+//Insert Picture Content Control
+documentEditor.editor.insertContentControl('Picture');
+//Insert Picture Content Control with default image
+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` and import it using `importContentControlData`
+
+{% highlight ts %}
+var data = [];
+var contentControlData = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
+data.push(contentControlData);
+documentEditor.importContentControlData(data);
+{% endhighlight %}
+
+## Export content control properties
+
+Content control properties can be exported using the `exportContentControlData`
+
+{% highlight ts %}
+var contentControlInfos = documentEditor.exportContentControlData();
+{% endhighlight %}
+
+## Reset content control
+
+Content control properties can be reset using the `resetcontentcontroldata`
+
+{% highlight ts %}
+var data = [];
+var contentControlData = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
+data.push(contentControlData);
+documentEditor.resetContentControlData(data);
+{% endhighlight %}
+
 N> 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.