Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

In this tutorial, we will show you how to create an ASP.NET Core Web App that uses the TX Text Control Document Editor in Visual Studio Code.

Prerequisites

There are two ways to evaluate the TX Text Control Document Editor. You can either host your own backend by downloading the trial version of TX Text Control .NET Server for ASP.NET, or by creating a trial access token to use a hosted backend, valid for 30 days:

Before you start, you need to have the following prerequisites:

Helpful Extensions

Visual Studio Code has a rich ecosystem of extensions that can be installed to add additional features to the editor. The following extensions are helpful when working with ASP.NET C#:

Creating the Application

  1. Open Visual Studio Code and open a folder where you want to create the application. Open the terminal and execute the following command:

    dotnet new mvc -o tx-text-control-document-editor

    This command creates a new ASP.NET Core Web App (MVC) project in a new folder called tx-text-control-document-editor.

    TX Text Control in VS Code

Adding the NuGet Package

  1. In the same terminal window find the tab NUGET and open it. Search for TXTextControl.Web and install the package.

    TX Text Control in VS Code

Configure the Application

Trial Access Token Users

In case you are using a Trial Access Token, skip this complete step.

  1. Open the Program.cs file located in the project's root folder.

    At the very top of the file, insert the following code:

    using TXTextControl.Web;
    view raw test.cs hosted with ❤ by GitHub

    Add the following code after the entry app.UseStaticFiles();:

    // enable Web Sockets
    app.UseWebSockets();
    // attach the Text Control WebSocketHandler middleware
    app.UseTXWebSocketMiddleware();
    view raw test.cs hosted with ❤ by GitHub

Adding the Document Editor

  1. Find the Index.cshtml file in the Views -> Home folder. Replace the complete content with the following code to add the document editor to the view:

    @using TXTextControl.Web.MVC
    @{
    var sDocument = "<html><body><p>Welcome to <strong>Text Control</strong></p></body></html>";
    }
    @Html.TXTextControl().TextControl(settings => {
    settings.UserNames = new string[] { "Tim Typer" };
    }).LoadText(sDocument, TXTextControl.Web.StringStreamType.HTMLFormat).Render()
    <input type="button" onclick="insertTable()" value="Insert Table" />
    <script>
    function insertTable() {
    TXTextControl.tables.add(5, 5, 10, function(e) {
    if (e === true) { // if added
    TXTextControl.tables.getItem(function(table) {
    table.cells.forEach(function(cell) {
    cell.setText("Cell text");
    });
    }, null, 10);
    }
    })
    }
    </script>
    @bjoerntx
    Comment
    view raw test.cshtml hosted with ❤ by GitHub

    Trial Access Token Users

    In case you are using a Trial Access Token, replace the content with the following code.

    @using TXTextControl.Web.MVC
    @Html.TXTextControl().TextControl(settings => {
    settings.WebSocketURL = "wss://backend.textcontrol.com/api/TXWebSocket?access-token=addYourTokenHere"
    }).Render()
    view raw test.cshtml hosted with ❤ by GitHub

    Replace addYourTokenHere with your actual Trial Access Token.

Run the Application

  1. Open the terminal, navigate to the project's root folder and execute the following command:

    dotnet run

    TX Text Control in VS Code

  2. Open a browser and navigate to the URL that is displayed in the terminal.

    TX Text Control in VS Code

Conclusion

That's it. You have successfully created an ASP.NET Core Web App that uses the TX Text Control Document Editor in Visual Studio Code. You can now use the editor to create, edit, and save documents in your application.