diff --git a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
index e5dace2f977..931ed185700 100644
--- a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
@@ -74,14 +74,40 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
      *
      * @method _changeStyle
      * @param {EventFacade} e
-     * @param {string} className The class for the new font
+     * @param {string} backColorClass The class for the new font
      * @private
      */
-    _changeStyle: function(e, className) {
-        var id = Y.stamp({});
-        this.get('host').toggleInlineSelectionClass([id]);
-        this.editor.one('.' + id).setAttribute('class', '');
-        this.get('host').toggleInlineSelectionClass([className, 'backcolor']);
+    _changeStyle: function(e, backColorClass) {
+        var host = this.get('host'),
+            classname = host.PLACEHOLDER_CLASS,
+            originalSelection = host.getSelection(),
+            cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
+
+        cssApplier.applyToSelection();
+
+        if (!Y.one('.' + classname)) {
+            // The selection is likely empty. Create an empty span, and focus it.
+            var firstRange = originalSelection[0],
+                fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
+                newRange = rangy.createRange(),
+                selection;
+            firstRange.insertNode(fragment.lastChild);
+            firstRange.collapse();
+
+            // Update the originalSelection to point to the newly selected range.
+            newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
+            selection = rangy.getSelection();
+            selection.setSingleRange(newRange);
+            originalSelection = selection.getAllRanges();
+        }
+
+        this.editor.all('.' + classname).each(function (node) {
+            node.setAttribute('class', 'fontcolor ' + backColorClass);
+        }, this);
+
+        host.setSelection(originalSelection);
+
+        this.markUpdated();
     }
 });
 
