Editor: Hooking events

Suite and Optimus Suite 5
#1

Is there no onChange event for the editor? I need to constantly update a form field as the user uses the editor so that the form field is always up to date with the latest data from the editor.
I tried the following:

	editor.attachEvent("onFocusChanged", function() {return edOnChange("onFocusChanged", arguments);});
	editor.attachEvent("onChange", function() {return edOnChange("onChange", arguments);});
	editor.attachEvent("onStateChange", function() {return edOnChange("onStateChange", arguments);});
	editor.attachEvent("keyup", function() {return edOnChange("keyup", arguments);});
	editor.attachEvent("onKeyUp", function() {return edOnChange("onKeyUp", arguments);});
	editor.attachEvent("onKeyPress", function() {return edOnChange("onKeyPress", arguments);});

Only the onFocusChanged did anything and then only when changing from one block to another within the editor.

Is there no way to do something like this:

<textarea class='HiddenFormBox' name='imgZZNUMZZDesc' id='imgZZNUMZZDesc' cols='50' rows='10' wrap='OFF'></textarea>
<div id="imgZZNUMZZDescDiv" style="width: 600px; height: 200px; background-color: #000099;">
<script>
	var editor = new dhtmlXEditor("imgZZNUMZZDescDiv", "dhx_black");
	editor.BoundControl="imgZZNUMZZDesc";
</script>

And have the editor simply update the hidden formbox as the user types? If not, how do I go about reacting to changes to the editor’s content?

#2

There isn’t a public solution to set onchange event. You can try to apply the following:

dhtmlxEvent(editor.edDoc, “keyup”, function(){
document.getElementById(“imgZZNUMZZDesc”).value = editor.getContent();
});

var runCommandOriginal = editor.runCommand;
editor.runCommand = function(){
runCommandOriginal.apply(this,arguments);
document.getElementById(“imgZZNUMZZDesc”).value = editor.getContent();
}

#3

Thank you Alexandra for your reply on how to get the editor to update a form element. I developed a small mod to the original dhtmlxeditor.js script so the editor will have a .BoundControl property and will be easy to implement in a parent document. You are welcome to take these and roll them into the editor in a future version if you so desire. Here are mods required:

These are based off the v.2.5 build 91111 of dhtmlxeditor.js script.

Around line 70:

	this.edDoc = this.edWin.document;
	
	
	this._prepareContent = function(saveContent) {

Change to

	this.edDoc = this.edWin.document;
	
//%%%###%%%
// Added 2/8/2010 - MKA - Adds ability to set a bound text based control to the editor
//	 and have it updated as the editor is used
	this.BoundControl = null; 
	this._updateBoundControl = function() {
		if (this.BoundControl){
			try { this.BoundControl.value = this.getContent(); } catch(e){};
		}
	}
//%%%###%%%
	
	this._prepareContent = function(saveContent) {

Around Line 159:

	this.runCommand = function(name,param){
		if(arguments.length < 2) param = null;
		if(_isIE)this.edWin.focus();
		this.edDoc.execCommand(name,false,param);
		if(_isIE){
			this.edWin.focus();
			var self = this;
			window.setTimeout(function(){
				self.edWin.focus();
			},1);
		}
	}

Change to:

	this.runCommand = function(name,param){
		if(arguments.length < 2) param = null;
		if(_isIE)this.edWin.focus();
		this.edDoc.execCommand(name,false,param);
		if(_isIE){
			this.edWin.focus();
			var self = this;
			window.setTimeout(function(){
				self.edWin.focus();
			},1);
		}
//%%%###%%%
		that._updateBoundControl();
//%%%###%%%
	}

Around Line 200:

		if((key==37)||(key==38)||(key==39)||(key==40)||(key==13))
			that.showInfo(el);
	});

Change to:

		if((key==37)||(key==38)||(key==39)||(key==40)||(key==13))
			that.showInfo(el);
//%%%###%%%
		that._updateBoundControl();
//%%%###%%%
	});

Arround Line 341:

	this.setContent = function(str){
		if(this.edDoc.body){
			this.edDoc.body.innerHTML = str; 
			this.callEvent("onContentSet",[]);
			 if(_isFF){ this.runCommand('InsertHTML',' ');}
		}
		else{
			var that = this;
			dhtmlxEvent(this.edWin, "load", function(e){
				that.setContent(str);
			})
		}
	}

Change to:

	this.setContent = function(str){
		if(this.edDoc.body){
			this.edDoc.body.innerHTML = str; 
			this.callEvent("onContentSet",[]);
			 if(_isFF){ this.runCommand('InsertHTML',' ');}
		}
		else{
			var that = this;
			dhtmlxEvent(this.edWin, "load", function(e){
				that.setContent(str);
			})
		}
//%%%###%%%
		that._updateBoundControl();
//%%%###%%%
	}

To use in your document:

	dhtmlx.image_path = "/shared_js/dhtmlxSuite2/dhtmlxEditor/codebase/imgs/";
	editor = new dhtmlXEditor("EditorDIV", "dhx_skyblue");
	editor.init();
	editor.BoundControl = document.getElementById("MyTextBox");

The above assumes EditorDIV is the DIV layer for the editor and MyTextBox is a form control such as an INPUT text type, TEXTAREA or a INPUT hidden. The bound control can be anything with a .value so even a checkbox or radio button would work but my intention is to use it with a TEXTAREA.

#4

Hello,

thank you for the provided solution. Possibly we’ll include it in the official version