added support for custom toolbar items (issue 26: http://github.com/a…

…kzhan/jwysiwyg/issues/issue/26 )

jwysiwyg/jquery.wysiwyg.css

@@ -2,6 +2,9 @@
 div.wysiwyg { border: 1px solid #ccc; padding: 5px; background-color: #fff; }
 div.wysiwyg * { margin: 0; padding: 0; }
 
+div.wysiwyg ul.panel li.jwysiwyg-custom-command {overflow:hidden;}
+div.wysiwyg ul.panel li.jwysiwyg-custom-command img { margin-left: 5000px; }
+
 div.wysiwyg ul.panel { border-bottom: 1px solid #ccc; float: left; width: 100%; padding: 0; }
 div.wysiwyg ul.panel li { list-style: none; float: left; margin: 1px 2px 3px 0;  background: #fff; -moz-user-select: none; -webkit-user-select: none; user-select: none;}
 div.wysiwyg ul.panel li.separator { width: 1px; height: 16px; margin: 0 4px; border-left: 1px solid #ccc; }

jwysiwyg/jquery.wysiwyg.js

@@ -143,6 +143,31 @@
                 controls: { },
                 resizeOptions: false
         };
+
+		/**
+		 * Custom control support by Alec Gorge ( http://github.com/alecgorge )
+		 */
+		// need a global, static namespace
+		$.wysiwyg = {
+			addControl : function (name, settings) {
+				// sample settings
+				/*
+				var example = {
+					icon: '/path/to/icon',
+					tooltip: 'my custom item',
+					callback: function(selectedText, wysiwygInstance) {
+						//Do whatever you want to do in here.
+					}
+				};
+				*/
+
+				var custom = {};
+				custom[name] = {visible: true, custom: true, options: settings};
+
+				$.extend($.fn.wysiwyg.controls, $.fn.wysiwyg.controls, custom);
+			}
+		};
+
         $.fn.wysiwyg.controls = {
                 bold: {
                         visible: true,
@@ -998,6 +1023,11 @@
                         }
                 },
 
+				execute: function (command, arg) {
+					if(typeof(arg) == "undefined") arg = null;
+					this.editorDoc.execCommand(command, false, arg);
+				},
+
                 designMode: function ()
                 {
                         var attempts = 3;
@@ -1033,10 +1063,28 @@
                         return (window.getSelection) ? window.getSelection() : document.selection;
                 },
 
+
+                getInternalSelection: function ()
+                {
+                        return (this.editor[0].contentWindow.getSelection) ? this.editor[0].contentWindow.getSelection() : this.editor[0].contentDocument.selection;
+                },
+
                 getRange: function ()
                 {
                         var selection = this.getSelection();
+
+                        if (!selection)
+                        {
+                                return null;
+                        }
+
+                        return (selection.rangeCount > 0) ? selection.getRangeAt(0) : (selection.createRange ? selection.createRange() : null);
+                },
 
+                getInternalRange: function ()
+                {
+                        var selection = this.getInternalSelection();
+
                         if (!selection)
                         {
                                 return null;
@@ -1143,6 +1191,31 @@
 						return this;
                 },
 
+                appendMenuCustom: function (name, options)
+                {
+                        var self = this;
+                        args = args || [];
+
+						$(window).bind("wysiwyg-trigger-"+name, options.callback);
+
+                        return $('<li role="menuitem" UNSELECTABLE="on"><img src="' + options.icon + '" class="jwysiwyg-custom-icon" />' + (name) + '</li>')
+									.addClass("custom-command-"+name)
+									.addClass("jwysiwyg-custom-command")
+									.attr('title', options.tooltip)
+									.hover(addHoverClass, removeHoverClass)
+									.click(function () {
+										self.triggerCallback(name);
+									})
+									.appendTo(this.panel);
+                },
+
+				triggerCallback : function (name) {
+					$(window).trigger("wysiwyg-trigger-"+name, [
+						this.getInternalRange(),
+						this
+					]);
+				},
+
                 appendMenu: function (cmd, args, className, fn, tooltip)
                 {
                         var self = this;
@@ -1186,7 +1259,7 @@
                         for (var name in controls)
                         {
                                 var control = controls[name];                            
-                                if (control.groupIndex && currentGroupIndex != control.groupIndex)
+								if (control.groupIndex && currentGroupIndex != control.groupIndex)
                                 {
                                         currentGroupIndex = control.groupIndex;
                                         hasVisibleControls = false;
@@ -1200,13 +1273,19 @@
                                         this.appendMenuSeparator();
                                         hasVisibleControls = true;
                                 }
-                                this.appendMenu(
-                                        control.command || name,
-                                        control['arguments'] || '',
-                                        control.className || control.command || name || 'empty',
-                                        control.exec,
-                                        control.tooltip || control.command || name || ''
-                                );
+
+								if(control.custom) {
+									this.appendMenuCustom(name, control.options);
+								}
+								else {
+									this.appendMenu(
+											control.command || name,
+											control['arguments'] || '',
+											control.className || control.command || name || 'empty',
+											control.exec,
+											control.tooltip || control.command || name || ''
+									);
+								}
                         }
                 },
 

tests/issue 26.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
+<head>
+  <title>Example: Basic - jWYSIWYG</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <link rel="stylesheet" href="../jwysiwyg/jquery.wysiwyg.css" type="text/css" />
+</head>
+
+<body>
+  <h1>jWYSIWYG</h1>
+  <h2>Example: Basic</h2>
+  <div>
+    <textarea name="wysiwyg" id="wysiwyg" rows="5" cols="47"></textarea>
+  </div>
+  <script type="text/javascript" src="../lib/jquery-1.4.2.js"></script>
+  <script type="text/javascript" src="../jwysiwyg/jquery.wysiwyg.js"></script>
+  <script type="text/javascript">
+  $(function()
+  {
+	$.wysiwyg.addControl("bg_fill", {
+		icon: 'images/color_fill.png',
+		tooltip: 'Fill Background',
+		callback: function(e, range, editor) {
+			editor.execute("hiliteColor", prompt("Fill the background with what color? Use a name like 'blue' or a hex like '#ff00ff'."));
+		}
+	});
+      $('#wysiwyg').wysiwyg();
+  });
+  </script>
+</body>
+</html>