Building a Rich Text Editor. Part V

Introduction

This article is Part V of the series on building online Rich Text Editor.

In Part I, Part II, Part III and Part IV we have built most of the application features. In this iteration we will cover file manipulation functionality: creating, printing, saving files locally (to the user’s hard drive) as well as sending the document as an email message or an attachment. 

$2.79
- OR -

Overview

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:

<button onMouseOut = "swapClass(this,'')" type = "button" id = "btn_New" title = "Create New Document">

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.

Alex July

Alex JulyAlex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.

When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.

See All Postings From Alex July >>

Reviews

Be the first to write a review

You must me logged in to write a review.