Articles published in category JavaScript

Showing 1 to 1 of 1 results.

Previewing text using JavaScript and AJAX

Nov 20, 2008

I recently added a new feature to the administration of the my site. Since I haven‘t implemented anything near a sophisticated publishing facility, I wanted a way of previewing my articles without having to save them. Fairly basic, but here is how I did it.

To help me along I wrote a simple JavaScript library to convert any textarea into previewable widget using AJAX to use a server-side script process the text. See the source code below. It depends on Prototype but you‘ll probably be able to modify it fairly easily to remove that dependency.

//    Copyright (c) 2008 Elwyn Malethan
//
//     This program is free software: you can redistribute it and/or modify
//     it under the terms of the GNU Lesser General Public License as published
//     by the Free Software Foundation, either version 3 of the License, or
//     (at your option) any later version.
//
//     This program is distributed in the hope that it will be useful,
//     but WITHOUT ANY WARRANTY; without even the implied warranty of
//     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//     GNU General Public License for more details.
//
//     You should have received a copy of the GNU Lesser General Public License
//     along with this program.  If not, see <http://www.gnu.org/licenses/>.

//---------------------------------------------------------------------- Constructor

function TextPreview(textarea, previewUrl) {
    this._textarea = textarea;
    this._previewUrl = previewUrl;

    this._textarea.addClassName("tp_source")
    var previewHtml = '<div class="tp_preview" id="' + this._textarea.id + 'PreviewPane"' +
                      ' style="' +
                      ' display: none;' +
                      ' width:' + this._textarea.clientWidth +'px;' +
                      ' height:' + this._textarea.clientHeight +'px;' +
                      '">' +
                      '</div>' +
                      '<div id="' + this._textarea.id + 'Toolbar" class="text_preview_tools clear"' +
                      ' style="width:' + this._textarea.clientWidth +'px;">' +
                      '<div class="tab source active" id="' + this._textarea.id + 'Source"' +
                      ' onclick="TextPreview.showSource(\'' + this._textarea.id + '\')"' +
                      '>Source</div>' +
                      '<div class="tab source" id="' + this._textarea.id + 'Preview"' +
                      ' onclick="TextPreview.showPreview(\'' + this._textarea.id + '\', \'' +this._previewUrl + '\')"' +
                      '>Preview</div>' +
                      '</div>';

    new Insertion.After(this._textarea, previewHtml)
}

//---------------------------------------------------------------------- Static Methods

TextPreview.showPreview = function(textareaId, previewUrl) {
    $(textareaId).hide();
    $(textareaId + 'PreviewPane').show();
    $(textareaId + 'Preview').addClassName("active");
    $(textareaId + 'Source').removeClassName("active");
    new Ajax.Updater(
            textareaId + 'PreviewPane',
            previewUrl,
            { method: 'post', parameters: 'source=' + escape($(textareaId).value) }
    );
}

TextPreview.showSource = function(textareaId) {
    $(textareaId).show();
    $(textareaId + 'PreviewPane').hide();
    $(textareaId + 'Source').addClassName("active");
    $(textareaId + 'Preview').removeClassName("active");
}

//---------------------------------------------------------------------- Instance Methods

TextPreview.prototype.showPreview = function() {
    TextPreview.showPreview(this._textarea, this._previewUrl)
}

TextPreview.prototype.showSource = function() {
    TextPreview.showSource(this._textarea)
}

To use it you just do something like this:

<html>
<head>
    <link href="text_preview.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="text_preview.js"></script>
    
</head>
<body>
    
    <p><label>Body</label><br />
        <textarea id="blogPost_body" name="blogPost.body" cols="80" rows="20"></textarea>
    </p>

<script type="text/javascript">
    new TextPreview($('blogPost_body'), '... path to server side script ...' )
</script>
    
</body>
</html>

You‘ll also need some CSS like this below:

.tp_source, .tp_preview {
    border: 1px solid #999999;
    border-bottom: none !important;
    margin-top: 1px;
    margin-bottom: 0;
    padding: 5px;
    color: black;
    overflow-y: scroll;
    background-color: white;
}

.text_preview_tools {
    border-top: 1px solid #999999;
    padding: 0 5px 0 5px;
    font-size: 0.8em;
    clear:both;
    height: 2em;
}

.text_preview_tools .tab {
    color: white;
    background-color: #999999;
    float: left;
    cursor: pointer;
    padding: 3px 5px 3px 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: -1px;
    height: 1.8em;
}

.text_preview_tools .active {
    background-color: white;
    color: #999999;
    padding: 3px 4px 2px 4px;
    border: 1px solid #999999;
    border-top-color: white;
}

.text_preview_tools .tab:hover {
    text-decoration: underline;
}

Hope you enjoy! (Until I get comments implemented for this website. I‘ll just have to assume I have readers and that some of you did indeed enjoy… )

First published on Nov 20, 2008. Last updated on: Dec 30, 2009.

0 comments | Tagged: javascript preview textile

Showing 1 to 1 of 1 results.

implements Elegance {

// Elwyn Malethan's musings on software development, mountain biking and general navel–gazing...

Articles published in category JavaScript

Previewing text using JavaScript and AJAX