Form Editor Split into Tabs

Suite and Optimus Suite 5
#1

hello,
I have a small problem that I will explain.
when i create a form with two editors and separate them to the tabs, the second tab does not show the contents!!

my code:

var myLayout,myWins;
		
		myWins = new dhtmlXWindows({
			image_path : "./imgs/"
		});

		myLayout = new dhtmlXLayoutObject({
			parent : document.body,
			pattern : "1C"
		});


		if (!myWins.window("w1")) {				
			var w1 = myWins.createWindow("w1", 150, 10, 600, 400);
			w1.setText("Texto Email");
			w1.centerOnScreen();
			w1.denyResize();
			w1.denyMove();
			w1.setModal(true);
			w1.button("park").disable();
			w1.progressOn;

			var  toolBar = null;
			toolBar = w1.attachToolbar();
			toolBar.addButton('back', 0, "Voltar", "back.png");			
			toolBar.addSpacer("back");
			toolBar.addButton('save', 2, "Guardar", "save2.png");

			toolBar.attachEvent("onClick", function (id) {
				switch (id) {
					case 'back':
						w1.close();
						break;							
					default:
						break;
				}
			});
			
			var  tabbar = null;
			tabbar = w1.attachTabbar({
				align: "left",
				mode: "top",
				tabs: [{
					id: "a1",
					text: "Adicionar",
					active: true
				}, {
					id: "a2",
					text: "Nova Versão"
				}]
			});
			tabbar.setArrowsMode("auto");
			
			var myForm = null;
			myForm = tabbar.tabs("a1").attachForm();	
			myForm.loadStruct("./form.php", function () {				
				
				tabbar.tabs("a2").attachObject("tab2");
				
				//************ TORNAR OS EDITOR'S READONLY *******************
				myForm.getEditor("editor1")._prepareContent(true);		
				myForm.getEditor("editor2")._prepareContent(true);				

				//************* FAZER COM QUE OS EDITOR'S PERMITAM ENVIAR O SEU CONTEUDO NO SEND DO FORM (PROBLEMA DETETADO NO CHROME)********************
				myForm.getEditor("editor1").getContent = function () {
					if (!this.edDoc.body) {
						return "";
					} else {
						if (window.dhx4.isFF || window.dhx4.isChrome)
							return this.editor.contentWindow.document.body.innerHTML.replace(/<\/{0,}br\/{0,}>\s{0,}$/gi, "");
						if (window.dhx4.isIE && this.edDoc.body.innerText.length == 0)
							return "";
						return this.edDoc.body.innerHTML;
					}
				}

				myForm.getEditor("editor2").getContent = function () {
					if (!this.edDoc.body) {
						return "";
					} else {
						if (window.dhx4.isFF || window.dhx4.isChrome)
							return this.editor.contentWindow.document.body.innerHTML.replace(/<\/{0,}br\/{0,}>\s{0,}$/gi, "");
						if (window.dhx4.isIE && this.edDoc.body.innerText.length == 0)
							return "";
						return this.edDoc.body.innerHTML;
					}
				}

				w1.progressOff();

			});

			var status_bar2 = null;
			status_bar2 = w1.attachStatusBar({text: "Tokens: #pasta# - #nome_funcinario# - #departamento#", height: 30});
		}

form_editor_tabs.zip (4.57 KB)

#2

Problem caused by attachObject command. It moves the node in the DOM and as a result, content of rich editor is lost ( as rich editor uses iframes and iframes are unloaded during in-DOM moving )

Check

snippet.dhtmlx.com/acf251315

The next code construction gets data from the form and resets it back after moving the editor.

var val = this.getFormData(); this.clear(); tabbar.tabs("a2").attachObject("tab2"); this.setFormData(val);

#3

thnks Stanislav