diff --git a/README.md b/README.md index 7d36ebc..548133a 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,24 @@ # Description -The Etherpad jQuery Plugin Example plugin easily allows you to add and access a pad from Etherpad in a web page. The plugin injects the pad contents into a div using iframes. It can also read the contents of a Pad and write it to a div. +The Etherpad jQuery Plugin easily allows you to embed and access a pad from Etherpad in a web page. The plugin injects the pad contents into a div using iframes. It can also read the contents of a Pad and write it to a div. - -# Usage +# Usage & Examples

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'});
+### 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'});
+### Sets the pad id, some more parameters and puts the pad in the div +`$('#examplePadBasic').pad({'padId':'test','showChat':true});`
-

Example #3: Gets the padContents from Example #2 and writes it to the target div "exampleGetContents"

-
$('#examplePadBasic').pad({'getContents':'exampleGetContents'});
+### Sets the pad id, some plugin parameters and puts the pad in the div +`$('#examplePadPlugins').pad({'padId':'test','plugins':{'pageview':'true'}});` +
+ +### Gets the padContents from Example #2 and writes it to the target div "exampleGetContents" +`$('#examplePadBasic').pad({'getContents':'exampleGetContents'});` # Available options and parameters 
@@ -27,14 +30,19 @@ The Etherpad jQuery Plugin Example plugin easily allows you to add and access a
 'userName'         : 'unnamed', // The username you want to pass to the pad
 'useMonospaceFont' : false, // Use monospaced fonts
 'noColors'         : false, // Disable background colors on author text
+'userColor'        : false, // The background color of this authors text in hex format IE #000
 'hideQRCode'       : false, // Hide QR code
+'alwaysShowChat'   : false, // Always show the chat on the UI
 'width'            : 100, // The width of the embedded IFrame
 'height'           : 100,  // The height of the embedded IFrame
 'border'           : 0,    // The width of the border (make sure to append px to a numerical value)
-'borderStyle'      : 'solid' // The CSS style of the border	[none, dotted, dashed, solid, double, groove, ridge, inset, outset]
+'borderStyle'      : 'solid', // The CSS style of the border	[none, dotted, dashed, solid, double, groove, ridge, inset, outset]
+'plugins'          : {}, // The options related to the plugins, not to the basic Etherpad configuration
+'rtl'              : false // Show text from right to left
# Copyright jQuery Etherpad plugin written by John McLear (c) Primary Technology 2011
+Development funded by the Etherpad Foundation. Feel free to re-use, distribute, butcher, edit and whatever else you want. It's under the Apache licence. diff --git a/etherpad.jquery.json b/etherpad.jquery.json new file mode 100644 index 0000000..4082283 --- /dev/null +++ b/etherpad.jquery.json @@ -0,0 +1,25 @@ +{ + "name": "etherpad", + "title": "jQuery Etherpad", + "description": "jQuery plugin for embedding Etherpad", + "keywords": [ + "color", + "animation" + ], + "version": "1.0.2", + "author": { + "name": "John McLear", + "url": "https://github.com/ether/etherpad-lite-jquery-plugin" + }, + "licenses": [ + { + "type": "Apache 2", + "url": "http://www.apache.org/licenses/LICENSE-2.0.html" + } + ], + "bugs": "https://github.com/ether/etherpad-lite-jquery-plugin/issues/", + "homepage": "https://github.com/ether/etherpad-lite-jquery-plugin", + "dependencies": { + "jquery": ">=1.5" + } +} diff --git a/index.html b/index.html index 20ed3d0..5dde6c2 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Etherpad jQuery Plugin Example - + @@ -19,10 +19,14 @@

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

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

- 
$('#examplePadIntense').pad({'padId':'test','showChat':'true'});
+ 
$('#examplePadIntense').pad({'padId':'test2','showChat':'true'});
-

Example #3: Gets the padContents from Example #2

+

Example #3: Sets the pad id, some plugin parameters and puts the pad in the div

+ 
$('#examplePadPlugins').pad({'padId':'test3','plugins':{'pageview':'true'}});
+
+ +

Example #4: Gets the padContents from Example #2

$('#examplePadIntense').pad({'getContents':'exampleGetContents'});
Click me to Replace me with the pad contents
@@ -36,11 +40,15 @@

Available options and parameters

'userName' : 'unnamed', // The username you want to pass to the pad 'useMonospaceFont' : false, // Use monospaced fonts 'noColors' : false, // Disable background colors on author text + 'userColor' : false, // The background color of this authors text in hex format IE #000 'hideQRCode' : false, // Hide QR code + 'alwaysShowChat' : false, // Always show the chat on the UI 'width' : 100, // The width of the embedded IFrame 'height' : 100, // The height of the embedded IFrame 'border' : 0, // The width of the border (make sure to append px to a numerical value) 'borderStyle' : 'solid' // The CSS style of the border [none, dotted, dashed, solid, double, groove, ridge, inset, outset] + 'plugins' : {}, // The options related to the plugins, not to the basic Etherpad configuration + 'rtl' : false // Show right to left text

If you are confused, view the source code for examples

diff --git a/js/etherpad.js b/js/etherpad.js index 2f20c6b..73d066b 100644 --- a/js/etherpad.js +++ b/js/etherpad.js @@ -8,15 +8,20 @@ 'showChat' : false, 'showLineNumbers' : false, 'userName' : 'unnamed', + 'lang' : '', 'useMonospaceFont' : false, 'noColors' : false, + 'userColor' : false, 'hideQRCode' : false, + 'alwaysShowChat' : false, 'width' : 100, 'height' : 100, 'border' : 0, 'borderStyle' : 'solid', 'toggleTextOn' : 'Disable Rich-text', - 'toggleTextOff' : 'Enable Rich-text' + 'toggleTextOff' : 'Enable Rich-text', + 'plugins' : {}, + 'rtl' : false }; var $self = this; @@ -32,22 +37,32 @@ $.extend( settings, options ); } + var pluginParams = ''; + for(var option in settings.plugins) { + pluginParams += '&' + option + '=' + settings.plugins[option] + } + var iFrameLink = ''; diff --git a/package.json b/package.json deleted file mode 100644 index 567d7ba..0000000 --- a/package.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "name": "Etherpad Lite", - "description": "jQuery Etherpad Lite collaborative editor plugin.", - "version": "1.0.0", - "author": "John McLear ", - "dependencies": { - "jquery": ">= 1.0" - } -}