How to Insert Content at Cursor in ASP.NET Core DOCX Editor

14 Aug 20265 minutes to read

You can insert text, a paragraph, and rich-text content in the ASP.NET Core DOCX Editor (Document Editor) component.

Insert text at the current cursor position

You can use the insertText API in the editor module to insert the text at the current cursor position.

The following example code illustrates how to add the text in the current selection.

// It will insert the provided text in the current selection
this.container.documentEditor.editor.insertText('Syncfusion');
<button id='insert'>Insert Text</button>
<div class="control-section">
    <ejs-documenteditorcontainer id="container" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
    }
    document.getElementById('insert').addEventListener('click', () => {
        // It will insert the provided text in current selection
        container.documentEditor.editor.insertText('Syncfusion');
    });
</script>

Insert a paragraph at the current cursor position

To insert a new paragraph at the current selection, you can use the [insertText] API with the parameter as \r\n or \n.

The following example code illustrates how to add a new paragraph in the current selection.

// It will add a new paragraph in the current selection
this.container.documentEditor.editor.insertText('\n');

Insert the rich-text content

To insert HTML content, you have to convert the HTML content to SFDT format using the web service. Then use the [paste] API to insert the SFDT at the current cursor position.

The HTML string should be well-formatted HTML. DocIO supports only well-formatted XHTML.

The following example illustrates how to insert the HTML content at the current cursor position.

  • Send the HTML content to the server side for SFDT conversion. Refer to the following example to send the HTML content to the server side and insert it at the current cursor position.
<div class="control-section">
    <button id='export'>Export</button>
    <ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
</div>

<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
    }
    let htmltags =
  "<?xml version='1.0' encoding='utf - 8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'><html xmlns ='http://www.w3.org/1999/xhtml' xml:lang='en' lang ='en'><body><h1>The img element</h1><img src='https://www.w3schools.com/images/lamp.jpg' alt ='Lamp Image' width='500' height='600'/></body></html>";
    document.getElementById('export').addEventListener('click', () => {
        let http = new XMLHttpRequest();
        http.open('POST', '/api/documenteditor/LoadString');
        http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
        http.responseType = 'json';
        http.onreadystatechange = function () {
          if (http.readyState === 4) {
            if (http.status === 200 || http.status === 304) {
              // Insert the sfdt content in cursor position using paste API
              container.documentEditor.editor.paste(http.response);
            } else {
              alert('failed;');
            }
          }
        };

        let htmlContent = { content: htmltags };
        http.send(JSON.stringify(htmlContent));
    });
</script>
  • Refer to the following code example for the server-side web implementation for HTML conversion using the DocumentEditor.
//API controller for the conversion.
[HttpPost]
public string LoadString([FromBody]InputParameter data)
{
    // You can also load an HTML file/string from the server side.
    Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.LoadString(data.content, FormatType.Html); // Convert the HTML to SFDT format.
    string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
    document.Dispose();
    return json;
}

public class InputParameter
{
    public string content {get; set; }
}

The above example illustrates inserting HTML content. Similarly, you can insert any rich-text content by converting any of the supported file formats (DOCX, DOC, WordML, HTML, RTF) to SFDT.