Index: public/javascripts/jstoolbar/textile.js
===================================================================
--- tmp/l0Pc41_textile.js
+++ public/javascripts/jstoolbar/textile.js
@@ -207,6 +207,7 @@ jsToolBar.prototype.elements.bgcolor = {
         This.encloseSelection('%{background-color:' + color + '}', '%', function(str, prefix, suffix) {
           css_tag_start = str.indexOf('%{');
           css_tag_end = str.indexOf('}');
+          css_open_tag_length = 2;
 
           if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
             // space added by encloseSelection
@@ -214,20 +215,24 @@ jsToolBar.prototype.elements.bgcolor = {
               prefix = prefix.substring(1);
             }
 
-            // Already present, replace color
+            // Already present ?
             bgcolor_tag = str.indexOf('%{background-color:');
             bgcolor_tag2 = str.indexOf(';background-color:');
+
             if (bgcolor_tag != -1) {
-              str = str.replace(/(\%\{background-color\:[A-Za-z0-9#]*)/g, prefix.slice(0, -1));
+              // Replace color in first tag
+              prefix_open = prefix.slice(0, -1);
+              str = str.replace(/(\%\{background-color\:[A-Za-z0-9#]*)/g, prefix_open);
             } else if (bgcolor_tag2 != -1) {
+              // Replace color in further tag
               new_bgcolor_tag = ';' + prefix.substring(2).slice(0, -1);
               str = str.replace(/(;background-color\:[A-Za-z0-9#]*)/g, new_bgcolor_tag);
             } else {
               // Insert bgcolor tag before the others
-              new_bgcolor_tag = prefix.substring(2).slice(0, -1);
-              end_str = str.substring(css_tag_start + 2)
-              begin_str = str.substring(0, css_tag_start + 2);
-              str = begin_str + new_bgcolor_tag + ';' + end_str;
+              str_before_first_tag = str.substring(0, css_tag_start + css_open_tag_length);
+              new_bgcolor_tag   = prefix.substring(css_open_tag_length).slice(0, -2);
+              str_after_color      = str.substring(css_tag_start + css_open_tag_length)
+              str = str_before_first_tag + new_bgcolor_tag + ';' + str_after_color;
             }
           } else {
             str = prefix + str + suffix;
@@ -251,6 +256,7 @@ jsToolBar.prototype.elements.color = {
         This.encloseSelection('%{color:' + color + '}', '%', function(str, prefix, suffix) {
           css_tag_start = str.indexOf('%{');
           css_tag_end = str.indexOf('}');
+          css_open_tag_length = 2;
 
           if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
             // space added by encloseSelection
@@ -258,20 +264,24 @@ jsToolBar.prototype.elements.color = {
               prefix = prefix.substring(1);
             }
 
-            // Already present, replace color
+            // Already present ?
             color_tag = str.indexOf('%{color:');
             color_tag2 = str.indexOf(';color:');
+
             if (color_tag != -1) {
-              str = str.replace(/(\%\{color\:[A-Za-z0-9#]*)/g, prefix.slice(0, -1));
+              // Replace color in first tag
+              prefix_opened = prefix.slice(0, -1);
+              str = str.replace(/(\%\{color\:[A-Za-z0-9#]*)/g, prefix_opened);
             } else if (color_tag2 != -1) {
+              // Replace color in further tag
               new_color_tag = ';' + prefix.substring(2).slice(0, -1);
               str = str.replace(/(;color\:[A-Za-z0-9#]*)/g, new_color_tag);
             } else {
               // Insert color tag before the others
-              new_color_tag = prefix.substring(2).slice(0, -1);
-              end_str = str.substring(css_tag_start + 2)
-              begin_str = str.substring(0, css_tag_start + 2);
-              str = begin_str + new_color_tag + ';' + end_str;
+              str_before_first_tag = str.substring(0, css_tag_start + css_open_tag_length);
+              new_color_tag     = prefix.substring(css_open_tag_length).slice(0, -2);
+              str_after_color      = str.substring(css_tag_start + css_open_tag_length)
+              str = str_before_first_tag + new_color_tag + ';' + str_after_color;
             }
           } else {
             str = prefix + str + suffix;
Index: public/javascripts/jstoolbar/markdown.js
===================================================================
--- tmp/hYvUK8_markdown.js
+++ public/javascripts/jstoolbar/markdown.js
@@ -196,6 +196,107 @@ jsToolBar.prototype.elements.precode = {
 // spacer
 jsToolBar.prototype.elements.space4 = {type: 'space'}
 
+// Selection Background Color
+jsToolBar.prototype.elements.bgcolor = {
+  type: 'button',
+  title: 'Background Color',
+  fn: {
+    wiki: function() {
+      var This = this;
+      this.colorsMenu(function(color){
+        This.encloseSelection('<span style="background-color:' + color + '">', '</span>', function(str, prefix, suffix) {
+          css_tag_start = str.indexOf('<span style="');
+          css_tag_end = str.indexOf('</span>');
+          css_open_tag_length = 13;
+
+          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
+            // space added by encloseSelection
+            if (prefix.charAt(0) == ' ') {
+              prefix = prefix.substring(1);
+            }
+
+            // Already present ?
+            bgcolor_tag = str.indexOf('<span style="background-color:');
+            bgcolor_tag2 = str.indexOf(';background-color:');
+            if (bgcolor_tag != -1) {
+              // Replace color in first tag
+              prefix_opened = prefix.slice(0, -2);
+              str = str.replace(/(\<span style\=\"background-color\:[A-Za-z0-9#]*)/g, prefix_opened);
+            } else if (bgcolor_tag2 != -1) {
+              // Replace color in further tag
+              new_bgcolor_tag = ';' + prefix.substring(css_open_tag_length).slice(0, -2);
+              str = str.replace(/(;background-color\:[A-Za-z0-9#]*)/g, new_bgcolor_tag);
+            } else {
+              // Insert bgcolor tag before the others
+              str_before_first_tag = str.substring(0, css_tag_start + css_open_tag_length);
+              new_bgcolor_tag   = prefix.substring(css_open_tag_length).slice(0, -2);
+              str_after_color      = str.substring(css_tag_start + css_open_tag_length)
+              str = str_before_first_tag + new_bgcolor_tag + ';' + str_after_color;
+            }
+          } else {
+            str = prefix + str + suffix;
+          }
+
+          return str;
+        });
+      });
+    }
+  }
+}
+
+// Selection Color
+jsToolBar.prototype.elements.color = {
+  type: 'button',
+  title: 'Text Color',
+  fn: {
+    wiki: function() {
+      var This = this;
+      this.colorsMenu(function(color){
+        This.encloseSelection('<span style="color:' + color + '">', '</span>', function(str, prefix, suffix) {
+          css_tag_start = str.indexOf('<span style="');
+          css_tag_end = str.indexOf('</span>');
+          css_open_tag_length = 13;
+
+          if ( (css_tag_start != -1) && (css_tag_end != -1) ) {
+            // space added by encloseSelection
+            if (prefix.charAt(0) == ' ') {
+              prefix = prefix.substring(1);
+            }
+
+            // Already present ?
+            color_tag = str.indexOf('<span style="color:');
+            color_tag2 = str.indexOf(';color:');
+
+            if (color_tag != -1) {
+              // Replace color in first tag
+              prefix_opened = prefix.slice(0, -2);
+              str = str.replace(/(\<span style\=\"color\:[A-Za-z0-9#]*)/g, prefix_opened);
+            } else if (color_tag2 != -1) {
+              // Replace color in further tag
+              new_color_tag = ';' + prefix.substring(13).slice(0, -2);
+              str = str.replace(/(;color\:[A-Za-z0-9#]*)/g, new_color_tag);
+            } else {
+              // Insert color tag before the others
+              str_before_first_tag = str.substring(0, css_tag_start + css_open_tag_length);
+              new_color_tag     = prefix.substring(css_open_tag_length).slice(0, -2);
+              str_after_color      = str.substring(css_tag_start + css_open_tag_length)
+              str = str_before_first_tag + new_color_tag + ';' + str_after_color;
+
+            }
+          } else {
+            str = prefix + str + suffix;
+          }
+
+          return str;
+        });
+      });
+    }
+  }
+}
+
+// spacer
+jsToolBar.prototype.elements.space4 = {type: 'space'}
+
 // wiki page
 jsToolBar.prototype.elements.link = {
   type: 'button',