Start Building Professional
Web Apps Today

dhtmlxEditor - Scroll to Bottom

I require functionality in a "chat" style editor window whereby when the user adds some "chat" to a dhtmlxEditor control, the "chat" shows at the bottom of the editor. Once the scrollbars appear in the editor, adding text through setContent simply adds text at the top of the editor and the new "chat" isn't shown unless you physically scroll down using the scrollbars. Ideally, I'd want to call setContent AND have the new contents showing.

So, I have modified dhtmlxEditor.js and added a new function ("scrollToBottom") which simply sets the scrollTop property of the edDoc.body object to the scrollHeight (see code below).

In order to get this to work, I have also modified the .setContent function to include an extra parameter (called "scrollToEnd"). After setting the innerHTML of the edDoc.body, I check the "scrollToEnd" parameter to see if the caller wants to scroll to the end of the editor after adding the content.

I have managed to get this working (tested in both FF3 and IE7). But the code is a little messy and I'm not sure why I've done what I've done!! Initially, I tried to make use of the onContentSet event that is triggered after the setting of the edDoc.body.innerHTML. But for some reason, the scrollbar only moved a fraction of the way down the editor and not right to the bottom. So I thought there was some kind of timing issue and proceeded along the setTimeout route (which I'm not a massive fan of to be honest). I tried using dhtmlxEvent instead of setTimeout but couldn't get it to work so perservered with the setTimeout method. I initially simply called setTimeout(this.scrollToBottom, 0) but on inspection of the scrollToBottom function found that "this" did not hold the editor object. So I added "var that = this;" prior to the setTimeout call and then used "that" inside the this.scrollToBottom function itself.

So as I said, I'm not sure why I've done what I've done and I'm sure there is a better, more elegant solution here. But it does work and is essential if you want to scroll the editor window to the very bottom after call setContent.

The (messy) code is shown below (please tidy up and re-publish if you think it's useful):

this.scrollToBottom = function(){
if (that.edDoc.body != null)
{
if (that.edDoc.body.innerHTML != "")
{
that.edDoc.body.scrollTop = that.edDoc.body.scrollHeight;
}
}
}

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

Much more elegant :-)

However, I cannot get it to work in FF3 (it works fine in IE7)
It appears to be attaching the onContentSet event correctly to the editor but just doesn't seem to be firing the code that scrolls to the bottom.
I found I couldn't use the onContentSet previously which is why I added my code to the setContent function directly after the calling of the onContentSet event.
Not sure what the issue is here???

Got the email saying there was a new posting but no sample code received :-(

I would be interested to compare my version with yours to see what's wrong/missing.
I must have done something to dhtmlxEditor.js whilst I was playing around - and forgot to put it back to its original state.
But I just cannot see what!!
So a comparison with your sample would be great.

Please, see the sample attached to this message

Yep, I've got mine working now too - confirmation that your code is good.
I have a sneaking suspicion that I set the content on the editor before attaching the onContentSet event!!!
Thanks very much.