diff --git a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
index 42fab0c5018..22659297db3 100644
--- a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
@@ -1 +1 @@
-YUI.add("moodle-atto_backcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_backcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=e.stamp({});this.get("host").toggleInlineSelectionClass([r]),this.editor.one("."+r).setAttribute("class",""),this.get("host").toggleInlineSelectionClass([n,"backcolor"])}})},"@VERSION@");
+YUI.add("moodle-atto_backcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_backcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name})}),this.addToolbarMenu({icon:"e/text_highlight",overlayWidth:"4",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=this.get("host"),i=r.PLACEHOLDER_CLASS,s=r.getSelection(),o=rangy.createCssClassApplier(i,{normalize:!0});o.applyToSelection();if(!e.one("."+i)){var u=s[0],a=u.createContextualFragment('<span class="'+i+'">&nbsp;</span>'),f=rangy.createRange(),l;u.insertNode(a.lastChild),u.collapse(),f.selectNodeContents(e.one("."+i).getDOMNode()),l=rangy.getSelection(),l.setSingleRange(f),s=l.getAllRanges()}this.editor.all("."+i).each(function(e){e.setAttribute("class","fontcolor "+n)},this),r.setSelection(s),this.markUpdated()}})},"@VERSION@");
diff --git a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
index e5dace2f977..931ed185700 100644
--- a/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
@@ -74,14 +74,40 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
      *
      * @method _changeStyle
      * @param {EventFacade} e
-     * @param {string} className The class for the new font
+     * @param {string} backColorClass The class for the new font
      * @private
      */
-    _changeStyle: function(e, className) {
-        var id = Y.stamp({});
-        this.get('host').toggleInlineSelectionClass([id]);
-        this.editor.one('.' + id).setAttribute('class', '');
-        this.get('host').toggleInlineSelectionClass([className, 'backcolor']);
+    _changeStyle: function(e, backColorClass) {
+        var host = this.get('host'),
+            classname = host.PLACEHOLDER_CLASS,
+            originalSelection = host.getSelection(),
+            cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
+
+        cssApplier.applyToSelection();
+
+        if (!Y.one('.' + classname)) {
+            // The selection is likely empty. Create an empty span, and focus it.
+            var firstRange = originalSelection[0],
+                fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
+                newRange = rangy.createRange(),
+                selection;
+            firstRange.insertNode(fragment.lastChild);
+            firstRange.collapse();
+
+            // Update the originalSelection to point to the newly selected range.
+            newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
+            selection = rangy.getSelection();
+            selection.setSingleRange(newRange);
+            originalSelection = selection.getAllRanges();
+        }
+
+        this.editor.all('.' + classname).each(function (node) {
+            node.setAttribute('class', 'fontcolor ' + backColorClass);
+        }, this);
+
+        host.setSelection(originalSelection);
+
+        this.markUpdated();
     }
 });
 
diff --git a/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js b/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
index 65c55c0ec00..ba13c36e4cf 100644
--- a/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
@@ -72,13 +72,39 @@ Y.namespace('M.atto_backcolor').Button = Y.Base.create('button', Y.M.editor_atto
      *
      * @method _changeStyle
      * @param {EventFacade} e
-     * @param {string} className The class for the new font
+     * @param {string} backColorClass The class for the new font
      * @private
      */
-    _changeStyle: function(e, className) {
-        var id = Y.stamp({});
-        this.get('host').toggleInlineSelectionClass([id]);
-        this.editor.one('.' + id).setAttribute('class', '');
-        this.get('host').toggleInlineSelectionClass([className, 'backcolor']);
+    _changeStyle: function(e, backColorClass) {
+        var host = this.get('host'),
+            classname = host.PLACEHOLDER_CLASS,
+            originalSelection = host.getSelection(),
+            cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
+
+        cssApplier.applyToSelection();
+
+        if (!Y.one('.' + classname)) {
+            // The selection is likely empty. Create an empty span, and focus it.
+            var firstRange = originalSelection[0],
+                fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
+                newRange = rangy.createRange(),
+                selection;
+            firstRange.insertNode(fragment.lastChild);
+            firstRange.collapse();
+
+            // Update the originalSelection to point to the newly selected range.
+            newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
+            selection = rangy.getSelection();
+            selection.setSingleRange(newRange);
+            originalSelection = selection.getAllRanges();
+        }
+
+        this.editor.all('.' + classname).each(function (node) {
+            node.setAttribute('class', 'fontcolor ' + backColorClass);
+        }, this);
+
+        host.setSelection(originalSelection);
+
+        this.markUpdated();
     }
 });
diff --git a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
index f119c762147..269ab2d0196 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
@@ -76,14 +76,40 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
      *
      * @method _changeStyle
      * @param {EventFacade} e
-     * @param {string} className The class for the new font
+     * @param {string} fontColorClass The class for the new font
      * @private
      */
-    _changeStyle: function(e, className) {
-        var id = Y.stamp({});
-        this.get('host').toggleInlineSelectionClass([id]);
-        this.editor.one('.' + id).setAttribute('class', '');
-        this.get('host').toggleInlineSelectionClass([className, 'fontcolor']);
+    _changeStyle: function(e, fontColorClass) {
+        var host = this.get('host'),
+            classname = host.PLACEHOLDER_CLASS,
+            originalSelection = host.getSelection(),
+            cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
+
+        cssApplier.applyToSelection();
+
+        if (!Y.one('.' + classname)) {
+            // The selection is likely empty. Create an empty span, and focus it.
+            var firstRange = originalSelection[0],
+                fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
+                newRange = rangy.createRange(),
+                selection;
+            firstRange.insertNode(fragment.lastChild);
+            firstRange.collapse();
+
+            // Update the originalSelection to point to the newly selected range.
+            newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
+            selection = rangy.getSelection();
+            selection.setSingleRange(newRange);
+            originalSelection = selection.getAllRanges();
+        }
+
+        this.editor.all('.' + classname).each(function (node) {
+            node.setAttribute('class', 'fontcolor ' + fontColorClass);
+        }, this);
+
+        host.setSelection(originalSelection);
+
+        this.markUpdated();
     }
 });
 
