diff --git a/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php b/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php
new file mode 100644
index 0000000000000..382ce6219f280
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/lang/en/atto_backcolor.php
@@ -0,0 +1,25 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Strings for component 'atto_backcolor', language 'en'.
+ *
+ * @package    atto_backcolor
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+$string['pluginname'] = 'Background color';
diff --git a/lib/editor/atto/plugins/backcolor/version.php b/lib/editor/atto/plugins/backcolor/version.php
new file mode 100644
index 0000000000000..64f5dbd09050c
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/version.php
@@ -0,0 +1,29 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor integration version file.
+ *
+ * @package    atto_backcolor
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+$plugin->version   = 2014020600;        // The current plugin version (Date: YYYYMMDDXX).
+$plugin->requires  = 2013110500;        // Requires this Moodle version.
+$plugin->component = 'atto_backcolor';  // Full name of the plugin (used for diagnostics).
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
new file mode 100644
index 0000000000000..91eb04b7ba777
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-debug.js
@@ -0,0 +1,134 @@
+YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
+
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor background color plugin.
+ *
+ * @package editor-atto
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+M.atto_backcolor = M.atto_backcolor || {
+    init : function(params) {
+        var plugin = 'backcolor';
+
+        var rgb_white  = '#FFFFFF',
+            rgb_red    = '#EF4540',
+            rgb_yellow = '#FFCF35',
+            rgb_green  = '#98CA3E',
+            rgb_blue   = '#7D9FD3',
+            rgb_black  = '#333333';
+
+        var click_white = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_white);
+        };
+        var click_red = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_red);
+        };
+        var click_yellow = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_yellow);
+        };
+        var click_green = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_green);
+        };
+        var click_blue = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_blue);
+        };
+        var click_black = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_black);
+        };
+
+        var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
+        var white  = '<div style="' + buttoncss + rgb_white + '"></div>';
+        var red    = '<div style="' + buttoncss + rgb_red + '"></div>';
+        var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
+        var green  = '<div style="' + buttoncss + rgb_green + '"></div>';
+        var blue   = '<div style="' + buttoncss + rgb_blue + '"></div>';
+        var black  = '<div style="' + buttoncss + rgb_black + '"></div>';
+
+        var iconurl = M.util.image_url('e/text_highlight', 'core');
+
+        M.editor_atto.add_toolbar_menu(params.elementid,
+            plugin,
+            iconurl,
+            params.group,
+            [
+                {'text' : white, 'handler' : click_white},
+                {'text' : red, 'handler' : click_red},
+                {'text' : yellow, 'handler' : click_yellow},
+                {'text' : green, 'handler' : click_green},
+                {'text' : blue, 'handler' : click_blue},
+                {'text' : black, 'handler' : click_black}
+            ],
+            '4');
+    },
+
+    /**
+     * Handle to change the background color.
+     * @param event e - The event that triggered this.
+     * @param string elementid - the elemen id of menu icon.
+     * @param string color - The color for the background.
+     */
+    change_color : function(e, elementid, color) {
+        e.preventDefault();
+        if (!M.editor_atto.is_active(elementid)) {
+            M.editor_atto.focus(elementid);
+        }
+
+        if (window.getSelection) {
+            // Test for IE9 and non-IE browsers.
+            try {
+                if (!document.execCommand("BackColor", false, color)) {
+                    M.atto_backcolor.set_back_color(color);
+                }
+            } catch (ex) {
+                M.atto_backcolor.set_back_color(color);
+            }
+        } else if (document.selection && document.selection.createRange) {
+            // Test for IE8 or less.
+            range = document.selection.createRange();
+            range.execCommand("BackColor", false, color);
+        }
+
+        // Clean the YUI ids from the HTML.
+        M.editor_atto.text_updated(elementid);
+    },
+    /**
+     * Change the background color.
+     * This function is an alternative use for IE broswers.
+     * @param string color - The color for the background.
+     */
+    set_back_color : function (color) {
+        var selection = window.getSelection();
+        var range = null;
+        if (selection.rangeCount && selection.getRangeAt) {
+            range = selection.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (range) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        if (!document.execCommand("HiliteColor", false, color)) {
+            document.execCommand("BackColor", false, color);
+        }
+        document.designMode = "off";
+    }
+};
+
+}, '@VERSION@');
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
new file mode 100644
index 0000000000000..2489cd56dcffc
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button-min.js
@@ -0,0 +1 @@
+YUI.add("moodle-atto_backcolor-button",function(e,t){M.atto_backcolor=M.atto_backcolor||{init:function(e){var t="backcolor",n="#FFFFFF",r="#EF4540",i="#FFCF35",s="#98CA3E",o="#7D9FD3",u="#333333",a=function(e,t){M.atto_backcolor.change_color(e,t,n)},f=function(e,t){M.atto_backcolor.change_color(e,t,r)},l=function(e,t){M.atto_backcolor.change_color(e,t,i)},c=function(e,t){M.atto_backcolor.change_color(e,t,s)},h=function(e,t){M.atto_backcolor.change_color(e,t,o)},p=function(e,t){M.atto_backcolor.change_color(e,t,u)},d="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ",v='<div style="'+d+n+'"></div>',m='<div style="'+d+r+'"></div>',g='<div style="'+d+i+'"></div>',y='<div style="'+d+s+'"></div>',b='<div style="'+d+o+'"></div>',w='<div style="'+d+u+'"></div>',E=M.util.image_url("e/text_highlight","core");M.editor_atto.add_toolbar_menu(e.elementid,t,E,e.group,[{text:v,handler:a},{text:m,handler:f},{text:g,handler:l},{text:y,handler:c},{text:b,handler:h},{text:w,handler:p}],"4")},change_color:function(e,t,n){e.preventDefault(),M.editor_atto.is_active(t)||M.editor_atto.focus(t);if(window.getSelection)try{document.execCommand("BackColor",!1,n)||M.atto_backcolor.set_back_color(n)}catch(r){M.atto_backcolor.set_back_color(n)}else document.selection&&document.selection.createRange&&(range=document.selection.createRange(),range.execCommand("BackColor",!1,n));M.editor_atto.text_updated(t)},set_back_color:function(e){var t=window.getSelection(),n=null;t.rangeCount&&t.getRangeAt&&(n=t.getRangeAt(0)),document.designMode="on",n&&(t.removeAllRanges(),t.addRange(n)),document.execCommand("HiliteColor",!1,e)||document.execCommand("BackColor",!1,e),document.designMode="off"}}},"@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
new file mode 100644
index 0000000000000..91eb04b7ba777
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/yui/build/moodle-atto_backcolor-button/moodle-atto_backcolor-button.js
@@ -0,0 +1,134 @@
+YUI.add('moodle-atto_backcolor-button', function (Y, NAME) {
+
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor background color plugin.
+ *
+ * @package editor-atto
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+M.atto_backcolor = M.atto_backcolor || {
+    init : function(params) {
+        var plugin = 'backcolor';
+
+        var rgb_white  = '#FFFFFF',
+            rgb_red    = '#EF4540',
+            rgb_yellow = '#FFCF35',
+            rgb_green  = '#98CA3E',
+            rgb_blue   = '#7D9FD3',
+            rgb_black  = '#333333';
+
+        var click_white = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_white);
+        };
+        var click_red = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_red);
+        };
+        var click_yellow = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_yellow);
+        };
+        var click_green = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_green);
+        };
+        var click_blue = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_blue);
+        };
+        var click_black = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_black);
+        };
+
+        var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
+        var white  = '<div style="' + buttoncss + rgb_white + '"></div>';
+        var red    = '<div style="' + buttoncss + rgb_red + '"></div>';
+        var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
+        var green  = '<div style="' + buttoncss + rgb_green + '"></div>';
+        var blue   = '<div style="' + buttoncss + rgb_blue + '"></div>';
+        var black  = '<div style="' + buttoncss + rgb_black + '"></div>';
+
+        var iconurl = M.util.image_url('e/text_highlight', 'core');
+
+        M.editor_atto.add_toolbar_menu(params.elementid,
+            plugin,
+            iconurl,
+            params.group,
+            [
+                {'text' : white, 'handler' : click_white},
+                {'text' : red, 'handler' : click_red},
+                {'text' : yellow, 'handler' : click_yellow},
+                {'text' : green, 'handler' : click_green},
+                {'text' : blue, 'handler' : click_blue},
+                {'text' : black, 'handler' : click_black}
+            ],
+            '4');
+    },
+
+    /**
+     * Handle to change the background color.
+     * @param event e - The event that triggered this.
+     * @param string elementid - the elemen id of menu icon.
+     * @param string color - The color for the background.
+     */
+    change_color : function(e, elementid, color) {
+        e.preventDefault();
+        if (!M.editor_atto.is_active(elementid)) {
+            M.editor_atto.focus(elementid);
+        }
+
+        if (window.getSelection) {
+            // Test for IE9 and non-IE browsers.
+            try {
+                if (!document.execCommand("BackColor", false, color)) {
+                    M.atto_backcolor.set_back_color(color);
+                }
+            } catch (ex) {
+                M.atto_backcolor.set_back_color(color);
+            }
+        } else if (document.selection && document.selection.createRange) {
+            // Test for IE8 or less.
+            range = document.selection.createRange();
+            range.execCommand("BackColor", false, color);
+        }
+
+        // Clean the YUI ids from the HTML.
+        M.editor_atto.text_updated(elementid);
+    },
+    /**
+     * Change the background color.
+     * This function is an alternative use for IE broswers.
+     * @param string color - The color for the background.
+     */
+    set_back_color : function (color) {
+        var selection = window.getSelection();
+        var range = null;
+        if (selection.rangeCount && selection.getRangeAt) {
+            range = selection.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (range) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        if (!document.execCommand("HiliteColor", false, color)) {
+            document.execCommand("BackColor", false, color);
+        }
+        document.designMode = "off";
+    }
+};
+
+}, '@VERSION@');
diff --git a/lib/editor/atto/plugins/backcolor/yui/src/button/build.json b/lib/editor/atto/plugins/backcolor/yui/src/button/build.json
new file mode 100644
index 0000000000000..ab856c03ba1c8
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/yui/src/button/build.json
@@ -0,0 +1,10 @@
+{
+    "name": "moodle-atto_backcolor-button",
+    "builds": {
+        "moodle-atto_backcolor-button": {
+            "jsfiles": [
+                "button.js"
+            ]
+        }
+    }
+}
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
new file mode 100644
index 0000000000000..af1ff33431299
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/yui/src/button/js/button.js
@@ -0,0 +1,130 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor background color plugin.
+ *
+ * @package editor-atto
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+M.atto_backcolor = M.atto_backcolor || {
+    init : function(params) {
+        var plugin = 'backcolor';
+
+        var rgb_white  = '#FFFFFF',
+            rgb_red    = '#EF4540',
+            rgb_yellow = '#FFCF35',
+            rgb_green  = '#98CA3E',
+            rgb_blue   = '#7D9FD3',
+            rgb_black  = '#333333';
+
+        var click_white = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_white);
+        };
+        var click_red = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_red);
+        };
+        var click_yellow = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_yellow);
+        };
+        var click_green = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_green);
+        };
+        var click_blue = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_blue);
+        };
+        var click_black = function(e, elementid) {
+            M.atto_backcolor.change_color(e, elementid, rgb_black);
+        };
+
+        var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
+        var white  = '<div style="' + buttoncss + rgb_white + '"></div>';
+        var red    = '<div style="' + buttoncss + rgb_red + '"></div>';
+        var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
+        var green  = '<div style="' + buttoncss + rgb_green + '"></div>';
+        var blue   = '<div style="' + buttoncss + rgb_blue + '"></div>';
+        var black  = '<div style="' + buttoncss + rgb_black + '"></div>';
+
+        var iconurl = M.util.image_url('e/text_highlight', 'core');
+
+        M.editor_atto.add_toolbar_menu(params.elementid,
+            plugin,
+            iconurl,
+            params.group,
+            [
+                {'text' : white, 'handler' : click_white},
+                {'text' : red, 'handler' : click_red},
+                {'text' : yellow, 'handler' : click_yellow},
+                {'text' : green, 'handler' : click_green},
+                {'text' : blue, 'handler' : click_blue},
+                {'text' : black, 'handler' : click_black}
+            ],
+            '4');
+    },
+
+    /**
+     * Handle to change the background color.
+     * @param event e - The event that triggered this.
+     * @param string elementid - the elemen id of menu icon.
+     * @param string color - The color for the background.
+     */
+    change_color : function(e, elementid, color) {
+        e.preventDefault();
+        if (!M.editor_atto.is_active(elementid)) {
+            M.editor_atto.focus(elementid);
+        }
+
+        if (window.getSelection) {
+            // Test for IE9 and non-IE browsers.
+            try {
+                if (!document.execCommand("BackColor", false, color)) {
+                    M.atto_backcolor.set_back_color(color);
+                }
+            } catch (ex) {
+                M.atto_backcolor.set_back_color(color);
+            }
+        } else if (document.selection && document.selection.createRange) {
+            // Test for IE8 or less.
+            range = document.selection.createRange();
+            range.execCommand("BackColor", false, color);
+        }
+
+        // Clean the YUI ids from the HTML.
+        M.editor_atto.text_updated(elementid);
+    },
+    /**
+     * Change the background color.
+     * This function is an alternative use for IE broswers.
+     * @param string color - The color for the background.
+     */
+    set_back_color : function (color) {
+        var selection = window.getSelection();
+        var range = null;
+        if (selection.rangeCount && selection.getRangeAt) {
+            range = selection.getRangeAt(0);
+        }
+        document.designMode = "on";
+        if (range) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        if (!document.execCommand("HiliteColor", false, color)) {
+            document.execCommand("BackColor", false, color);
+        }
+        document.designMode = "off";
+    }
+};
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/backcolor/yui/src/button/meta/editor.js b/lib/editor/atto/plugins/backcolor/yui/src/button/meta/editor.js
new file mode 100644
index 0000000000000..d6cb6235e1a3c
--- /dev/null
+++ b/lib/editor/atto/plugins/backcolor/yui/src/button/meta/editor.js
@@ -0,0 +1,5 @@
+{
+    "moodle-atto_backcolor-button": {
+        "requires": ["node"]
+    }
+}
diff --git a/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php b/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php
new file mode 100644
index 0000000000000..c55415c0c1d8a
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/lang/en/atto_fontcolor.php
@@ -0,0 +1,25 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Strings for component 'atto_fontcolor', language 'en'.
+ *
+ * @package    atto_fontcolor
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+$string['pluginname'] = 'Font color';
diff --git a/lib/editor/atto/plugins/fontcolor/version.php b/lib/editor/atto/plugins/fontcolor/version.php
new file mode 100644
index 0000000000000..f7e0da7e2d47e
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/version.php
@@ -0,0 +1,29 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor integration version file.
+ *
+ * @package    atto_fontcolor
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+defined('MOODLE_INTERNAL') || die();
+
+$plugin->version   = 2014020600;        // The current plugin version (Date: YYYYMMDDXX).
+$plugin->requires  = 2013110500;        // Requires this Moodle version.
+$plugin->component = 'atto_fontcolor';  // Full name of the plugin (used for diagnostics).
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
new file mode 100644
index 0000000000000..56ef173268334
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-debug.js
@@ -0,0 +1,99 @@
+YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
+
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor font color plugin.
+ *
+ * @package editor-atto
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+M.atto_fontcolor = M.atto_fontcolor || {
+    dialogue : null,
+    init : function(params) {
+        var plugin = 'fontcolor';
+
+        var rgb_white  = '#FFFFFF',
+            rgb_red    = '#EF4540',
+            rgb_yellow = '#FFCF35',
+            rgb_green  = '#98CA3E',
+            rgb_blue   = '#7D9FD3',
+            rgb_black  = '#333333';
+
+        var click_white = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, 'transparent');
+        };
+        var click_red = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_red);
+        };
+        var click_yellow = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_yellow);
+        };
+        var click_green = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_green);
+        };
+        var click_blue = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_blue);
+        };
+        var click_black = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_black);
+        };
+
+        var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
+        var white  = '<div style="' + buttoncss + rgb_white + '"></div>';
+        var red    = '<div style="' + buttoncss + rgb_red + '"></div>';
+        var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
+        var green  = '<div style="' + buttoncss + rgb_green + '"></div>';
+        var blue   = '<div style="' + buttoncss + rgb_blue + '"></div>';
+        var black  = '<div style="' + buttoncss + rgb_black + '"></div>';
+
+        var iconurl = M.util.image_url('e/text_color', 'core');
+
+        M.editor_atto.add_toolbar_menu(params.elementid,
+            plugin,
+            iconurl,
+            params.group,
+            [
+                {'text' : white, 'handler' : click_white},
+                {'text' : red, 'handler' : click_red},
+                {'text' : yellow, 'handler' : click_yellow},
+                {'text' : green, 'handler' : click_green},
+                {'text' : blue, 'handler' : click_blue},
+                {'text' : black, 'handler' : click_black}
+            ],
+            '4',
+            '#333333');
+    },
+
+    /**
+     * Handle to change the editor font color.
+     * @param event e - The event that triggered this.
+     * @param string elementid - the elemen id of menu icon.
+     * @param string color - The color for the background.
+     */
+    change_color : function(e, elementid, color) {
+        e.preventDefault();
+        if (!M.editor_atto.is_active(elementid)) {
+            M.editor_atto.focus(elementid);
+        }
+        document.execCommand('foreColor', 0, color);
+        // Clean the YUI ids from the HTML.
+        M.editor_atto.text_updated(elementid);
+    }
+};
+
+}, '@VERSION@');
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
new file mode 100644
index 0000000000000..9a7702c1737d9
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button-min.js
@@ -0,0 +1 @@
+YUI.add("moodle-atto_fontcolor-button",function(e,t){M.atto_fontcolor=M.atto_fontcolor||{dialogue:null,init:function(e){var t="fontcolor",n="#FFFFFF",r="#EF4540",i="#FFCF35",s="#98CA3E",o="#7D9FD3",u="#333333",a=function(e,t){M.atto_fontcolor.change_color(e,t,"transparent")},f=function(e,t){M.atto_fontcolor.change_color(e,t,r)},l=function(e,t){M.atto_fontcolor.change_color(e,t,i)},c=function(e,t){M.atto_fontcolor.change_color(e,t,s)},h=function(e,t){M.atto_fontcolor.change_color(e,t,o)},p=function(e,t){M.atto_fontcolor.change_color(e,t,u)},d="width: 20px; height: 20px; border: 1px solid #CCC; background-color: ",v='<div style="'+d+n+'"></div>',m='<div style="'+d+r+'"></div>',g='<div style="'+d+i+'"></div>',y='<div style="'+d+s+'"></div>',b='<div style="'+d+o+'"></div>',w='<div style="'+d+u+'"></div>',E=M.util.image_url("e/text_color","core");M.editor_atto.add_toolbar_menu(e.elementid,t,E,e.group,[{text:v,handler:a},{text:m,handler:f},{text:g,handler:l},{text:y,handler:c},{text:b,handler:h},{text:w,handler:p}],"4","#333333")},change_color:function(e,t,n){e.preventDefault(),M.editor_atto.is_active(t)||M.editor_atto.focus(t),document.execCommand("foreColor",0,n),M.editor_atto.text_updated(t)}}},"@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
new file mode 100644
index 0000000000000..56ef173268334
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/yui/build/moodle-atto_fontcolor-button/moodle-atto_fontcolor-button.js
@@ -0,0 +1,99 @@
+YUI.add('moodle-atto_fontcolor-button', function (Y, NAME) {
+
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor font color plugin.
+ *
+ * @package editor-atto
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+M.atto_fontcolor = M.atto_fontcolor || {
+    dialogue : null,
+    init : function(params) {
+        var plugin = 'fontcolor';
+
+        var rgb_white  = '#FFFFFF',
+            rgb_red    = '#EF4540',
+            rgb_yellow = '#FFCF35',
+            rgb_green  = '#98CA3E',
+            rgb_blue   = '#7D9FD3',
+            rgb_black  = '#333333';
+
+        var click_white = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, 'transparent');
+        };
+        var click_red = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_red);
+        };
+        var click_yellow = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_yellow);
+        };
+        var click_green = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_green);
+        };
+        var click_blue = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_blue);
+        };
+        var click_black = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_black);
+        };
+
+        var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
+        var white  = '<div style="' + buttoncss + rgb_white + '"></div>';
+        var red    = '<div style="' + buttoncss + rgb_red + '"></div>';
+        var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
+        var green  = '<div style="' + buttoncss + rgb_green + '"></div>';
+        var blue   = '<div style="' + buttoncss + rgb_blue + '"></div>';
+        var black  = '<div style="' + buttoncss + rgb_black + '"></div>';
+
+        var iconurl = M.util.image_url('e/text_color', 'core');
+
+        M.editor_atto.add_toolbar_menu(params.elementid,
+            plugin,
+            iconurl,
+            params.group,
+            [
+                {'text' : white, 'handler' : click_white},
+                {'text' : red, 'handler' : click_red},
+                {'text' : yellow, 'handler' : click_yellow},
+                {'text' : green, 'handler' : click_green},
+                {'text' : blue, 'handler' : click_blue},
+                {'text' : black, 'handler' : click_black}
+            ],
+            '4',
+            '#333333');
+    },
+
+    /**
+     * Handle to change the editor font color.
+     * @param event e - The event that triggered this.
+     * @param string elementid - the elemen id of menu icon.
+     * @param string color - The color for the background.
+     */
+    change_color : function(e, elementid, color) {
+        e.preventDefault();
+        if (!M.editor_atto.is_active(elementid)) {
+            M.editor_atto.focus(elementid);
+        }
+        document.execCommand('foreColor', 0, color);
+        // Clean the YUI ids from the HTML.
+        M.editor_atto.text_updated(elementid);
+    }
+};
+
+}, '@VERSION@');
diff --git a/lib/editor/atto/plugins/fontcolor/yui/src/button/build.json b/lib/editor/atto/plugins/fontcolor/yui/src/button/build.json
new file mode 100644
index 0000000000000..9357f86112c61
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/yui/src/button/build.json
@@ -0,0 +1,10 @@
+{
+    "name": "moodle-atto_fontcolor-button",
+    "builds": {
+        "moodle-atto_fontcolor-button": {
+            "jsfiles": [
+                "button.js"
+            ]
+        }
+    }
+}
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
new file mode 100644
index 0000000000000..f48acf8d59a2d
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/yui/src/button/js/button.js
@@ -0,0 +1,95 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Atto text editor font color plugin.
+ *
+ * @package editor-atto
+ * @copyright  2014 Rossiani Wijaya  <rwijaya@moodle.com>
+ * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+M.atto_fontcolor = M.atto_fontcolor || {
+    dialogue : null,
+    init : function(params) {
+        var plugin = 'fontcolor';
+
+        var rgb_white  = '#FFFFFF',
+            rgb_red    = '#EF4540',
+            rgb_yellow = '#FFCF35',
+            rgb_green  = '#98CA3E',
+            rgb_blue   = '#7D9FD3',
+            rgb_black  = '#333333';
+
+        var click_white = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, 'transparent');
+        };
+        var click_red = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_red);
+        };
+        var click_yellow = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_yellow);
+        };
+        var click_green = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_green);
+        };
+        var click_blue = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_blue);
+        };
+        var click_black = function(e, elementid) {
+            M.atto_fontcolor.change_color(e, elementid, rgb_black);
+        };
+
+        var buttoncss = 'width: 20px; height: 20px; border: 1px solid #CCC; background-color: ';
+        var white  = '<div style="' + buttoncss + rgb_white + '"></div>';
+        var red    = '<div style="' + buttoncss + rgb_red + '"></div>';
+        var yellow = '<div style="' + buttoncss + rgb_yellow + '"></div>';
+        var green  = '<div style="' + buttoncss + rgb_green + '"></div>';
+        var blue   = '<div style="' + buttoncss + rgb_blue + '"></div>';
+        var black  = '<div style="' + buttoncss + rgb_black + '"></div>';
+
+        var iconurl = M.util.image_url('e/text_color', 'core');
+
+        M.editor_atto.add_toolbar_menu(params.elementid,
+            plugin,
+            iconurl,
+            params.group,
+            [
+                {'text' : white, 'handler' : click_white},
+                {'text' : red, 'handler' : click_red},
+                {'text' : yellow, 'handler' : click_yellow},
+                {'text' : green, 'handler' : click_green},
+                {'text' : blue, 'handler' : click_blue},
+                {'text' : black, 'handler' : click_black}
+            ],
+            '4',
+            '#333333');
+    },
+
+    /**
+     * Handle to change the editor font color.
+     * @param event e - The event that triggered this.
+     * @param string elementid - the elemen id of menu icon.
+     * @param string color - The color for the background.
+     */
+    change_color : function(e, elementid, color) {
+        e.preventDefault();
+        if (!M.editor_atto.is_active(elementid)) {
+            M.editor_atto.focus(elementid);
+        }
+        document.execCommand('foreColor', 0, color);
+        // Clean the YUI ids from the HTML.
+        M.editor_atto.text_updated(elementid);
+    }
+};
\ No newline at end of file
diff --git a/lib/editor/atto/plugins/fontcolor/yui/src/button/meta/editor.js b/lib/editor/atto/plugins/fontcolor/yui/src/button/meta/editor.js
new file mode 100644
index 0000000000000..ebbc79e20daf2
--- /dev/null
+++ b/lib/editor/atto/plugins/fontcolor/yui/src/button/meta/editor.js
@@ -0,0 +1,5 @@
+{
+    "moodle-atto_fontcolor-button": {
+        "requires": ["node"]
+    }
+}
diff --git a/lib/editor/atto/styles.css b/lib/editor/atto/styles.css
index e71092dff9aa3..341dfafd7dc1e 100644
--- a/lib/editor/atto/styles.css
+++ b/lib/editor/atto/styles.css
@@ -59,9 +59,9 @@ div.editor_atto_toolbar button[disabled] {
 
 div.editor_atto_toolbar button img {
     padding: 1px;
+    margin: 1px 0;
 }
 
-
 div.editor_atto_toolbar div.atto_group {
     display: inline-block;
     border: 1px solid #CCC;
@@ -81,7 +81,6 @@ div.editor_atto_toolbar div.atto_group {
 }
 
 .atto_menu {
-    min-width: 12em;
     background: white;
     padding: 1px;
 }
@@ -154,7 +153,7 @@ div.editor_atto_content:hover .atto_control {
 .editor_atto_controlmenu li {
     list-style-type: none;
     padding: 0px;
-    margin; 0px;
+    margin: 0px;
 }
 .editor_atto_controlmenu ul {
     padding: 0px;
diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
index ced059099d030..a12206dc99bd7 100644
--- a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
+++ b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js
@@ -234,14 +234,23 @@ M.editor_atto = M.editor_atto || {
      * @param string icon - the html used for the content of the button
      * @param string groupname - the group the button should be appended to.
      * @param array entries - List of menu entries with the string (entry.text) and the handlers (entry.handler).
+     * @param int overlaywidth - the overlay width size.
+     * @param string menucolor - menu icon background color
      */
-    add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries) {
+    add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries, overlaywidth, menucolor) {
         var toolbar = M.editor_atto.get_toolbar_node(elementid),
             group = toolbar.one('.atto_group.' + groupname + '_group'),
             currentfocus,
             button,
             expimgurl;
 
+        if ((typeof overlaywidth) === 'undefined') {
+            overlaywidth = '14';
+        }
+        if ((typeof menucolor) === 'undefined') {
+            menucolor = 'transparent';
+        }
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
             toolbar.append(group);
@@ -253,7 +262,8 @@ M.editor_atto = M.editor_atto || {
                                     'type="button" ' +
                                     'data-menu="' + plugin + '_' + elementid + '" ' +
                                     'title="' + Y.Escape.html(M.util.get_string('pluginname', 'atto_' + plugin)) + '">' +
-                                    '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + iconurl + '"/>' +
+                                    '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" '+
+                                    'style="background-color:' + menucolor + ';" src="' + iconurl + '"/>' +
                                     '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + expimgurl + '"/>' +
                                     '</button>');
 
@@ -269,7 +279,9 @@ M.editor_atto = M.editor_atto || {
         M.editor_atto.widgets[plugin] = plugin;
 
         var menu = Y.Node.create('<div class="atto_' + plugin + '_menu' +
-                                 ' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"></div>');
+                                 ' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"' +
+                                 ' style="min-width:' + (overlaywidth-2) + 'em"' +
+                                 '"></div>');
         var i = 0, entry = {};
 
         for (i = 0; i < entries.length; i++) {
@@ -298,7 +310,7 @@ M.editor_atto = M.editor_atto || {
         var overlay = new M.core.dialogue({
             bodyContent : menu,
             visible : false,
-            width: '14em',
+            width: overlaywidth + 'em',
             zindex: 100,
             lightbox: false,
             closeButton: false,
diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js
index a08eb2597bb41..f6713e12e53d7 100644
--- a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js
+++ b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-min.js
@@ -1,2 +1,2 @@
-YUI.add("moodle-editor_atto-editor",function(e,t){function i(){var e=this.getHTML(),t=[{regex:/<!--[\s\S]*?-->/gi,replace:""},{regex:/<\\?\?xml[^>]*>/gi,replace:""},{regex:/<\/?\w+:[^>]*>/gi,replace:""},{regex:/\s*MSO[-:][^;"']*;?/gi,replace:""},{regex:/<span[^>]*>(&nbsp;|\s)*<\/span>/gi,replace:""},{regex:/class="Mso[^"]*"/gi,replace:""},{regex:/<(\/?title|\/?meta|\/?style|\/?st\d|\/?head|\/?font|\/?html|\/?body|!\[)[^>]*?>/gi,replace:""},{regex:new RegExp(String.fromCharCode(8220),"gi"),replace:'"'},{regex:new RegExp(String.fromCharCode(8216),"gi"),replace:"'"},{regex:new RegExp(String.fromCharCode(8217),"gi"),replace:"'"},{regex:new RegExp(String.fromCharCode(8211),"gi"),replace:"-"},{regex:new RegExp(String.fromCharCode(8212),"gi"),replace:"--"},{regex:new RegExp(String.fromCharCode(189),"gi"),replace:"1/2"},{regex:new RegExp(String.fromCharCode(188),"gi"),replace:"1/4"},{regex:new RegExp(String.fromCharCode(190),"gi"),replace:"3/4"},{regex:new RegExp(String.fromCharCode(169),"gi"),replace:"(c)"},{regex:new RegExp(String.fromCharCode(174),"gi"),replace:"(r)"},{regex:new RegExp(String.fromCharCode(8230),"gi"),replace:"..."}],n=0,r;for(n=0;n<t.length;n++)r=t[n],e=e.replace(r.regex,r.replace);return this.setHTML(e),this}CSS={CONTENT:"editor_atto_content",CONTENTWRAPPER:"editor_atto_content_wrap",TOOLBAR:"editor_atto_toolbar",WRAPPER:"editor_atto"},M.editor_atto=M.editor_atto||{buttonhandlers:{},textupdatedhandlers:{},menus:{},menuhandlers:{},filepickeroptions:{},widgets:{},showhide_menu_handler:function(e){e.preventDefault();var t=this.getAttribute("disabled"),n=this.getAttribute("data-menu"),r=M.editor_atto.menus[n],i=r.get("bodyContent");r.get("visible")||t?(r.hide(),i.detach("clickoutside")):(i.on("clickoutside",function(e){e.target.ancestor()!==this&&e.target!==this&&r.get("visible")&&(i.detach("clickoutside"),r.hide())},this),r.show(),r.bodyNode.one("a").focus())},buttonclicked_handler:function(e){var t=this.getAttribute("data-editor"),n=this.getAttribute("data-plugin"),r=this.getAttribute("data-handler"),i=M.editor_atto.menus[n+"_"+t];i&&i.hide();if(M.editor_atto.is_enabled(t,n))return r=M.editor_atto.buttonhandlers[r],r(e,t)},disable_all_widgets:function(e){var t,n,r=M.editor_atto.get_toolbar_node(e);for(t in M.editor_atto.widgets)n=r.one(".atto_"+t+"_button"),n&&n.setAttribute("disabled","true")},get_textarea_node:function(t){return e.one(document.getElementById(t))},get_toolbar_node:function(t){return e.one(document.getElementById(t+"_toolbar"))},get_editable_node:function(t){return e.one(document.getElementById(t+"editable"))},is_enabled:function(e,t){var n=M.editor_atto.get_toolbar_node(e).one(".atto_"+t+"_button");return!n.hasAttribute("disabled")},enable_widget:function(e,t){var n=M.editor_atto.get_toolbar_node(e).one(".atto_"+t+"_button");n&&n.removeAttribute("disabled")},enable_all_widgets:function(e){var t,n;for(t in M.editor_atto.widgets)n=M.editor_atto.get_toolbar_node(e).one(".atto_"+t+"_button"),n&&n.removeAttribute("disabled")},add_text_updated_handler:function(e,t){e in M.editor_atto.textupdatedhandlers||(M.editor_atto.textupdatedhandlers[e]=[]),M.editor_atto.textupdatedhandlers[e].push(t)},add_toolbar_menu:function(t,n,r,i,s){var o=M.editor_atto.get_toolbar_node(t),u=o.one(".atto_group."+i+"_group"),a,f,l;u||(u=e.Node.create('<div class="atto_group '+i+'_group"></div>'),o.append(u)),l=M.util.image_url("t/expanded","moodle"),f=e.Node.create('<button class="atto_'+n+'_button atto_hasmenu" '+'data-editor="'+e.Escape.html(t)+'" '+'tabindex="-1" '+'type="button" '+'data-menu="'+n+"_"+t+'" '+'title="'+e.Escape.html(M.util.get_string("pluginname","atto_"+n))+'">'+'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="'+r+'"/>'+'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="'+l+'"/>'+"</button>"),u.append(f),a=o.getAttribute("aria-activedescendant"),a||(f.setAttribute("tabindex","0"),o.setAttribute("aria-activedescendant",f.generateID())),M.editor_atto.widgets[n]=n;var c=e.Node.create('<div class="atto_'+n+"_menu"+' atto_menu" data-editor="'+e.Escape.html(t)+'"></div>'),h=0,p={};for(h=0;h<s.length;h++)p=s[h],c.append(e.Node.create('<div class="atto_menuentry"><a href="#" class="atto_'+n+"_action_"+h+'" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'data-handler="'+e.Escape.html(n+"_action_"+h)+'">'+p.text+"</a>"+"</div>")),M.editor_atto.buttonhandlers[n+"_action_"+h]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_action_"+h),e.one("body").delegate("key",M.editor_atto.buttonclicked_handler,"space,enter",".atto_"+n+"_action_"+h),M.editor_atto.buttonhandlers[n+"_action_"+h]=p.handler);M.editor_atto.buttonhandlers[n]||(e.one("body").delegate("click",M.editor_atto.showhide_menu_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=!0);var d=new M.core.dialogue({bodyContent:c,visible:!1,width:"14em",zindex:100,lightbox:!1,closeButton:!1,center:!1});M.editor_atto.menus[n+"_"+t]=d,d.render(),d.align(f,[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]),d.hide(),d.headerNode.hide()},add_toolbar_button:function(t,n,r,i,s){var o=M.editor_atto.get_toolbar_node(t),u=o.one(".atto_group."+i+"_group"),a,f;u||(u=e.Node.create('<div class="atto_group '+i+'_group"></div>'),o.append(u)),a=e.Node.create('<button class="atto_'+n+'_button" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'tabindex="-1" '+'data-handler="'+e.Escape.html(n)+'" '+'title="'+e.Escape.html(M.util.get_string("pluginname","atto_"+n))+'">'+'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="'+r+'"/>'+"</button>"),u.append(a),f=o.getAttribute("aria-activedescendant"),f||(a.setAttribute("tabindex","0"),o.setAttribute("aria-activedescendant",a.generateID())),M.editor_atto.buttonhandlers[n]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=s),M.editor_atto
-.widgets[n]=n},is_active:function(t){var n=M.editor_atto.get_selection();n.length&&(n=n.pop());var r=null;return n.parentElement?r=e.one(n.parentElement()):r=e.one(n.startContainer),r&&r.ancestor("#"+t+"editable")!==null},focus:function(e){M.editor_atto.get_editable_node(e).focus()},init:function(t){var n=e.Node.create('<div class="'+CSS.WRAPPER+'" />'),r=e.Node.create('<div id="'+t.elementid+'editable" '+'contenteditable="true" '+'spellcheck="true" '+'class="'+CSS.CONTENT+'" />'),i="",s=e.Node.create('<div class="'+CSS.TOOLBAR+'" id="'+t.elementid+'_toolbar" role="toolbar"/>'),o=e.Node.create('<div class="'+CSS.CONTENTWRAPPER+'" />'),u=M.editor_atto.get_textarea_node(t.elementid);o.appendChild(r),n.appendChild(s),n.appendChild(o);var a=e.io(t.content_css,{sync:!0}),f=a.responseText.indexOf("font:");f&&(i=a.responseText.substring(f+"font:".length,a.responseText.length-1),r.setStyle("font",i)),r.setStyle("minHeight",1.2*u.getAttribute("rows")+"em"),r.append(u.get("value")),r.cleanHTML(),u.get("parentNode").insert(n,u),r.setStyle("color",u.getStyle("color")),r.setStyle("lineHeight",u.getStyle("lineHeight")),r.setStyle("fontSize",u.getStyle("fontSize")),u.hide(),r.on("blur",function(){this.text_updated(t.elementid)},this),e.one(e.config.doc.body).delegate("key",this.keyboard_navigation,"down:37,39","#"+t.elementid+"_toolbar",this,t.elementid),M.editor_atto.filepickeroptions[t.elementid]=t.filepickeroptions;var l,c;for(l=0;l<t.plugins.length;l++){var h=t.plugins[l].group;for(c=0;c<t.plugins[l].plugins.length;c++){var p=t.plugins[l].plugins[c];p.params.elementid=t.elementid,p.params.group=h,M["atto_"+p.name].init(p.params)}}},text_updated:function(e){var t=M.editor_atto.get_textarea_node(e),n=this.get_clean_html(e);t.set("value",n);var r=0;if(e in M.editor_atto.textupdatedhandlers)for(r=0;r<M.editor_atto.textupdatedhandlers[e].length;r++){var i=M.editor_atto.textupdatedhandlers[e][r];i(e)}},get_clean_html:function(t){var n=M.editor_atto.get_editable_node(t).cloneNode(!0);return e.each(n.all("[id]"),function(e){var t=e.get("id");t.indexOf("yui")===0&&e.removeAttribute("id")}),e.each(n.all(".atto_control"),function(e){e.remove(!0)}),n.cleanHTML(),n.getHTML()},keyboard_navigation:function(t,n){var r,i,s,o,u=M.editor_atto.get_toolbar_node(n);t.preventDefault(),r=u.all("button"),s=u.getAttribute("aria-activedescendant");if(!s)return;i=e.one("#"+s),i.setAttribute("tabindex","-1"),o=r.indexOf(i),t.keyCode===37?(o--,o<0&&(o=r.size()-1)):(o++,o>=r.size()&&(o=0)),i=r.item(o),i.setAttribute("tabindex","0"),i.focus(),u.setAttribute("aria-activedescendant",i.generateID())},can_show_filepicker:function(e,t){var n=M.editor_atto.filepickeroptions[e];return typeof n[t]!="undefined"},show_filepicker:function(t,n,r){e.use("core_filepicker",function(e){var i=M.editor_atto.filepickeroptions[t][n];i.formcallback=r,M.core_filepicker.show(e,i)})},get_selection_from_node:function(e){var t;return window.getSelection?(t=document.createRange(),t.setStartBefore(e.getDOMNode()),t.setEndAfter(e.getDOMNode()),[t]):document.selection?(t=document.body.createTextRange(),t.moveToElementText(e.getDOMNode()),t):!1},get_selection:function(){if(window.getSelection){var e=window.getSelection(),t=[],n=0;for(n=0;n<e.rangeCount;n++)t.push(e.getRangeAt(n));return t}return document.selection&&document.selection.createRange?document.selection.createRange():!1},selection_contains_node:function(e){var t,n;if(window.getSelection){n=window.getSelection();if(n.containsNode)return n.containsNode(e.getDOMNode(),!0)}return n=document.selection.createRange(),t=n.duplicate(),t.moveToElementText(e.getDOMNode()),n.inRange(t)},get_selection_parent_node:function(){var e=M.editor_atto.get_selection();if(e.length>0)return e[0].commonAncestorContainer},get_selection_text:function(){var e=M.editor_atto.get_selection();if(e.length>0&&e[0].cloneContents)return e[0].cloneContents()},set_selection:function(e){var t,n;if(window.getSelection){t=window.getSelection(),t.removeAllRanges();for(n=0;n<e.length;n++)t.addRange(e[n])}else document.selection&&e.select&&e.select()}};var n="Controlmenu",r;r=function(e){e.draggable=!1,e.center=!1,e.width="auto",e.lightbox=!1,e.footerContent="",r.superclass.constructor.apply(this,[e])},e.extend(r,M.core.dialogue,{initializer:function(t){var n,i,s;r.superclass.initializer.call(this,t),s=this.get("boundingBox"),s.addClass("editor_atto_controlmenu"),n=this.bodyNode,i=e.Node.create("<h3/>"),i.addClass("accesshide"),i.setHTML(this.get("headerText")),n.prepend(i),n.on("clickoutside",function(e){this.get("visible")&&(e.target.ancestor(".atto_control")||(e.preventDefault(),this.hide()))},this)}},{NAME:n,ATTRS:{headerText:{value:""}}}),M.editor_atto=M.editor_atto||{},M.editor_atto.controlmenu=r,e.Node.addMethod("cleanHTML",i),e.NodeList.importMethod(e.Node.prototype,"cleanHTML")},"@VERSION@",{requires:["node","io","overlay","escape","event","moodle-core-notification"]});
+YUI.add("moodle-editor_atto-editor",function(e,t){function i(){var e=this.getHTML(),t=[{regex:/<!--[\s\S]*?-->/gi,replace:""},{regex:/<\\?\?xml[^>]*>/gi,replace:""},{regex:/<\/?\w+:[^>]*>/gi,replace:""},{regex:/\s*MSO[-:][^;"']*;?/gi,replace:""},{regex:/<span[^>]*>(&nbsp;|\s)*<\/span>/gi,replace:""},{regex:/class="Mso[^"]*"/gi,replace:""},{regex:/<(\/?title|\/?meta|\/?style|\/?st\d|\/?head|\/?font|\/?html|\/?body|!\[)[^>]*?>/gi,replace:""},{regex:new RegExp(String.fromCharCode(8220),"gi"),replace:'"'},{regex:new RegExp(String.fromCharCode(8216),"gi"),replace:"'"},{regex:new RegExp(String.fromCharCode(8217),"gi"),replace:"'"},{regex:new RegExp(String.fromCharCode(8211),"gi"),replace:"-"},{regex:new RegExp(String.fromCharCode(8212),"gi"),replace:"--"},{regex:new RegExp(String.fromCharCode(189),"gi"),replace:"1/2"},{regex:new RegExp(String.fromCharCode(188),"gi"),replace:"1/4"},{regex:new RegExp(String.fromCharCode(190),"gi"),replace:"3/4"},{regex:new RegExp(String.fromCharCode(169),"gi"),replace:"(c)"},{regex:new RegExp(String.fromCharCode(174),"gi"),replace:"(r)"},{regex:new RegExp(String.fromCharCode(8230),"gi"),replace:"..."}],n=0,r;for(n=0;n<t.length;n++)r=t[n],e=e.replace(r.regex,r.replace);return this.setHTML(e),this}CSS={CONTENT:"editor_atto_content",CONTENTWRAPPER:"editor_atto_content_wrap",TOOLBAR:"editor_atto_toolbar",WRAPPER:"editor_atto"},M.editor_atto=M.editor_atto||{buttonhandlers:{},textupdatedhandlers:{},menus:{},menuhandlers:{},filepickeroptions:{},widgets:{},showhide_menu_handler:function(e){e.preventDefault();var t=this.getAttribute("disabled"),n=this.getAttribute("data-menu"),r=M.editor_atto.menus[n],i=r.get("bodyContent");r.get("visible")||t?(r.hide(),i.detach("clickoutside")):(i.on("clickoutside",function(e){e.target.ancestor()!==this&&e.target!==this&&r.get("visible")&&(i.detach("clickoutside"),r.hide())},this),r.show(),r.bodyNode.one("a").focus())},buttonclicked_handler:function(e){var t=this.getAttribute("data-editor"),n=this.getAttribute("data-plugin"),r=this.getAttribute("data-handler"),i=M.editor_atto.menus[n+"_"+t];i&&i.hide();if(M.editor_atto.is_enabled(t,n))return r=M.editor_atto.buttonhandlers[r],r(e,t)},disable_all_widgets:function(e){var t,n,r=M.editor_atto.get_toolbar_node(e);for(t in M.editor_atto.widgets)n=r.one(".atto_"+t+"_button"),n&&n.setAttribute("disabled","true")},get_textarea_node:function(t){return e.one(document.getElementById(t))},get_toolbar_node:function(t){return e.one(document.getElementById(t+"_toolbar"))},get_editable_node:function(t){return e.one(document.getElementById(t+"editable"))},is_enabled:function(e,t){var n=M.editor_atto.get_toolbar_node(e).one(".atto_"+t+"_button");return!n.hasAttribute("disabled")},enable_widget:function(e,t){var n=M.editor_atto.get_toolbar_node(e).one(".atto_"+t+"_button");n&&n.removeAttribute("disabled")},enable_all_widgets:function(e){var t,n;for(t in M.editor_atto.widgets)n=M.editor_atto.get_toolbar_node(e).one(".atto_"+t+"_button"),n&&n.removeAttribute("disabled")},add_text_updated_handler:function(e,t){e in M.editor_atto.textupdatedhandlers||(M.editor_atto.textupdatedhandlers[e]=[]),M.editor_atto.textupdatedhandlers[e].push(t)},add_toolbar_menu:function(t,n,r,i,s,o,u){var a=M.editor_atto.get_toolbar_node(t),f=a.one(".atto_group."+i+"_group"),l,c,h;typeof o=="undefined"&&(o="14"),typeof u=="undefined"&&(u="transparent"),f||(f=e.Node.create('<div class="atto_group '+i+'_group"></div>'),a.append(f)),h=M.util.image_url("t/expanded","moodle"),c=e.Node.create('<button class="atto_'+n+'_button atto_hasmenu" '+'data-editor="'+e.Escape.html(t)+'" '+'tabindex="-1" '+'type="button" '+'data-menu="'+n+"_"+t+'" '+'title="'+e.Escape.html(M.util.get_string("pluginname","atto_"+n))+'">'+'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" '+'style="background-color:'+u+';" src="'+r+'"/>'+'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="'+h+'"/>'+"</button>"),f.append(c),l=a.getAttribute("aria-activedescendant"),l||(c.setAttribute("tabindex","0"),a.setAttribute("aria-activedescendant",c.generateID())),M.editor_atto.widgets[n]=n;var p=e.Node.create('<div class="atto_'+n+"_menu"+' atto_menu" data-editor="'+e.Escape.html(t)+'"'+' style="min-width:'+(o-2)+'em"'+'"></div>'),d=0,v={};for(d=0;d<s.length;d++)v=s[d],p.append(e.Node.create('<div class="atto_menuentry"><a href="#" class="atto_'+n+"_action_"+d+'" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'data-handler="'+e.Escape.html(n+"_action_"+d)+'">'+v.text+"</a>"+"</div>")),M.editor_atto.buttonhandlers[n+"_action_"+d]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_action_"+d),e.one("body").delegate("key",M.editor_atto.buttonclicked_handler,"space,enter",".atto_"+n+"_action_"+d),M.editor_atto.buttonhandlers[n+"_action_"+d]=v.handler);M.editor_atto.buttonhandlers[n]||(e.one("body").delegate("click",M.editor_atto.showhide_menu_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=!0);var m=new M.core.dialogue({bodyContent:p,visible:!1,width:o+"em",zindex:100,lightbox:!1,closeButton:!1,center:!1});M.editor_atto.menus[n+"_"+t]=m,m.render(),m.align(c,[e.WidgetPositionAlign.TL,e.WidgetPositionAlign.BL]),m.hide(),m.headerNode.hide()},add_toolbar_button:function(t,n,r,i,s){var o=M.editor_atto.get_toolbar_node(t),u=o.one(".atto_group."+i+"_group"),a,f;u||(u=e.Node.create('<div class="atto_group '+i+'_group"></div>'),o.append(u)),a=e.Node.create('<button class="atto_'+n+'_button" '+'data-editor="'+e.Escape.html(t)+'" '+'data-plugin="'+e.Escape.html(n)+'" '+'tabindex="-1" '+'data-handler="'+e.Escape.html(n)+'" '+'title="'+e.Escape.html(M.util.get_string("pluginname","atto_"+n))+'">'+'<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="'+r+'"/>'+"</button>"),u.append(a),f=o.getAttribute("aria-activedescendant"),f||(a.setAttribute("tabindex","0"),o.setAttribute("aria-activedescendant",a.generateID())),M.editor_atto.buttonhandlers
+[n]||(e.one("body").delegate("click",M.editor_atto.buttonclicked_handler,".atto_"+n+"_button"),M.editor_atto.buttonhandlers[n]=s),M.editor_atto.widgets[n]=n},is_active:function(t){var n=M.editor_atto.get_selection();n.length&&(n=n.pop());var r=null;return n.parentElement?r=e.one(n.parentElement()):r=e.one(n.startContainer),r&&r.ancestor("#"+t+"editable")!==null},focus:function(e){M.editor_atto.get_editable_node(e).focus()},init:function(t){var n=e.Node.create('<div class="'+CSS.WRAPPER+'" />'),r=e.Node.create('<div id="'+t.elementid+'editable" '+'contenteditable="true" '+'spellcheck="true" '+'class="'+CSS.CONTENT+'" />'),i="",s=e.Node.create('<div class="'+CSS.TOOLBAR+'" id="'+t.elementid+'_toolbar" role="toolbar"/>'),o=e.Node.create('<div class="'+CSS.CONTENTWRAPPER+'" />'),u=M.editor_atto.get_textarea_node(t.elementid);o.appendChild(r),n.appendChild(s),n.appendChild(o);var a=e.io(t.content_css,{sync:!0}),f=a.responseText.indexOf("font:");f&&(i=a.responseText.substring(f+"font:".length,a.responseText.length-1),r.setStyle("font",i)),r.setStyle("minHeight",1.2*u.getAttribute("rows")+"em"),r.append(u.get("value")),r.cleanHTML(),u.get("parentNode").insert(n,u),r.setStyle("color",u.getStyle("color")),r.setStyle("lineHeight",u.getStyle("lineHeight")),r.setStyle("fontSize",u.getStyle("fontSize")),u.hide(),r.on("blur",function(){this.text_updated(t.elementid)},this),e.one(e.config.doc.body).delegate("key",this.keyboard_navigation,"down:37,39","#"+t.elementid+"_toolbar",this,t.elementid),M.editor_atto.filepickeroptions[t.elementid]=t.filepickeroptions;var l,c;for(l=0;l<t.plugins.length;l++){var h=t.plugins[l].group;for(c=0;c<t.plugins[l].plugins.length;c++){var p=t.plugins[l].plugins[c];p.params.elementid=t.elementid,p.params.group=h,M["atto_"+p.name].init(p.params)}}},text_updated:function(e){var t=M.editor_atto.get_textarea_node(e),n=this.get_clean_html(e);t.set("value",n);var r=0;if(e in M.editor_atto.textupdatedhandlers)for(r=0;r<M.editor_atto.textupdatedhandlers[e].length;r++){var i=M.editor_atto.textupdatedhandlers[e][r];i(e)}},get_clean_html:function(t){var n=M.editor_atto.get_editable_node(t).cloneNode(!0);return e.each(n.all("[id]"),function(e){var t=e.get("id");t.indexOf("yui")===0&&e.removeAttribute("id")}),e.each(n.all(".atto_control"),function(e){e.remove(!0)}),n.cleanHTML(),n.getHTML()},keyboard_navigation:function(t,n){var r,i,s,o,u=M.editor_atto.get_toolbar_node(n);t.preventDefault(),r=u.all("button"),s=u.getAttribute("aria-activedescendant");if(!s)return;i=e.one("#"+s),i.setAttribute("tabindex","-1"),o=r.indexOf(i),t.keyCode===37?(o--,o<0&&(o=r.size()-1)):(o++,o>=r.size()&&(o=0)),i=r.item(o),i.setAttribute("tabindex","0"),i.focus(),u.setAttribute("aria-activedescendant",i.generateID())},can_show_filepicker:function(e,t){var n=M.editor_atto.filepickeroptions[e];return typeof n[t]!="undefined"},show_filepicker:function(t,n,r){e.use("core_filepicker",function(e){var i=M.editor_atto.filepickeroptions[t][n];i.formcallback=r,M.core_filepicker.show(e,i)})},get_selection_from_node:function(e){var t;return window.getSelection?(t=document.createRange(),t.setStartBefore(e.getDOMNode()),t.setEndAfter(e.getDOMNode()),[t]):document.selection?(t=document.body.createTextRange(),t.moveToElementText(e.getDOMNode()),t):!1},get_selection:function(){if(window.getSelection){var e=window.getSelection(),t=[],n=0;for(n=0;n<e.rangeCount;n++)t.push(e.getRangeAt(n));return t}return document.selection&&document.selection.createRange?document.selection.createRange():!1},selection_contains_node:function(e){var t,n;if(window.getSelection){n=window.getSelection();if(n.containsNode)return n.containsNode(e.getDOMNode(),!0)}return n=document.selection.createRange(),t=n.duplicate(),t.moveToElementText(e.getDOMNode()),n.inRange(t)},get_selection_parent_node:function(){var e=M.editor_atto.get_selection();if(e.length>0)return e[0].commonAncestorContainer},get_selection_text:function(){var e=M.editor_atto.get_selection();if(e.length>0&&e[0].cloneContents)return e[0].cloneContents()},set_selection:function(e){var t,n;if(window.getSelection){t=window.getSelection(),t.removeAllRanges();for(n=0;n<e.length;n++)t.addRange(e[n])}else document.selection&&e.select&&e.select()}};var n="Controlmenu",r;r=function(e){e.draggable=!1,e.center=!1,e.width="auto",e.lightbox=!1,e.footerContent="",r.superclass.constructor.apply(this,[e])},e.extend(r,M.core.dialogue,{initializer:function(t){var n,i,s;r.superclass.initializer.call(this,t),s=this.get("boundingBox"),s.addClass("editor_atto_controlmenu"),n=this.bodyNode,i=e.Node.create("<h3/>"),i.addClass("accesshide"),i.setHTML(this.get("headerText")),n.prepend(i),n.on("clickoutside",function(e){this.get("visible")&&(e.target.ancestor(".atto_control")||(e.preventDefault(),this.hide()))},this)}},{NAME:n,ATTRS:{headerText:{value:""}}}),M.editor_atto=M.editor_atto||{},M.editor_atto.controlmenu=r,e.Node.addMethod("cleanHTML",i),e.NodeList.importMethod(e.Node.prototype,"cleanHTML")},"@VERSION@",{requires:["node","io","overlay","escape","event","moodle-core-notification"]});
diff --git a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js
index ced059099d030..a12206dc99bd7 100644
--- a/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js
+++ b/lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js
@@ -234,14 +234,23 @@ M.editor_atto = M.editor_atto || {
      * @param string icon - the html used for the content of the button
      * @param string groupname - the group the button should be appended to.
      * @param array entries - List of menu entries with the string (entry.text) and the handlers (entry.handler).
+     * @param int overlaywidth - the overlay width size.
+     * @param string menucolor - menu icon background color
      */
-    add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries) {
+    add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries, overlaywidth, menucolor) {
         var toolbar = M.editor_atto.get_toolbar_node(elementid),
             group = toolbar.one('.atto_group.' + groupname + '_group'),
             currentfocus,
             button,
             expimgurl;
 
+        if ((typeof overlaywidth) === 'undefined') {
+            overlaywidth = '14';
+        }
+        if ((typeof menucolor) === 'undefined') {
+            menucolor = 'transparent';
+        }
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
             toolbar.append(group);
@@ -253,7 +262,8 @@ M.editor_atto = M.editor_atto || {
                                     'type="button" ' +
                                     'data-menu="' + plugin + '_' + elementid + '" ' +
                                     'title="' + Y.Escape.html(M.util.get_string('pluginname', 'atto_' + plugin)) + '">' +
-                                    '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + iconurl + '"/>' +
+                                    '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" '+
+                                    'style="background-color:' + menucolor + ';" src="' + iconurl + '"/>' +
                                     '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + expimgurl + '"/>' +
                                     '</button>');
 
@@ -269,7 +279,9 @@ M.editor_atto = M.editor_atto || {
         M.editor_atto.widgets[plugin] = plugin;
 
         var menu = Y.Node.create('<div class="atto_' + plugin + '_menu' +
-                                 ' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"></div>');
+                                 ' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"' +
+                                 ' style="min-width:' + (overlaywidth-2) + 'em"' +
+                                 '"></div>');
         var i = 0, entry = {};
 
         for (i = 0; i < entries.length; i++) {
@@ -298,7 +310,7 @@ M.editor_atto = M.editor_atto || {
         var overlay = new M.core.dialogue({
             bodyContent : menu,
             visible : false,
-            width: '14em',
+            width: overlaywidth + 'em',
             zindex: 100,
             lightbox: false,
             closeButton: false,
diff --git a/lib/editor/atto/yui/src/editor/js/editor.js b/lib/editor/atto/yui/src/editor/js/editor.js
index b605a4e1a9464..7113d636c4e1b 100644
--- a/lib/editor/atto/yui/src/editor/js/editor.js
+++ b/lib/editor/atto/yui/src/editor/js/editor.js
@@ -232,14 +232,23 @@ M.editor_atto = M.editor_atto || {
      * @param string icon - the html used for the content of the button
      * @param string groupname - the group the button should be appended to.
      * @param array entries - List of menu entries with the string (entry.text) and the handlers (entry.handler).
+     * @param int overlaywidth - the overlay width size.
+     * @param string menucolor - menu icon background color
      */
-    add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries) {
+    add_toolbar_menu : function(elementid, plugin, iconurl, groupname, entries, overlaywidth, menucolor) {
         var toolbar = M.editor_atto.get_toolbar_node(elementid),
             group = toolbar.one('.atto_group.' + groupname + '_group'),
             currentfocus,
             button,
             expimgurl;
 
+        if ((typeof overlaywidth) === 'undefined') {
+            overlaywidth = '14';
+        }
+        if ((typeof menucolor) === 'undefined') {
+            menucolor = 'transparent';
+        }
+
         if (!group) {
             group = Y.Node.create('<div class="atto_group ' + groupname + '_group"></div>');
             toolbar.append(group);
@@ -251,7 +260,8 @@ M.editor_atto = M.editor_atto || {
                                     'type="button" ' +
                                     'data-menu="' + plugin + '_' + elementid + '" ' +
                                     'title="' + Y.Escape.html(M.util.get_string('pluginname', 'atto_' + plugin)) + '">' +
-                                    '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + iconurl + '"/>' +
+                                    '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" '+
+                                    'style="background-color:' + menucolor + ';" src="' + iconurl + '"/>' +
                                     '<img class="icon" aria-hidden="true" role="presentation" width="16" height="16" src="' + expimgurl + '"/>' +
                                     '</button>');
 
@@ -267,7 +277,9 @@ M.editor_atto = M.editor_atto || {
         M.editor_atto.widgets[plugin] = plugin;
 
         var menu = Y.Node.create('<div class="atto_' + plugin + '_menu' +
-                                 ' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"></div>');
+                                 ' atto_menu" data-editor="' + Y.Escape.html(elementid) + '"' +
+                                 ' style="min-width:' + (overlaywidth-2) + 'em"' +
+                                 '"></div>');
         var i = 0, entry = {};
 
         for (i = 0; i < entries.length; i++) {
@@ -296,7 +308,7 @@ M.editor_atto = M.editor_atto || {
         var overlay = new M.core.dialogue({
             bodyContent : menu,
             visible : false,
-            width: '14em',
+            width: overlaywidth + 'em',
             zindex: 100,
             lightbox: false,
             closeButton: false,