# Embedding TXTextControl.Web in non-.NET Framework applications like .NET Core and AngularJS

> The HTML5-based Web.TextControl editor can run inside an IFrame to embed it in non-.NET Framework applications such as .NET Core or AngularJS sites. The hosting page sends structured JSON commands to the editor through window.postMessage for cross-origin document manipulation.

> **Note:** This article is outdated and may no longer be accurate.

- **Author:** Bjoern Meyer
- **Published:** 2017-10-23
- **Modified:** 2026-03-05
- **Description:** The HTML5-based Web.TextControl editor can run inside an IFrame to embed it in non-.NET Framework applications such as .NET Core or AngularJS sites. The hosting page sends structured JSON commands to the editor through window.postMessage for cross-origin document manipulation.
- **3 min read** (432 words)
- **Tags:**
  - Angular
  - HTML5
  - .NET Core
  - Reporting
- **Web URL:** https://www.textcontrol.com/blog/2017/10/23/embedding-txtextcontrol/
- **LLMs URL:** https://www.textcontrol.com/blog/2017/10/23/embedding-txtextcontrol/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2017/10/23/embedding-txtextcontrol/llms-full.txt
- **GitHub Repository:** https://github.com/TextControl/TextControl.Web.MVC.IFrame

---

[TX Text Control .NET Server](https://www.textcontrol.com/product/tx-text-control-dotnet-server/) comes with a true WYSIWYG HTML5-based editor for ASP.NET MVC and Web Forms. But it can be embedded into other application types as well.

*IFrame* elements are designed to allow you to embed other web documents into your document. This is widely used to embed third party content into your website such as social media widgets. Using an *IFrame*, the ASP.NET-based editor can be easily embedded into any non-.NET based web applications such as .NET Core or AngularJS based web sites.

The following diagram shows this structure:

![SendMessage Diagram](https://s1-www.textcontrol.com/assets/dist/blog/2017/10/23/a/assets/sendmessage-diagram.webp "SendMessage Diagram")

The sample demo consists of a hosting .NET Core web application and an ASP.NET MVC application that hosts the TX Text Control editor. The simple .NET Core website hosts an *IFrame* element that points to the ASP.NET MVC application:

```
@{
    ViewData["Title"] = "Home Page";
}

<div class="row">
    <div class="col-md-8 editor">
        
        <iframe id="TXTextControl" src="http://localhost:2957/"></iframe>
        
        <input type="button" value="Load Selection" onclick="SendMessage()" />

    </div>
</div>

<script>
    function SendMessage() {
        var receiver = document.getElementById('TXTextControl').contentWindow;
        var message = `{"txtextcontrol": {"method": "loadDocument",
            "parameter": "This is some <b>HTML</b> text."
            }}`;

        receiver.postMessage(message, 'http://localhost:2957/');
    }
</script>
```

When the button is clicked, JavaScript is used to send a message to the source of the *IFrame*. The *window.postMessage()* method safely enables cross-origin communication. This method, when called, causes a MessageEvent to be dispatched at the target window.

The receiving JavaScript catches this message in order to process it:

```
@using TXTextControl.Web
@using TXTextControl.Web.MVC

@Html.TXTextControl().TextControl(settings =>
{
    settings.Dock = DockStyle.Window;
}).Render()

<script>
    window.onload = function () {

        function receiveMessage(e) {
          
            if (e.origin !== "http://localhost:3053")
                return;

            var message = JSON.parse(e.data);

            if (message.txtextcontrol == null)
                return;

            switch (message.txtextcontrol.method) {
                case "loadDocument": {
                    var encoded = btoa(message.txtextcontrol.parameter); 
                    TXTextControl.loadSelection(TXTextControl.StreamType.HTMLFormat, encoded);
                }
             }
        }

        window.addEventListener('message', receiveMessage);
    }
</script>
```

In this demo, an HTML string should be loaded into the TX Text Control editor. As it is only possible to send a message to the receiving *IFrame*, a protocol is required to structure the request. We use the following structure:

```
{
   "txtextcontrol":{
      "method":"loadDocument",
      "parameter":"This is some <b>HTML</b> text."
   }
}
```

| Element | Description |
|---|---|
| txtextcontrol | Make sure that this message is for TX Text Control |
| method | The name of the method |
| parameter | The parameter to be used for the method |

In the receiving JavaScript, a switch statement is used to process various methods. In this demo, only one method is processed which is supposed to load a formatted HTML string using the TX Text Control Javascript: TXTextControl.loadSelection method.

You can test this on your own by cloning the sample GitHub project.

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Integrate Documents in any Platform: Visit us at BASTA! 2018](https://www.textcontrol.com/blog/2018/09/06/first-impressions-of-that-conference-2018/llms.txt)
- [Technology Preview: Embeddable HTML Widget to integrate Document Editing to Angular, React and other Frameworks](https://www.textcontrol.com/blog/2018/03/01/embeddable-html-widget-for-all-frameworks/llms.txt)
- [Getting Started: Angular Document Editor Attributes Explained](https://www.textcontrol.com/blog/2023/02/01/getting-started-angular-document-editor-attributes-explained/llms.txt)
- [Getting Started: Programming the Angular Document Editor using JavaScript](https://www.textcontrol.com/blog/2023/01/30/getting-started-programming-the-angular-document-editor-using-javascript/llms.txt)
- [Getting Started: Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2023/01/30/loading-and-saving-documents-using-angular/llms.txt)
- [Angular: Deploying the Backend TCP Service Separately](https://www.textcontrol.com/blog/2020/10/09/angular-deploying-the-backend-tcp-service-separately/llms.txt)
- [Angular DocumentViewer: Loading Documents from an ASP.NET Core Backend Web API](https://www.textcontrol.com/blog/2020/06/08/angular-documentviewer-loading-documents-from-backend/llms.txt)
- [Building an Angular Application with an ASP.NET Core Back-End](https://www.textcontrol.com/blog/2020/05/06/building-an-angular-application-with-an-aspnet-core-backend/llms.txt)
- [TX Text Control for Angular X18 Published](https://www.textcontrol.com/blog/2020/03/18/tx-text-control-for-angular-x18-published/llms.txt)
- [Impressions from NDC London 2020](https://www.textcontrol.com/blog/2020/02/01/impressions-from-ndc-london-2020/llms.txt)
- [Creating Your First ASP.NET Reporting Application](https://www.textcontrol.com/blog/2020/01/01/creating-your-first-aspnet-reporting-application/llms.txt)
- [Impressions from DDC in Cologne](https://www.textcontrol.com/blog/2019/12/02/impressions-from-ddc-in-cologne/llms.txt)
- [Deploying the Angular Document Editor](https://www.textcontrol.com/blog/2019/11/11/deploying-the-angular-document-editor/llms.txt)
- [Meet Text Control at DEVintersection 2019 in Las Vegas](https://www.textcontrol.com/blog/2019/11/01/meet-text-control-at-devintersection-2019-in-las-vegas/llms.txt)
- [Meet Text Control at TechBash 2019](https://www.textcontrol.com/blog/2019/10/21/meet-text-control-at-techbash-2019/llms.txt)
- [Impressions from Web Developer Conference (WDC) in Hamburg](https://www.textcontrol.com/blog/2019/10/16/impressions-from-web-developer-conference/llms.txt)
- [Loading and Saving Documents using Angular](https://www.textcontrol.com/blog/2019/10/10/loading-and-saving-documents-using-angular/llms.txt)
- [See Text Control at Web Developer Conference (WDC)](https://www.textcontrol.com/blog/2019/10/07/see-text-control-at-web-developer-conference-wdc/llms.txt)
- [Automatically Reconnect to the Server and Recover the Document](https://www.textcontrol.com/blog/2019/09/05/automatically-reconnect-to-the-server-and-recover-the-document/llms.txt)
- [Test the Text Control Widget in JSFiddle](https://www.textcontrol.com/blog/2019/09/04/test-the-text-control-widget-in-jsfiddle/llms.txt)
- [Text Control Roadmap 2019: High DPI Support, Forms, Node.js and Angular](https://www.textcontrol.com/blog/2019/03/12/text-control-roadmap-2019/llms.txt)
- [Edit Templates in an ASP.NET Core MVC Application (.NET Core)](https://www.textcontrol.com/blog/2018/07/18/edit-templates-in-a-net-core-mvc-application/llms.txt)
- [JavaScript API: Working with Merge Fields](https://www.textcontrol.com/blog/2018/03/05/javascript-api-working-with-merge-fields/llms.txt)
- [Tutorial: Merging your First Template using the ReportingCloud .NET Core Wrapper in Visual Studio Code](https://www.textcontrol.com/blog/2017/10/21/merging-your-first-template-using-the-reportingcloud/llms.txt)
- [Sneak Peek X15: Custom Field Overlays in HTML5-based Text Control](https://www.textcontrol.com/blog/2017/06/21/sneak-peek-x15-custom-field-overlays-in-html5-based-text-control/llms.txt)