Live Textile-Formatted Comment Preview · Tuesday, November 2, 2004

A few people over at the TextDrive forums have been asking how I implemented the fancy live textile preview for comments here on the site. The truth is, I discovered similar functionality elsewhere on the web, and patched it all into my own site. Since its not the easiest thing to figure out, I am going to document how to do it here. There are several steps to achieve this simple feature on your own blog that is running TextPattern. But, before we go into the steps, it might be nice to understand exactly how this works.

The Big Idea

In TextPattern when you click on an article and are presented with the ability to comment, the set of input boxes, text areas, and other items are generated by a simple “form” called comment_form. The idea is that we can latch onto the text area that the user types into and have it call a javascript function when its content changes. This javascript function can then read in the current content of the text area, format it using a trimmed down version of textile, and then set the content of a DIV with the resulting HTML. The end result of all this is live comment preview, with textile formatting.

Caveats

Of course, this method of textile formatted preview isn’t flawless. The main reason is that the javascript function that does the formatting only supports a fairly small subset of textile proper. The good news is that the javascript code is available for you to edit, so you can improve it if you want. If you do add any functionality, send me an email, and I will post a message about it on this site for future reference.

Credit Where Credit Is Due

I stole every last one of these ideas. Most of the javascript that I reference here is commented to give credit to the original authors. Some of the concepts were also stolen from Jon Hicks’ great series of articles on hacking TextPattern to make it suit your needs better.

Now, lets get on with the actual implementation details!

Grabbing the JavaScript Source

First, you will need to grab the Textile javascript file from here. Upload this file to your server, and make sure its accessible via HTTP by pointing your browser at the file, and ensuring that it loads. This javascript file contains a textile formatting function, and a simple function for glueing all the disparate pieces together.

Linking in the JavaScript

Next you will need to link the javascript file into whatever “page” you are using to generate single articles. In my case, this is the “default” page, but this may be different for you. If you are unsure which page to use, just complete this step for all of your “pages,” since its unlikely to hurt anything.

Once you have identified which page to update, paste the following code into the <head> section of your template:

    <script type="text/javascript" src="/scripts/textile.js">

    </script>

This will ensure that the javascript loads into the page that contains your comment field.

Editing the Comment Form

Once you have the javascript linked into your page, you will need to edit the form that generates the comment inputs to call the javascript code. In your TextPattern web interface, click on the “presentation” tab, and the “forms” sub-tab. Select the form called comment_form from the list, and its code will load into the text area for editing.

First, you will need to notify the javascript code when the user is typing in their comment. You do this by adding an onkeyup event to the message text area, as follows:

    <textarea id="message" name="message" 

       cols="1" rows="1" tabindex="4"
       style="width:300px; height:250px" 
       onkeyup="reloadPreviewDiv()">

Next, you will need to create a DIV to contain the formatted comment preview. I have this located beneath the comment area in my page, but you can put it whereever you like, and styling it with CSS is an excercise left up to you. At the bottom of my “comment_form” I have the following:

    <h3>Live Preview</h3>

    <div id="previewcomment"></div>

Edit your comment form to add something similar to this. The most important part is that the element’s ID is set to “previewcomment.” You could just as easily use a SPAN here if you like. Once edited, save the form, and then you should be ready to test out your comment preview. If it doesn’t seem to be working, a liberal dose of javascript alerts, or the use of the fantastic Firefox javascript console will help you out greatly.

Done and Done!

This technique is really quite easy, and I hope that somone will be inspired to create a full implementation of textile in javascript. This same technique could easily be applied to something like WordPress or MovableType with minimal effort.

I hope this was useful to someone, and let me know if I need to give you credit for something you see here, since I totally forgot where I found all this out from.

Any Questions?

  1. thank you Jonathan.
    — alicson    1954 days ago    #
  2. Happy to do it :)

    Now I just hope I sparked enough interest for someone to write a genuinely good Textile implementation in JavaScript. I could probably do it on my own, but I have other projects going on right now.
    — Jonathan LaCour    1954 days ago    #
  3. Thanks, worked great.
    — Colin    1937 days ago    #
  4. I don’t know if I’m running the wrong version, but I can’t find the right place to put the:

    textarea id=”message” name=”message”
    cols=”1” rows=”1” tabindex=”4”
    style=”width:300px; height:250px”
    onkeyup=”reloadPreviewDiv()”

    Can you please help?
    — Tom Fadial    1753 days ago    #
  5. I’m using v1.0- RC3 I believe and I edited the comment.php file to include the reloadPreviewDiv(), and didn’t receive any errors from that, but I still don’t see a live preview. If you would like my admin login info, I could e-mail it to you…
    — Tom Fadial    1752 days ago    #
  6. In a followup conversation with Tom via email, he determined that he had made a mistake. As far as I can tell, this should still work in TextPattern 1.0.

    Someone correct me if I am wrong, and I will be happy to update this story with amended instructions.
    — Jonathan LaCour    1752 days ago    #
  7. Yes, I had made an error. This is a great script and is very easy to implement. Thanks Jonothan…
    — Tom Fadial    1747 days ago    #
  8. Anybody get this to work with Textpattern 4.0?
    — Lachy    1644 days ago    #

commenting closed for this article