Adding File Tools

In order to extend the functionality new functions we will need to add a few more buttons to our toolbar. Trying to mimic an Office application I have decided to place my new buttons at the very beginning of the toolbar. We will add the buttons as we go along with the code to handle the new features. At the end we will add a separator image to visually set the file handling tools aside from the rest of the toolbar elements.

Creating New Document

After spending quite a bit of time experimenting I have found that the easiest and the most reliable way of “creating a new document” (i.e.  starting from scratch) is simply reloading the page. Following the pattern with previous buttons add another button to our toolbar - the one that represents creating of a new document.

The code for the button I have added resulted in this:

As you can see there is an onClick event assigned to the button which calls the createNew() function. And here is the actual function which you need to add to the script section of your editor page:

& >function createNew(){
      if(confirm("Changes you have made to the document will be lost!\nContinue?")){
            location.reload();
      }
}

Calling the function will invoke JavaScript confirmation dialog.  If confirmed function will trigger the reload() method of the location object.

Now, in your particular case reloading the document might not be exactly the thing you want because the entire page will loose its state. So why not try to do something like this?

if(confirm("Changes you have made to the document will be lost!\nContinue?")){
            doc.body.innerHTML="";
     

This would set the innerHTML of the iframe body tag to an empty string. Nice and easy, right?
Well, the problem is that the body tag is not our target here, making it blank wouldn’t do the trick for the simple reason: the document being edited may contain custom code outside the body tag – some CSS declarations for example.

So what we need is to “reset” is the whole iframe. While there is a “million” ways to achieve this in Internet Explorer, the other two target browsers (Firefox and Opera 9) yield all kind of problems.
In other words if you are designing for IE only you can get away with the code above. Otherwise reloading the page seems to be the only viable option.