Object.Event

Control.TextArea

Cross browser textarea manipulation for Prototype.js

Tutorial
API
Resources

Introduction

Decent, flexible WYSIWYG editing in the browser is still an inconsistent affair at best in terms of user experience, integration effort, and generated markup. In the meantime a crop of text formatting languages such as Markdown, Textile, BBCode and wiki markup have emerged as ways for users to enter rich content in a controlled enviornment.

Control.TextArea provides a toolbar for textareas where users are entering text in one of these markup languages. In addition to a toolbar it provides access to a cross browser text selection and manipulation API so that creating new functionality, or integration with your custom application features is vastly easier.

Example

The example below demonstrates both components of Control.TextArea as it is used in other areas of the site. This implementation is specific to the Markdown formatting language.

Sample Code


var toolbar = new Control.TextArea.Toolbar(new Control.TextArea('markdown_example'));  
//all button callbacks are automatically bound to the Control.TextArea object  
toolbar.addButton('Bold',function(){  
    this.wrapSelection('**','**');  
});  
toolbar.addButton('Link',function(){  
    var selection = this.getSelection();  
    var response = prompt('Enter Link URL','');  
    if(response == null)  
        return;  
    this.replaceSelection('[' + (selection == '' ? 'Link Text' : selection) + '](' + (response == '' ? 'http://link_url/' : response) + ')');  
});  
toolbar.addButton('Code Block',function(){  
    this.injectEachSelectedLine(function(lines,line){  
        lines.push((event.shiftKey ? line.replace(/    /,'') : '    ' + line));  
        return lines;  
    });  
});  
var toolbar = new Control.TextArea.Toolbar(new Control.TextArea('markdown_example'));
//all button callbacks are automatically bound to the Control.TextArea object
toolbar.addButton('Bold',function(){
    this.wrapSelection('**','**');
});
toolbar.addButton('Link',function(){
    var selection = this.getSelection();
    var response = prompt('Enter Link URL','');
    if(response == null)
        return;
    this.replaceSelection('[' + (selection == '' ? 'Link Text' : selection) + '](' + (response == '' ? 'http://link_url/' : response) + ')');
});
toolbar.addButton('Code Block',function(){
    this.injectEachSelectedLine(function(lines,line){
        lines.push((event.shiftKey ? line.replace(/    /,'') : '    ' + line));
        return lines;
    });
});

How to Read the API Table

Anything in the method and property lists that ends with "()" is a method, and anything that doesn't is a property. All events are specifiable in the options hash, or via "observe()" if Object.Event has been included on the page before Control.Tabs was. In a method signature, each argument is separated by a comma, if the words are lower case it refers to the data type and gives a hint to what it is used for, if there is an upper case word it refers to the class of object that must be used. Arguments with [square brackets] around them are optional.