Home ›

At the Forge - Dojo

Issue 155

From Issue #155
March 2007

Mar 01, 2007  By Reuven M. Lerner
 in
Become a black belt in JavaScript in your very own Dojo.

Listing 1. simple.html 

<html>
    <head>

    <title>Dojo page title</title>
        <script type="text/javascript"
        src="/javascript/dojo.js"></script>

        <script type="text/javascript">
            dojo.require("dojo.widget.Editor");
        </script>
    </head>

    <body>
          <div class="dojo-Editor">
              editor goes here
          </div>
    </body>
</html>

This month, we take a simpler approach, including our rich-text editor in an HTML form submission. Unfortunately, it's still not obvious how we can pull this off, because HTML forms consist of <input> and <textarea> tags. Luckily, the Dojo team has taken this into consideration. Notice that we define a Dojo widget by its class, not by its tag type. This means we can attach the dojo-Editor class to anything, not only to an empty <div> tag. If we attach it to a <textarea>—which is a block element, just like <div>—our text editor will be attached to a textarea, which will be submitted to the server. In other words, we replace our <div> with: 

<textarea name="text" class="dojo-Editor">
    Hello from the Dojo editor!
</textarea>

Listing 2 shows an example of how this might look when incorporated into a simple HTML form. When the contents of the form are sent to the server, all formatting is preserved using HTML tags. Your application will need to parse this HTML to understand any formatting that might appear in the text.

Listing 2. simple-form.html 

<html>
    <head>

    <title>Dojo page title</title>
        <script type="text/javascript"
        src="/javascript/dojo.js"></script>

        <script type="text/javascript">
            dojo.require("dojo.widget.Editor");
        </script>
    </head>

    <body>
       <form method="POST" action="/parse.php">
           <textarea name="text" class="dojo-Editor">
               write something!
           </textarea>
         <input type="submit" />
       </form>
    </body>
</html>

Of course, if your plan is to take the input text and simply display it in a Web browser, not much (if any) work is needed on your part. You can stick the input into a database and then retrieve it whenever it is needed. (I haven't checked into the security of this widget to make sure it is immune to cross-site scripting attacks, so you might want to investigate it further before simply accepting, storing and displaying user data.)

Conclusion

As you can already see, Dojo offers a wide variety of functions and doesn't take much effort to start using. But using many of the other widgets Dojo includes, such as an attractive DatePicker, requires that we use Dojo's sophisticated event handler, which we did not examine here. Next month, we will look at events in Dojo and how that package lets us incorporate special effects, Ajax and many more widgets into our Web applications.

Resources

The main source for information about Dojo, as well as Dojo software releases, is at dojotoolkit.org. Documentation for the toolkit is still a bit sparse, but it has improved significantly in the last few months, and continued improvements seem likely, given Dojo's growing popularity. The main URL for Dojo documentation is at dojotoolkit.org/docs, with Dojo.book (the Wiki-based Dojo documentation) at manual.dojotoolkit.org/index.html.

Some good articles about JavaScript toolkits, including Dojo, are at www.sitepoint.com/article/javascript-library.

Finally, a good introduction to rich-text editing with Dojo is at dojotoolkit.org/docs/rich_text.html.

Reuven M. Lerner, a longtime Web/database consultant, is a PhD candidate in Learning Sciences at Northwestern University in Evanston, Illinois. He currently lives with his wife and three children in Skokie, Illinois. You can read his Weblog at altneuland.lerner.co.il.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

rich text editor

Surender Thakur's picture
Submitted by Surender Thakur (not verified) on Tue, 12/01/2009 - 04:31.

I m trying to use rich text editor of dojo. But after much research am still not able to get the html content from the editor once i click the submit button.

Also the link dojotoolkit.org/docs/rich_text.html provided above is saying 'Page not found'..

can anyone help me on this???

thanks
Surender

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions