ReportingCloud Editor Widget Released to Beta
We released an editor widget to beta that can be embedded into any HTML page just by adding a JavaScript tag.
The ReportingCloud Portal enables you to create MS Word compatible templates that can be merged with JSON data using the ReportingCloud API in order to create documents in formats like Adobe PDF.
A highly requested feature is the usage of this editor to be used outside the portal, but directly in your application. Technically, this was possible using the MVC or WebForms components part of our ASP.NET product TX Text Control .NET Server.
Now, we released a widget to beta that can be embedded into any HTML page just by adding a JavaScript tag. All you need is a ReportingCloud account (trial or paid license). This article explains the required steps to embed a fully-featured editor widget to your plain HTML page:
-
If you don't have a ReportingCloud account, create your free trial account here:
-
Login to the portal and open the Widgets section:
https://portal.reporting.cloud/widget/manage/
-
In the New widget location box, type in the hostname of your website including a subdomain (in case a subdomain is used). If you are testing locally, use localhost as the hostname and confirm with Create Key.
-
The location should be listed now in the list of widget locations:
-
Click the button Create Tag right next to the widget location. In the Embed the widget area, a custom JavaScript tag is created with your generated key:
-
Copy this JavaScript tag and place it in the HEAD element of your HTML page. To instantiate a widget, you will need to create a container DIV element in order to create a new instance of TXTextControlWeb with this container element in the constructor.
A complete sample HTML page with an embedded widget would look like this:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ReportingCloud Widget Test Page</title> <script src="http://portal.reporting.cloud/Widget/Script/w1ZPWu671K3zWSOztC..."></script> </head> <body> <style> #myWidgetContainer { width: 1000px; height: 600px; } </style> <div id="myWidgetContainer"></div> <script> var textControl1; window.onload = function() { textControl1 = new TXTextControlWeb("myWidgetContainer"); }; </script> </body> </html>
If you open this HTML page now in a browser, the widget is loaded and rendered:
In the next couple of blog posts, we will show how to combine this concept with the ReportingCloud API. Consider the following scenario: A template is loaded from your ReportingCloud template storage using the REST API, loaded into the widget and saved back to the template storage. All within your application, on your preferred platform whether it is PHP, .NET Core, Java or Angular.
Stay tuned!
Related Posts
Edit Templates in an ASP.NET Core MVC Application (.NET Core)
We published a sample project to GitHub that shows how to create a .NET Core MVC application to edit templates using the ReportingCloud editor widget.
Technology Preview: Embeddable HTML Widget to integrate Document Editing to…
This technology preview shows an early version of an HTML widget that can be embedded into any HTML page.
Getting Started: Angular Document Editor Attributes Explained
This article explains the possible attributes that can be used when initializing the TX Text Control Document Editor for Angular.
Getting Started: Programming the Angular Document Editor using JavaScript
This tutorial shows how to use the JavaScript API to program the TX Text Control Angular Document Editor.
Getting Started: Loading and Saving Documents using Angular
This tutorial shows how to load and save documents using the JavaScript API in Angular applications.