diff --git a/scripts/langindex.json b/scripts/langindex.json
index 339c56c5a..05d2a4ce3 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -1483,7 +1483,20 @@
   "core.downloading": "local_moodlemobileapp",
   "core.edit": "moodle",
   "core.editor.autosavesucceeded": "editor_atto",
+  "core.editor.bold": "atto_bold/pluginname",
+  "core.editor.clear": "atto_clear/pluginname",
+  "core.editor.h3": "atto_title",
+  "core.editor.h4": "atto_title",
+  "core.editor.h5": "atto_title",
+  "core.editor.hidetoolbar": "local_moodlemobileapp",
+  "core.editor.italic": "atto_italic/pluginname",
+  "core.editor.orderedlist": "atto_orderedlist/pluginname",
+  "core.editor.p": "atto_title",
+  "core.editor.strike": "atto_strike/pluginname",
   "core.editor.textrecovered": "editor_atto",
+  "core.editor.toggle": "local_moodlemobileapp",
+  "core.editor.underline": "atto_underline/pluginname",
+  "core.editor.unorderedlist": "atto_unorderedlist/pluginname",
   "core.emptysplit": "local_moodlemobileapp",
   "core.error": "moodle",
   "core.errorchangecompletion": "local_moodlemobileapp",
diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index d3f4ff056..19344901e 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -1483,7 +1483,20 @@
     "core.downloading": "Downloading",
     "core.edit": "Edit",
     "core.editor.autosavesucceeded": "Draft saved.",
+    "core.editor.bold": "Bold",
+    "core.editor.clear": "Clear formatting",
+    "core.editor.h3": "Heading (large)",
+    "core.editor.h4": "Heading (medium)",
+    "core.editor.h5": "Heading (small)",
+    "core.editor.hidetoolbar": "Hide toolbar",
+    "core.editor.italic": "Italic",
+    "core.editor.orderedlist": "Ordered list",
+    "core.editor.p": "Paragraph",
+    "core.editor.strike": "Strike through",
     "core.editor.textrecovered": "A draft version of this text was automatically restored.",
+    "core.editor.toggle": "Toggle editor",
+    "core.editor.underline": "Underline",
+    "core.editor.unorderedlist": "Unordered list",
     "core.emptysplit": "This page will appear blank if the left panel is empty or is loading.",
     "core.error": "Error",
     "core.errorchangecompletion": "An error occurred while changing the completion status. Please try again.",
diff --git a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index ca6e67bf3..fc1a9c683 100644
--- a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -17,67 +17,67 @@
     <ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
         <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold', 'b')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.bold' | translate">
                 <core-icon name="fa-bold"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic', 'i')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.italic' | translate">
                 <core-icon name="fa-italic"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline', 'u')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.underline' | translate">
                 <core-icon name="fa-underline"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikethrough', 'strike')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.strike' | translate">
                 <core-icon name="fa-strikethrough"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'formatBlock|<p>')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'p', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.p' | translate">
                 <core-icon name="fa-paragraph"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'h3', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h3' | translate">
                 <core-icon name="fa-header"></core-icon>3
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'formatBlock|<h4>')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'h4', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h4' | translate">
                 <core-icon name="fa-header"></core-icon>4
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'formatBlock|<h5>')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'h5', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h5' | translate">
                 <core-icon name="fa-header"></core-icon>5
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.unorderedlist' | translate">
                 <core-icon name="fa-list-ul"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.orderedlist' | translate">
                 <core-icon name="fa-list-ol"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="stopBubble($event)">
+            <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.clear' | translate">
                 <core-icon name="fa-eraser"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [attr.aria-pressed]="rteEnabled ? 'false' : 'true'" (click)="toggleEditor($event)" (mousedown)="stopBubble($event)">
+            <button [attr.aria-pressed]="!rteEnabled" (click)="toggleEditor($event)" (mousedown)="stopBubble($event)" [title]=" 'core.editor.toggle' | translate">
                 <core-icon name="fa-code"></core-icon>
             </button>
         </ion-slide>
         <ion-slide *ngIf="isPhone">
-            <button (click)="hideToolbar($event)" (mousedown)="stopBubble($event)">
+            <button (click)="hideToolbar($event)" (mousedown)="stopBubble($event)" [title]=" 'core.editor.hidetoolbar' | translate">
                 <core-icon name="fa-close"></core-icon>
             </button>
         </ion-slide>
diff --git a/src/core/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/editor/components/rich-text-editor/rich-text-editor.ts
index 5cf1a1a99..865a417d6 100644
--- a/src/core/editor/components/rich-text-editor/rich-text-editor.ts
+++ b/src/core/editor/components/rich-text-editor/rich-text-editor.ts
@@ -339,8 +339,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
             return;
         }
 
-        $event.preventDefault();
-        $event.stopPropagation();
+        this.stopBubble($event);
 
         const move = $event['key'] == 'ArrowLeft' ? -1 : +1,
             cursor = this.getCurrentCursorPosition(this.editorElement);
@@ -456,8 +455,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
      * @param $event The event.
      */
     toggleEditor($event: Event): void {
-        $event.preventDefault();
-        $event.stopPropagation();
+        this.stopBubble($event);
 
         this.setContent(this.control.value);
 
@@ -581,17 +579,20 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
      *
      * @param $event Event data
      * @param command Command to execute.
+     * @param parameters If parameters is set to block, a formatBlock command will be performed. Otherwise it will switch the
+     *                      toolbar styles button when set.
      */
-    buttonAction($event: any, command: string): void {
+    buttonAction($event: any, command: string, parameters: string): void {
         this.stopBubble($event);
 
         if (command) {
-            if (command.includes('|')) {
-                const parameters = command.split('|')[1];
-                command = command.split('|')[0];
-
-                document.execCommand(command, false, parameters);
+            if (parameters == 'block') {
+                document.execCommand('formatBlock', false, '<' + command + '>');
             } else {
+                if (parameters) {
+                    this.toolbarStyles[parameters] = this.toolbarStyles[parameters] == 'true' ? 'false' : 'true';
+                }
+
                 document.execCommand(command, false);
             }
         }
diff --git a/src/core/editor/lang/en.json b/src/core/editor/lang/en.json
index 4e91f633c..508c6ddb0 100644
--- a/src/core/editor/lang/en.json
+++ b/src/core/editor/lang/en.json
@@ -1,4 +1,17 @@
 {
     "autosavesucceeded": "Draft saved.",
-    "textrecovered": "A draft version of this text was automatically restored."
+    "bold": "Bold",
+    "clear": "Clear formatting",
+    "h3": "Heading (large)",
+    "h4": "Heading (medium)",
+    "h5": "Heading (small)",
+    "hidetoolbar": "Hide toolbar",
+    "italic": "Italic",
+    "orderedlist": "Ordered list",
+    "p": "Paragraph",
+    "strike": "Strike through",
+    "textrecovered": "A draft version of this text was automatically restored.",
+    "toggle": "Toggle editor",
+    "underline": "Underline",
+    "unorderedlist": "Unordered list"
 }
\ No newline at end of file