Reuse Angular Document Editor Instances in Bootstrap Tabs
source link: https://www.textcontrol.com/blog/2023/05/22/reuse-angular-document-editor-instances-in-bootstrap-tabs/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Reuse Angular Document Editor Instances in Bootstrap Tabs
The TX Text Control document editor available Angular, is initialized as a singleton instance on an HTML page. Similar to routes in Angular, the editor typically needs to be removed from the DOM and recreated at the new location. However, some layouts require a fast initialization process and fluid switching between instances, such as tab views:
Bootstrap Tab Pages
For these cases, the fully created editor can be moved within the DOM to a new active tab. Consider the following bootstrap layout:
The editor is encapsulated in an additional DIV element with the id tx-editor. When the active tab is switched, this complete element is moved to the new active tab. Additionally, the content of the current instance is saved to local storage and restored when switching back. The following JavaScript (jQuery) code attaches two events to the tab list view:
- hide.bs.tab: Occurs when the previous tab is about to be hidden.
- show.bs.tab: Occurs when the newly active tab is about to be shown.
Saving the Document
For the previous tab, the document is saved using the saveDocument method and stored in a local storage variable with the associated tab name (aria-controls).
Loading the Document
For the current tab, the local storage is checked for a previously saved document. If a document is found, it is loaded into the document editor using the loadDocument method. Then the editor element is moved to the new tab position in the DOM using the appendTo method:
If no document is saved for the currently active tab, the contents are reset and the item is moved:
Recommend
-
31
RouteReuseStrategy（路由复用策略）是 Angular 框架提供的一种路由复用机制。它可以在用户切换页面的时候，暂存路由的状态，在返回路由的时候，恢复这些快照。 使用场景 我们在做一个后台管理系统，它使用的是 Tab 页 +...
-
49
Add / Remove Tabs Dynamically in Bootstrap - Create a tab created created advertisements Here is the snippet to dynamically add / remove bootstrap...
-
0
Bootstrap 3 nesting tabs advertisements I'm creating an application and there's a lot of content so I am putting them in nested...
-
7
Reusing TXTextControl Instances in Bootstrap Tabs The TX Text Control document editor available for ASP.NET MVC and Angular is initialized as a singleton instance on an HTML page. Similar to
-
5
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, o...
-
10
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, o...
-
11
In a previous tutorial, you learned how to create your first Angular application using the TX Text Control Document Editor....
-
4
The npm package for using the document editor in Angular applications can be used with an ASP.NET (Core) backend or a Node.js server to handle the WebSocket requests. This tutorial will show you how to create an Angular application that uses a Nod...
-
3
How to Integrate Bootstrap 5 Tabs With Chart.jsToday, I’ll cover Chart.js, a very popular JavaScript library, and teach you how to incorporate charts of this libr...
-
7
Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API The Angular Document Editor can be used comple...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK