@Html.TXTextControl().TextControl(settings => {
settings.Dock = TXTextControl.Web.DockStyle.Fill;
}).Render()
```
The editor is encapsulated into an additional *DIV* element with the *id* *tx-editor*. On switching the active tab pages, this complete element is moved to the new active tab page. Additionally, the content of the current instance is saved to the local storage and restored when switching back. In the following JavaScript (jQuery) code, two events are attached 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.
```
$(document).ready(function(){
// event for previous tab
$(".nav-tabs button").on("hide.bs.tab", function(){
// previous tab name
var oldTab = $(this).attr("aria-controls");
// save the document to local storage
TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat,
function (e) {
localStorage.setItem('tx-document_' + oldTab, e.data);
});
});
// event for current tab
$(".nav-tabs button").on("show.bs.tab", function(){
// current tab name
var newTab = $(this).attr("aria-controls");
// get the previously stored document from local storage
const document = localStorage.getItem('tx-document_' + newTab);
// if document is not null, load the document
// and move the editorin DOM to new tab location
if (document !== null) {
TXTextControl.loadDocument(TXTextControl.StreamType.InternalUnicodeFormat,
document, function() {
$("#tx-editor").appendTo("#" + newTab);
});
}
// if document is null, clear the Text Control and move in DOM
else {
TXTextControl.resetContents(function() {
$("#tx-editor").appendTo("#" + newTab);
});
}
});
});
```
### 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*).
```
TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat, function (e) {
localStorage.setItem('tx-document_' + oldTab, e.data);
});
```
### Loading the Document
For the current tab, the local storage is checked for a previously stored document. If a document has been found, it is loaded into the document editor using the loadDocument method. After that, the editor element is moved to the new tab page location in the DOM using the *appendTo* method:
```
TXTextControl.loadDocument(TXTextControl.StreamType.InternalUnicodeFormat,
document, function() {
$("#tx-editor").appendTo("#" + newTab);
});
```
If no document has been stored for the currently active tab, the content is reset and the element is moved:
```
TXTextControl.resetContents(function() {
$("#tx-editor").appendTo("#" + newTab);
});
```
---
## 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
- [Impressions from Web Developer Conference WDC 2023 in Hamburg, Germany](https://www.textcontrol.com/blog/2023/09/21/impressions-from-web-developer-conference-wdc-2023-in-hamburg-germany/llms.txt)
- [Impressions from NDC London 2023](https://www.textcontrol.com/blog/2023/01/30/impressions-from-ndc-london-2023/llms.txt)
- [See Text Control at DEVintersection Fall 2022 in Las Vegas](https://www.textcontrol.com/blog/2022/11/15/see-text-control-at-devintersection-fall-2022-in-las-vegas/llms.txt)
- [Impressions from NDC Oslo 2022](https://www.textcontrol.com/blog/2022/10/04/impressions-from-ndc-oslo-2022/llms.txt)
- [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt)
- [Document Viewer: Uploading Signatures](https://www.textcontrol.com/blog/2022/02/24/document-viewer-uploading-signatures/llms.txt)
- [Impressions from BASTA! Spring 2022](https://www.textcontrol.com/blog/2022/02/24/impressions-from-basta-spring-2022/llms.txt)
- [See Text Control at DEVintersection in Las Vegas](https://www.textcontrol.com/blog/2022/02/23/see-text-control-at-devintersection-in-las-vegas/llms.txt)
- [Version 30.0 Live Preview](https://www.textcontrol.com/blog/2021/09/22/version-30-live-preview/llms.txt)
- [TX Text Control 30.0 Preview: Improved Online Document Editor Ribbon Design](https://www.textcontrol.com/blog/2021/09/17/tx-text-control-30-preview-improved-online-document-editor-ribbon-design/llms.txt)
- [DocumentViewer: Deploying Forms](https://www.textcontrol.com/blog/2021/07/02/document-viewer-deploying-forms/llms.txt)
- [DocumentViewer Annotations: Highlight Text](https://www.textcontrol.com/blog/2021/06/18/document-viewer-annotations-highlight-text/llms.txt)
- [Creation of Custom Electronic Signature Boxes](https://www.textcontrol.com/blog/2021/06/15/creation-of-custom-electronic-signature-boxes/llms.txt)
- [Don't Print Your Documents! Streamlined Document Processes in Your Applications](https://www.textcontrol.com/blog/2021/06/09/dont-print-your-documents/llms.txt)
- [Advantages of a Modern Contract Lifecycle Management](https://www.textcontrol.com/blog/2021/05/07/advantages-of-a-modern-contract-lifecycle-management/llms.txt)
- [eSign Online Demo: Contract Collaboration Workflows](https://www.textcontrol.com/blog/2021/04/23/esign-online-demo-contract-collaboration-workflows/llms.txt)
- [Electronic Signature Legality Guide](https://www.textcontrol.com/blog/2021/03/10/electronic-signature-legality-guide/llms.txt)
- [DS Server: Authorizing Angular Client Components](https://www.textcontrol.com/blog/2021/03/08/ds-server-authorizing-angular-client-components/llms.txt)
- [Find the Text Control Product for your Web Application](https://www.textcontrol.com/blog/2021/02/23/find-the-text-control-product-for-your-web-application/llms.txt)
- [Adding Electronic and Digital Signatures to Documents in C# and Angular](https://www.textcontrol.com/blog/2021/02/19/adding-electronic-and-digital-signatures-to-documents-in-csharp-and-angular/llms.txt)
- [Track Changes: Show 'Original' and 'No Markup'](https://www.textcontrol.com/blog/2021/02/18/track-changes-show-original-and-no-markup/llms.txt)
- [Creating Adobe PDF Forms in C#](https://www.textcontrol.com/blog/2021/02/10/creating-adobe-pdf-forms-in-csharp/llms.txt)
- [.NET Microsoft Word Document API: Creating DOCX Documents with C#](https://www.textcontrol.com/blog/2021/02/08/dotnet-microsoft-word-api-creating-docs-documents/llms.txt)
- [Differences between DS Server and TX Text Control: Low-Code Service vs. Full Integration](https://www.textcontrol.com/blog/2021/02/05/document-processing-with-low-code-applications/llms.txt)
- [Announcing DS Server Public Beta: Your On-Premise Document Services Cloud](https://www.textcontrol.com/blog/2020/12/18/announcing-ds-server-public-beta/llms.txt)