diff --git a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
index 81aa86482fb..6ba0a2e0b4c 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
@@ -1 +1 @@
-YUI.add("moodle-atto_fontcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_fontcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=e.stamp({});this.get("host").toggleInlineSelectionClass([r]),this.editor.one("."+r).setAttribute("class",""),this.get("host").toggleInlineSelectionClass([n,"fontcolor"])}})},"@VERSION@");
+YUI.add("moodle-atto_fontcolor-button",function(e,t){var n=[{name:"white"},{name:"red"},{name:"yellow"},{name:"green"},{name:"blue"},{name:"black"}];e.namespace("M.atto_fontcolor").Button=e.Base.create("button",e.M.editor_atto.EditorPlugin,[],{initializer:function(){var t=[];e.Array.each(n,function(e){t.push({text:'<div class="'+e.name+'"></div>',callbackArgs:e.className||e.name,callback:this._changeStyle})}),this.addToolbarMenu({icon:"e/text_color",overlayWidth:"4",menuColor:"#333333",globalItemConfig:{callback:this._changeStyle},items:t})},_changeStyle:function(t,n){var r=this.get("host"),i=r.PLACEHOLDER_CLASS,s=r.getSelection(),o=rangy.createCssClassApplier(i,{normalize:!0});o.applyToSelection();if(!e.one("."+i)){var u=s[0],a=u.createContextualFragment('<span class="'+i+'">&nbsp;</span>'),f=rangy.createRange(),l;u.insertNode(a.lastChild),u.collapse(),f.selectNodeContents(e.one("."+i).getDOMNode()),l=rangy.getSelection(),l.setSingleRange(f),s=l.getAllRanges()}this.editor.all("."+i).each(function(e){e.setAttribute("class","fontcolor "+n)},this),r.setSelection(s),this.markUpdated()}})},"@VERSION@");
diff --git a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
index f119c762147..269ab2d0196 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
@@ -76,14 +76,40 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
      *
      * @method _changeStyle
      * @param {EventFacade} e
-     * @param {string} className The class for the new font
+     * @param {string} fontColorClass The class for the new font
      * @private
      */
-    _changeStyle: function(e, className) {
-        var id = Y.stamp({});
-        this.get('host').toggleInlineSelectionClass([id]);
-        this.editor.one('.' + id).setAttribute('class', '');
-        this.get('host').toggleInlineSelectionClass([className, 'fontcolor']);
+    _changeStyle: function(e, fontColorClass) {
+        var host = this.get('host'),
+            classname = host.PLACEHOLDER_CLASS,
+            originalSelection = host.getSelection(),
+            cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
+
+        cssApplier.applyToSelection();
+
+        if (!Y.one('.' + classname)) {
+            // The selection is likely empty. Create an empty span, and focus it.
+            var firstRange = originalSelection[0],
+                fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
+                newRange = rangy.createRange(),
+                selection;
+            firstRange.insertNode(fragment.lastChild);
+            firstRange.collapse();
+
+            // Update the originalSelection to point to the newly selected range.
+            newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
+            selection = rangy.getSelection();
+            selection.setSingleRange(newRange);
+            originalSelection = selection.getAllRanges();
+        }
+
+        this.editor.all('.' + classname).each(function (node) {
+            node.setAttribute('class', 'fontcolor ' + fontColorClass);
+        }, this);
+
+        host.setSelection(originalSelection);
+
+        this.markUpdated();
     }
 });
 
diff --git a/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js b/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
index 05f2a5bb904..4f819da88af 100644
--- a/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
+++ b/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
@@ -74,13 +74,39 @@ Y.namespace('M.atto_fontcolor').Button = Y.Base.create('button', Y.M.editor_atto
      *
      * @method _changeStyle
      * @param {EventFacade} e
-     * @param {string} className The class for the new font
+     * @param {string} fontColorClass The class for the new font
      * @private
      */
-    _changeStyle: function(e, className) {
-        var id = Y.stamp({});
-        this.get('host').toggleInlineSelectionClass([id]);
-        this.editor.one('.' + id).setAttribute('class', '');
-        this.get('host').toggleInlineSelectionClass([className, 'fontcolor']);
+    _changeStyle: function(e, fontColorClass) {
+        var host = this.get('host'),
+            classname = host.PLACEHOLDER_CLASS,
+            originalSelection = host.getSelection(),
+            cssApplier = rangy.createCssClassApplier(classname, {normalize: true});
+
+        cssApplier.applyToSelection();
+
+        if (!Y.one('.' + classname)) {
+            // The selection is likely empty. Create an empty span, and focus it.
+            var firstRange = originalSelection[0],
+                fragment = firstRange.createContextualFragment('<span class="' + classname + '">&nbsp;</span>'),
+                newRange = rangy.createRange(),
+                selection;
+            firstRange.insertNode(fragment.lastChild);
+            firstRange.collapse();
+
+            // Update the originalSelection to point to the newly selected range.
+            newRange.selectNodeContents(Y.one('.' + classname).getDOMNode());
+            selection = rangy.getSelection();
+            selection.setSingleRange(newRange);
+            originalSelection = selection.getAllRanges();
+        }
+
+        this.editor.all('.' + classname).each(function (node) {
+            node.setAttribute('class', 'fontcolor ' + fontColorClass);
+        }, this);
+
+        host.setSelection(originalSelection);
+
+        this.markUpdated();
     }
 });