Skip to content

How to use Etherpad Lite with jQuery

johnyma22 edited this page Aug 13, 2011 · 10 revisions

Description

The Etherpad Lite jQuery plugin easily allows you to add a pad from Etherpad in a web page. It injects the pad contents into a div using iframes.

Usage

Include jQuery.js, include etherpad.js, assign a pad to a div. If you get confused look at the examples in index.html

Example #1: Sets the pad id and puts the pad in the div

$('#examplePadBasic').pad({'padId':'test'});

Example #2: Sets the pad id, some more parameters and puts the pad in the div

$('#examplePadBasic').pad({'padId':'test','showChat':'true'});

Available options and parameters

'host'     : 'http://beta.etherpad.org', // the host and port of the Etherpad instance, by default the foundation will host your pads for you
'baseUrl'  : '/p/', // The base URL of the pads
'showControls'     : false, // If you want to show controls IE bold, italic etc.
'showChat' : false, // If you want to show the chat button or not
'showLineNumbers'  : false, // If you want to show the line numbers or not
'userName' : 'unnamed' // The username you want to pass to the pad.

General

Resources

For Developers

How to's

Set up

Advanced steps

Integrating Etherpad in your web app

for Developers

Clone this wiki locally