@sapui5/sap.ui.richtexteditor 1.96.25 → 1.96.26

package/src/sap/ui/richtexteditor/RichTextEditor.js

@@ -3,46 +3,43 @@
  * (c) Copyright 2009-2021 SAP SE. All rights reserved.
  */
 
-/*global Promise */
-
 // Provides control sap.ui.richtexteditor.RichTextEditor.
 sap.ui.define([
 	"sap/ui/thirdparty/jquery",
 	'sap/ui/core/Control',
+	'sap/ui/core/library',
+	'sap/ui/core/Locale',
+	'sap/ui/core/Popup',
 	'sap/ui/core/ResizeHandler',
 	'./library',
 	'./ToolbarWrapper',
-	"sap/ui/core/RenderManager",
 	"sap/ui/dom/includeScript",
 	"sap/base/Log",
 	"sap/base/security/sanitizeHTML",
 	"sap/ui/events/KeyCodes",
-	"sap/base/security/encodeXML",
-	"sap/ui/Device",
 	"sap/ui/core/Core",
 	// Control renderer
-	"./RichTextEditorRenderer",
-	// jQuery custom selectors ":sapFocusable"
-	"sap/ui/dom/jquery/Selectors",
-	// jQuery Plugin "control"
-	"sap/ui/dom/jquery/control"
+	"./RichTextEditorRenderer"
 ],
 	function(
 		jQuery,
 		Control,
+		coreLibrary,
+		Locale,
+		Popup,
 		ResizeHandler,
 		library,
 		ToolbarWrapper,
-		RenderManager,
 		includeScript,
 		Log,
 		sanitizeHTML,
 		KeyCodes,
-		encodeXML,
-		Device,
 		Core
 	) {
 	"use strict";
+
+	var TextDirection = coreLibrary.TextDirection;
+
 	/**
 	 * Describes the internal status of the editor component used inside the RichTextEditor control.
 	 *
@@ -112,6 +109,47 @@ sap.ui.define([
 	 * <li>Use callbacks to the native third-party API with care, as there may be compatibility issues with later versions.</li>
 	 * </ul>
 	 *
+	 * <h3>Custom toolbar - adding and removing buttons</h3>
+	 * With version 1.96.27 it is possible to redefine the button groups configuration in order to show only particular set of buttons in the custom toolbar of the <code>RichTextEditor</code>.
+	 * This is possible in few ways:
+	 * <ul>
+	 * <li>By providing the buttons group configurations as a whole by setting the <code>buttonGroups</code> property of the control.</li>
+	 * <li>By providing individual button group configuration via <code>addButtonGroup</code> method.</li>
+	 * </ul>
+	 *
+	 * Consider the following when choosing your approach:
+	 * <ul>
+	 * <li>Setting <code>buttonGroups</code> will override all current custom toolbar button group configurations. This method allows for total redefining of the custom toolbar groups.</li>
+	 * <li>Using <code>addButtonGroups</code> will try to add non-existing group into the configuration array, however, if such group configuration exists already, a warning will be logged and the new configuration will not be added. In order to replace the existing configuration you will need to remove it first via <code>removeButtonGroup</code>.</li>
+	 * </ul>
+	 *
+	 * Below is a list of supported groups and buttons, which can be specified in the configuration objects (format is <<group name>>: <<supported buttons>>):
+	 *	<ul>
+	 *		<li>font-style: bold, italic, underline, strikethrough</li>
+	 *		<li>font: fontfamily (fontselect in TinyMCE5), fontsize (fontsizeselect in TinyMCE5), forecolor, backcolor</li>
+	 *		<li>clipboard: cut, copy, paste</li>
+	 *		<li>structure: bullist, numlist, outdent, indent</li>
+	 *		<li>undo: undo, redo</li>
+	 *		<li>insert: image, emoticons</li>
+	 *		<li>link: link, unlink</li>
+	 *		<li>text-align: alignleft, aligncenter, alignright, alignjustify</li>
+	 *	</ul>
+	 * Additional supported groups, which can be added only after the editor is loaded (they can not be specified in the above mentioned configuration):
+	 *	<ul>
+	 *		<li>table: table</li>
+	 *		<li>styleselect: styleselect</li>
+	 *	<ul>
+	 * <b>Note!</b> Adding configuration for "text-align" group with any buttons will still render a menu button with all available options inside. Removing/hiding the group can be achieved by invoking <code>removeButtonGroup</code> or <code>setShowGroupTextAlign(false)</code> depending on the desired result.
+	 *
+	 * <b>Note!</b> There is no synchronization between the <code>setShowGroup*</code> properties and the configuration object that the application can specifying via <code>buttonGroups</code> in the constructor or on a later stage. This means that in case new configuration is provided and for particular group the passed object contains property <code>visible: true</code>, this group property will be respected no matter if the <code>RichTextEditor</code>'s property for this particular group is set to <code>false</code>.
+	 * Example:
+	 * Providing the following object as group configuration:
+	 * {
+	 * 	name: "font"
+	 * 	visible: true
+	 * }
+	 * Will make the "font" group visible, no matter that calling <code>RichTextEditor.getShowGroupFont()</code> returns <code>false</code>.
+	 *
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
@@ -123,7 +161,6 @@ sap.ui.define([
 	 * @alias sap.ui.richtexteditor.RichTextEditor
 	 * @see {@link fiori:https://experience.sap.com/fiori-design-web/rich-text-editor/ Rich Text Editor}
 	 * @see {@link topic:d4f3f1598373452bb73f2120930c133c}
-	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	var RichTextEditor = Control.extend("sap.ui.richtexteditor.RichTextEditor", /** @lends sap.ui.richtexteditor.RichTextEditor.prototype */ {
 		metadata: {
@@ -140,7 +177,7 @@ sap.ui.define([
 				/**
 				 * The text direction
 				 */
-				textDirection: { type: "sap.ui.core.TextDirection", group: "Appearance", defaultValue: sap.ui.core.TextDirection.Inherit },
+				textDirection: { type: "sap.ui.core.TextDirection", group: "Appearance", defaultValue: TextDirection.Inherit },
 
 				/**
 				 * Width of RichTextEditor control in CSS units.
@@ -150,6 +187,7 @@ sap.ui.define([
 				/**
 				 * Height of RichTextEditor control in CSS units.
 				 * <b>Note:</b> If the height property results in a value smaller than 200px, the minimum height of 200px will be applied.
+				 * <b>Note:</b> If the "autoresize" TinyMCE plugin is used, the height property is not taken into account.
 				 */
 				height: { type: "sap.ui.core.CSSSize", group: "Dimension", defaultValue: null },
 
@@ -161,11 +199,16 @@ sap.ui.define([
 				 * not an enumeration).
 				 *
 				 * <b>Notes:</b>
-				 * <ul><li>TinyMCE version 3 is no longer supported and cannot be used. If you set the property to TinyMCE, it will load TinyMCE version 4.</li>
-				 * <li>Any attempts to set this property after the first rendering will not
-				 * have any effect.</li></ul>
+				 * <ul><li>Any attempts to set this property after the first rendering will not
+				 * have any effect.</li>
+				 * <li>Usage of internal TinyMCE APIs is not recommended, since it might lead to issues upon TinyMCE version update.</li>
+				 * <li>TinyMCE version 3 and 4 are no longer supported and cannot be used.</li>
+				 * <li>TinyMCE 4 is out of support and by using it, application developers are accepting all the risks comming from that fact. In addition TinyMCE 4 will be removed in future releases.</li>
+				 * <li>TinyMCE 5 will be removed in future releases.</li>
+				 * <li>Have in mind when choosing a specific TinyMCE version that there might be differences in the support rules compared to UI5, therefore we might be forced to remove any TinyMCE version.</li>
+				 * </ul>
 				 */
-				editorType: { type: "string", group: "Misc", defaultValue: 'TinyMCE4' },
+				editorType: { type: "string", group: "Misc", defaultValue: 'TinyMCE' },
 
 				/**
 				 * Relative or absolute URL where the editor is available. Must be on the same server.
@@ -182,41 +225,49 @@ sap.ui.define([
 
 				/**
 				 * Determines whether the toolbar button group containing commands like Bold, Italic, Underline and Strikethrough is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupFontStyle: { type: "boolean", group: "Misc", defaultValue: true },
 
 				/**
 				 * Determines whether the toolbar button group containing text alignment commands is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupTextAlign: { type: "boolean", group: "Misc", defaultValue: true },
 
 				/**
 				 * Determines whether the toolbar button group containing commands like Bullets and Indentation is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupStructure: { type: "boolean", group: "Misc", defaultValue: true },
 
 				/**
 				 * Determines whether the toolbar button group containing commands like Font, Font Size and Colors is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupFont: { type: "boolean", group: "Misc", defaultValue: false },
 
 				/**
 				 * Determines whether the toolbar button group containing commands like Cut, Copy and Paste is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupClipboard: { type: "boolean", group: "Misc", defaultValue: true },
 
 				/**
 				 * Determines whether the toolbar button group containing commands like Insert Image and Insert Smiley is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupInsert: { type: "boolean", group: "Misc", defaultValue: false },
 
 				/**
 				 * Determines whether the toolbar button group containing commands like Create Link and Remove Link is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupLink: { type: "boolean", group: "Misc", defaultValue: false },
 
 				/**
 				 * Determines whether the toolbar button group containing commands like Undo and Redo is available. Changing this after the initial rendering will result in some visible redrawing.
+				 * Note: This property will not be synchronized with group configuration provided via the buttonGroups property or when groups are added on a later stage.
 				 */
 				showGroupUndo: { type: "boolean", group: "Misc", defaultValue: false },
 
@@ -243,17 +294,19 @@ sap.ui.define([
 
 				/**
 				 * Determines whether or not to use the legacy theme for the toolbar buttons. If this is set to false, the default theme for the editor will be used (which might change slightly with every update). The legacy theme has the disadvantage that not all functionality has its own icon, so using non default buttons might lead to invisible buttons with the legacy theme - use the default editor theme in this case.
+				 * @deprecated Since version 1.96.27
+				 * This property became obsolete after the deprecation of TinyMCE v3.
 				 */
-				useLegacyTheme: { type: "boolean", group: "Appearance", defaultValue: true },
+				useLegacyTheme: { type: "boolean", group: "Appearance", defaultValue: true, deprecated: true },
 
 				/**
 				 * An array of button configurations. These configurations contain the names of buttons as array in the property "buttons" and the name of the group in "name", they can also contain the "row" where the buttons should be placed, a "priority" and whether the buttons are "visible". See method addButtonGroup() for more details on the structure of the objects in this array.
-				 * <b>Note:</b> <code>buttonGroups</code> is a feature from the native editor. Its supported scope with <code>customToolbar</code> is limited up to the grouping- the user could turn on/off a whole group, but modifiyng buttons within a group is not possible. In order to achieve that functionality with <code>customToolbar</code>, the developer needs to turn the group off and instantiate their own <code>sap.m.Button</code>(s) with the desired functionality.
+				 * <b>Note:</b> <code>buttonGroups</code> is a feature from the native editor. Its supported scope with <code>customToolbar</code> is limited up to the grouping- the user could turn on/off a whole group, but modifying buttons within a group is not possible. In order to achieve that functionality with <code>customToolbar</code>, the developer needs to turn the group off and instantiate their own <code>sap.m.Button</code>(s) with the desired functionality.
 				 */
 				buttonGroups: {type: "object[]", group: "Behavior", defaultValue: [] },
 
 				/**
-				 * Determines whether a Fiori Toolbar is used instead of the TinyMCE default toolbar one. It is applied only when the EditorType is TinyMCE4 or TinyMCE5 and sap.m library is loaded.
+				 * Determines whether a Fiori Toolbar is used instead of the TinyMCE default toolbar one. It is applied only when the EditorType is TinyMCE5 or TinyMCE6 and sap.m library is loaded.
 				 * <b>Note:</b> The <code>customToolbar</code> property will have effect only on initial loading. Changing it during runtime will not affect the initially loaded toolbar.
 				 *
 				 * @since 1.48
@@ -287,7 +340,8 @@ sap.ui.define([
 				readyRecurring: {},
 
 				/**
-				 * This event is fired right before the TinyMCE instance is created and can be used to change the settings object that will be given to TinyMCE. The parameter "configuration" is the javascript oject that will be given to TinyMCE upon first instantiation. The configuration parameter contains a map that can be changed in the case of TinyMCE.
+				 * This event is fired right before the TinyMCE instance is created and can be used to change the settings object that will be given to TinyMCE. The parameter "configuration" is the javascript object that will be given to TinyMCE upon first instantiation. The configuration parameter contains a map that can be changed in the case of TinyMCE.
+				 * <b>Note:</b> In order to add plugins to the <code>RichTextEditor</code> control, you have to use the <code>addPlugin</code> method. Adding plugins through the settings object may lead to synchronizing issues between TinyMCE and <code>RichTextEditor</code> control.
 				 */
 				beforeEditorInit: {}
 			},
@@ -326,11 +380,10 @@ sap.ui.define([
 
 	// global tinymce
 	// Tells JSLint/SAPUI5 validation we need access to this global variable
-	/* eslint-disable strict -- (Will be adressed when moving to AMD syntax) */
 
 	/*
-		* The following code is editor-independent
-		*/
+	 * The following code is editor-independent
+	 */
 	// Counter for creating internal ids
 	RichTextEditor._lastId = 0;
 
@@ -341,16 +394,59 @@ sap.ui.define([
 	// Editor type entries for backwards compatibility
 	RichTextEditor.EDITORTYPE_TINYMCE4 = library.EditorType.TinyMCE4;
 	RichTextEditor.EDITORTYPE_TINYMCE5 = library.EditorType.TinyMCE5;
-
-	RichTextEditor.EDITORLOCATION_TINYMCE4 = "js/tiny_mce4/tinymce.min.js";
-	RichTextEditor.EDITORLOCATION_TINYMCE5 = "js/tiny_mce5/tinymce.min.js";
-
+	RichTextEditor.EDITORTYPE_TINYMCE6 = library.EditorType.TinyMCE6;
+
+	// default
+	RichTextEditor.EDITORTYPE_TINYMCE = library.EditorType.TinyMCE;
+
+	var EDITOR_LOCATION_MAPPING = {};
+
+	// default
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE] = "js/tiny_mce4/tinymce.min.js";
+
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE4] = "js/tiny_mce4/tinymce.min.js";
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE5] = "js/tiny_mce5/tinymce.min.js";
+	EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE6] = "js/tiny_mce6/tinymce.min.js";
+
+	RichTextEditor.DEFAULT_PLUGINS_TINYMCE5 = [
+		"emoticons",
+		"directionality",
+		"tabfocus",
+		"table",
+		"image",
+		"link",
+		"textcolor",
+		"colorpicker",
+		"textpattern",
+		"powerpaste"
+	];
+	RichTextEditor.DEFAULT_PLUGINS_TINYMCE6 = [
+		"emoticons",
+		"directionality",
+		"image",
+		"table",
+		"link",
+		"powerpaste"
+	];
+
+	// TinyMCE does not provide some of the regions/languages that our messagebundle has, therefore with this mapping, we are falling back to the ones provided
 	RichTextEditor.MAPPED_LANGUAGES_TINYMCE = {
-		"sh": "sr",
-		"ji": "yi",
+		"bg": "bg_BG",
+		"en_US": "en_GB",
+		"fr": "fr_FR",
+		"fr_CA": "fr_FR",
+		"hu": "hu_HU",
 		"in": "id",
 		"iw": "he",
-		"no": "nb"
+		"ji": "yi",
+		"ko": "ko_KR",
+		"no": "nb",
+		"pt": "pt_PT",
+		"sh": "sr",
+		"sl": "sl_SI",
+		"sv": "sv_SE",
+		"th": "th_TH"
+
 	};
 
 	RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE = {
@@ -387,6 +483,7 @@ sap.ui.define([
 		"gd": true,
 		"gl": true,
 		"he_IL": true,
+		"hi": true,
 		"hi_IN": true,
 		"hr": true,
 		"hu_HU": true,
@@ -445,6 +542,8 @@ sap.ui.define([
 		"ro_RO": true
 	};
 
+	RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE6 = RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5;
+
 	RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS = {
 		"zh": "CN",
 		"fr": "FR",
@@ -470,7 +569,38 @@ sap.ui.define([
 		"vi": "VN"
 	};
 
+	RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS_TINYMCE6 = {
+		"zh": "CN",
+		"fr": "FR",
+		"bn": "BD",
+		"bg": "BG",
+		"ka": "GE",
+		"he": "IL",
+		"hu": "HU",
+		"is": "IS",
+		"km": "KH",
+		"ko": "KR",
+		"ku": "IQ",
+		"ml": "IN",
+		"mn": "MN",
+		"nb": "NO",
+		"pt": "PT",
+		"si": "SI",
+		"sl": "SI",
+		"sv": "SE",
+		"th": "TH"
+	};
+
 	RichTextEditor.pLoadTinyMCE = null;
+	var oEditorMapping = {};
+
+	// default
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE] = RichTextEditor.EDITORTYPE_TINYMCE4;
+
+	// other versions
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE4] = RichTextEditor.EDITORTYPE_TINYMCE4;
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE5] = RichTextEditor.EDITORTYPE_TINYMCE5;
+	oEditorMapping[RichTextEditor.EDITORTYPE_TINYMCE6] = RichTextEditor.EDITORTYPE_TINYMCE6;
 
 	/**
 	 * Creates and returns a promise to load the given location as script url. Only the first invocation needs the
@@ -484,11 +614,10 @@ sap.ui.define([
 	 */
 	RichTextEditor.loadTinyMCE = function(sLocation) {
 		if (sLocation) {
-			var sRealLocation = sap.ui.resource('sap.ui.richtexteditor', sLocation),
+			var sRealLocation = sap.ui.require.toUrl('sap/ui/richtexteditor/' + sLocation),
 				oScriptElement = document.querySelector("#sapui5-tinyMCE"),
 				sLoadedLocation = oScriptElement ? oScriptElement.getAttribute("src") : "";
 
-
 			if (sRealLocation !== sLoadedLocation && RichTextEditor._iCountInstances === 1) {
 				delete window.tinymce;
 				delete window.TinyMCE;
@@ -496,8 +625,9 @@ sap.ui.define([
 			}
 
 			if (!RichTextEditor.pLoadTinyMCE) {
-				RichTextEditor.pLoadTinyMCE = new Promise(function(fnResolve, fnReject) {
-					includeScript(sRealLocation, "sapui5-tinyMCE", fnResolve, fnReject);
+				RichTextEditor.pLoadTinyMCE = includeScript({
+					id: "sapui5-tinyMCE",
+					url: sRealLocation
 				});
 			}
 		}
@@ -509,8 +639,8 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype.init = function() {
-		var sEditorType = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5 ?
-			RichTextEditor.EDITORTYPE_TINYMCE5 : RichTextEditor.EDITORTYPE_TINYMCE4;
+		var sEditorType = oEditorMapping[this.getEditorType()] || RichTextEditor.EDITORTYPE_TINYMCE;
+
 		this._bEditorCreated = false;
 		this._sTimerId = null;
 		RichTextEditor._iCountInstances++;
@@ -543,7 +673,7 @@ sap.ui.define([
 		}
 
 		if (this.isPropertyInitial("editorType")) {
-			Log.warning("If the editor is different than TinyMCE 4 or TinyMCE 5 the editorType property is automatically set to TinyMCE 4, because of the removal of TinyMCE 3");
+			Log.info("You are using the default value of the editorType which is subject to changes and might affect your application.");
 		}
 
 		this.onBeforeRenderingTinyMCE();
@@ -551,8 +681,6 @@ sap.ui.define([
 
 	RichTextEditor.prototype.onAfterRendering = function() {
 		this.onAfterRenderingTinyMCE();
-
-		this.getDomRef() && jQuery(this).toggleClass("sapUiRTELegacyTheme", this.getUseLegacyTheme());
 	};
 
 	/**
@@ -574,7 +702,6 @@ sap.ui.define([
 	 *
 	 * @returns {object} The native editor object (here: The TinyMCE editor instance)
 	 * @public
-	 * @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
 	 */
 	RichTextEditor.prototype.getNativeApi = function() {
 		return this.getNativeApiTinyMCE();
@@ -603,7 +730,7 @@ sap.ui.define([
 
 		this.setProperty("value", sValue, true);
 		sValue = this.getProperty("value");
-		if (this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE4) {
+		if (oEditorMapping[this.getEditorType()]) {
 			this.setValueTinyMCE(sValue);
 		} else {
 			this.reinitialize();
@@ -737,7 +864,7 @@ sap.ui.define([
 	 * RichTextEditor.
 	 *
 	 * @param {object|string} [mPlugin] The plugin ID/name or an object with property "name", containing the ID/name of the plugin
-	 * @returns {object} Control instance (for method chaining)
+	 * @returns {sap.ui.richtexteditor.RichTextEditor} Control instance (for method chaining)
 	 * @public
 	 */
 	RichTextEditor.prototype.addPlugin = function (mPlugin) {
@@ -762,7 +889,7 @@ sap.ui.define([
 	 * Removes the plugin with the given name/ID from the list of plugins to load
 	 *
 	 * @param {string} [sPluginName] The name/ID of the plugin to remove
-	 * @returns {object} Control instance (for method chaining)
+	 * @returns {sap.ui.richtexteditor.RichTextEditor} Control instance (for method chaining)
 	 * @public
 	 */
 	RichTextEditor.prototype.removePlugin = function(sPluginName) {
@@ -781,85 +908,114 @@ sap.ui.define([
 
 	/**
 	 * Adds a button group to the editor.
+	 * <b>Note</b>: Adding already existing group will not do anything. If a button group needs to be changed, it first needs to be removed and then added by providing its name or map object, containing its desired configuration.
 	 *
-	 * @param {object|string} [mGroup] Name/ID of a single button or object containing the group information
-	 * @param {string[]}   [mGroup.buttons] Array of name/IDs of the buttons in the group
-	 * @param {string}     [mGroup.name] Name/ID of the group.
-	 * @param {boolean}    [mGroup.visible=true] (optional) The priority of the button group. Lower priorities are added first.
-	 * @param {int}        [mGroup.row=0] (optional) Row number in which the button should be
-	 * @param {int}        [mGroup.priority=10] (optional) The priority of the button group. Lower priorities are added first.
-	 * @param {int}        [mGroup.customToolbarPriority] (optional) The priority of the button group in the custom toolbar. Each default group in the custom toolbar has a predefined <code>customToolbarPriority</code>. Lower priorities are added in first.
-	 * @returns {object} Control instance (for method chaining)
+	 * @param {object|string} [vGroup] Name/ID of a single button or object containing the group information
+	 * @param {string[]}   [vGroup.buttons] Array of name/IDs of the buttons in the group
+	 * @param {string}     [vGroup.name] Name/ID of the group.
+	 * @param {boolean}    [vGroup.visible=true] (optional) The priority of the button group. Lower priorities are added first.
+	 * @param {int}        [vGroup.row=0] (optional) Row number in which the button should be
+	 * @param {int}        [vGroup.priority=10] (optional) The priority of the button group. Lower priorities are added first.
+	 * @param {int}        [vGroup.customToolbarPriority] (optional) The priority of the button group in the custom toolbar. Each default group in the custom toolbar has a predefined <code>customToolbarPriority</code>. Lower priorities are added in first.
+	 * @returns {sap.ui.richtexteditor.RichTextEditor} Control instance (for method chaining)
 	 * @public
 	 */
-	RichTextEditor.prototype.addButtonGroup = function (mGroup) {
+	RichTextEditor.prototype.addButtonGroup = function (vGroup) {
 		var aGroups = this.getProperty("buttonGroups").slice(),
-			oCustomToolbar = this.getAggregation("_toolbarWrapper"),
-			bFullGroup = true;
+			oCustomToolbar = this.getAggregation("_toolbarWrapper");
+
+		if (!vGroup) {
+			return this;
+		}
 
 		// check if the group is already added
 		for (var i = 0; i < aGroups.length; ++i) {
-			if (mGroup === "string" && aGroups[i].name === mGroup || aGroups[i].name === mGroup.name) {
+			if (typeof vGroup === "string" && aGroups[i].name === vGroup || aGroups[i].name === vGroup.name) {
+				Log.warning("Trying to add already existing group: " + (typeof vGroup === "string" ? vGroup : vGroup.name) + ". Please remove the group first and then add it.", this);
 				return this;
 			}
 		}
 
-		//if mGroup is string internally we are creating a group object.
-		if (typeof mGroup === "string") {
-			bFullGroup = false;
-			switch (mGroup) {
+		// check for the mandatory parameters "vGroup.buttons" and "vGroup.name"
+		if (typeof vGroup === "object" && !(vGroup.name && Array.isArray(vGroup.buttons))) {
+			Log.error("The properties 'name' and 'buttons' are mandatory for the group configuration object. Please make sure they exist within the provided configuration.", this);
+			return this;
+		}
+
+		// check buttons in the vGroup.buttons property
+		if (typeof vGroup === "object" && !(Array.isArray(vGroup.buttons) && vGroup.buttons.length)) {
+			Log.error("The 'buttons' array of the provided group configuration object cannot be empty.", this);
+			return this;
+		}
+
+		//if vGroup is string and the group name is known to the RTE control, internally we are creating a group object.
+		if (typeof vGroup === "string") {
+			switch (vGroup) {
 				case "formatselect":
-					bFullGroup = true;
-					mGroup = {
+					vGroup = {
 						name: "formatselect",
 						buttons: ["formatselect"]
 					};
 					break;
 				case "styleselect":
-					bFullGroup = true;
-					mGroup = {
+					vGroup = {
 						name: "styleselect",
 						buttons: ["styleselect"],
 						customToolbarPriority: 40
 					};
 					break;
 				case "table":
-					bFullGroup = true;
-					mGroup = {
+					vGroup = {
 						name: "table",
 						buttons: ["table"],
 						customToolbarPriority: 90
 					};
 					break;
+				// TinyMCE 6
+				case "blocks":
+					vGroup = {
+						name: "blocks",
+						buttons: ["blocks"]
+					};
+					break;
+				case "styles":
+					vGroup = {
+						name: "styles",
+						buttons: ["styles"],
+						customToolbarPriority: 40
+					};
+					break;
 				default:
-					mGroup = {
+					vGroup = {
 						name: this._createId("buttonGroup"),
-						buttons: [mGroup]
+						buttons: [vGroup]
 					};
 			}
 		}
 
-		if (mGroup.visible === undefined) {
-			mGroup.visible = true;
-		}
-		if (mGroup.priority === undefined) {
-			mGroup.priority = 10;
-		}
-		if (mGroup.row === undefined) {
-			mGroup.row = 0;
-		}
+		// Check if any optional configuration parameters are missing
+		// and if so - update the group object with their default values.
+		this._checkAndUpdateGroupInfo(vGroup);
 
 		var aButtonGroups = this.getButtonGroups();
-		aButtonGroups.push(mGroup);
+		aButtonGroups.push(vGroup);
 		this.setProperty("buttonGroups", aButtonGroups);
 
 		if (oCustomToolbar) {
-			oCustomToolbar.addButtonGroupToContent(mGroup, bFullGroup);
+			// Provide the new configuration of the group to the custom toolbar
+			oCustomToolbar.addButtonGroupToContent(vGroup);
 		}
 
 		return this;
 	};
 
+	/**
+	 * Removes a button group from the editor.
+	 *
+	 * @param {string} [sGroupName] The name of the group to be removed.
+	 * @returns {sap.ui.richtexteditor.RichTextEditor} Control instance (for method chaining)
+	 * @public
+	 */
 	RichTextEditor.prototype.removeButtonGroup = function(sGroupName) {
 		var aGroups = this.getProperty("buttonGroups").slice(0),
 			oCustomToolbar = this.getAggregation("_toolbarWrapper");
@@ -868,7 +1024,6 @@ sap.ui.define([
 			if (aGroups[i].name === sGroupName) {
 				aGroups.splice(i, 1);
 				--i;
-
 				oCustomToolbar && oCustomToolbar.removeButtonGroup(sGroupName);
 			}
 		}
@@ -882,7 +1037,7 @@ sap.ui.define([
 	 * Sets the button groups to the editor.
 	 *
 	 * @param {array} [aGroups] Array of names or objects containing the group information
-	 * @returns {object} Control instance (for method chaining)
+	 * @returns {sap.ui.richtexteditor.RichTextEditor} Control instance (for method chaining)
 	 * @public
 	 */
 	RichTextEditor.prototype.setButtonGroups = function (aGroups) {
@@ -892,6 +1047,10 @@ sap.ui.define([
 			return this;
 		}
 
+		// There are some optional parameters in the groups config, which need to be checked and if not provided
+		// set a default values
+		aGroups.forEach(this._checkAndUpdateGroupInfo);
+
 		this.setProperty("buttonGroups", aGroups);
 
 		oCustomToolbar = this.getAggregation("_toolbarWrapper");
@@ -904,11 +1063,34 @@ sap.ui.define([
 
 	};
 
+	/**
+	 * Checks the group object for optional parameters and adds them with their default values in case they are missing
+	 * The properties that this method checks for are (default values are in brackets):
+	 * - visible (true)
+	 * - priority (10)
+	 * - row (0)
+	 *
+	 * @param {object} oGroup The group object that needs to be checked and modified if needed.
+	 */
+	RichTextEditor.prototype._checkAndUpdateGroupInfo = function (oGroup) {
+		// As those are optional parameters we are adding default values
+		// in case the application developers have not done so.
+		if (oGroup.visible === undefined) {
+			oGroup.visible = true;
+		}
+		if (oGroup.priority === undefined) {
+			oGroup.priority = 10;
+		}
+		if (oGroup.row === undefined) {
+			oGroup.row = 0;
+		}
+	};
+
 	/**
 	 * Sets the plugins to the editor.
 	 *
 	 * @param {array} [aPlugins] Array of names or objects containing the plugin information
-	 * @returns {object} Control instance (for method chaining)
+	 * @returns {sap.ui.richtexteditor.RichTextEditor} Control instance (for method chaining)
 	 * @public
 	 */
 	RichTextEditor.prototype.setPlugins = function (aPlugins) {
@@ -928,15 +1110,13 @@ sap.ui.define([
 			aPlugins.push({name: "lists"});
 		}
 
-		this.setProperty("plugins", aPlugins);
-
-		return this;
+		return this.setProperty("plugins", aPlugins);
 	};
 
 	/**
 	 * Make the button group with the given name (in)visible (if used before initialization of the editor)
 	 *
-	 * @param {string} [sGroupName] Name of the group of buttons to be chenged
+	 * @param {string} [sGroupName] Name of the group of buttons to be changed
 	 * @param {boolean} [bVisible=false] Whether or not this group should be visible
 	 * @returns {object} Control instance (for method chaining)
 	 * @private
@@ -968,31 +1148,31 @@ sap.ui.define([
 	};
 
 	RichTextEditor.prototype._setupToolbar = function () {
-		this.setPlugins([{
-			name: "emoticons"
-		}, {
-			name: "directionality"
-		}, {
-			name: "tabfocus"
-		}, {
-			name: "table"
-		}, {
-			name: "image"
-		}, {
-			name: "link"
-		}, {
-			name: "textcolor"
-		}, {
-			name: "colorpicker"
-		}, {
-			name: "textpattern"
-		}, {
-			name: "powerpaste"
-		}]);
+		var fnMapPluginList = function (aList) {
+			return aList.map(function(item) {
+				return { "name": item };
+			});
+		};
+
+		var mapping = {
+			"TinyMCE": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE5),
+			"TinyMCE4": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE5),
+			"TinyMCE5": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE5),
+			"TinyMCE6": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE6)
+		};
+
+		this.setPlugins(mapping[this.getEditorType()]);
+
+		var fontButtonGroupButtoNamesMapping = {
+			"TinyMCE": ["fontfamily", "fontsize", "forecolor", "backcolor"],
+			"TinyMCE4": ["fontselect", "fontsizeselect", "forecolor", "backcolor"],
+			"TinyMCE5": ["fontselect", "fontsizeselect", "forecolor", "backcolor"],
+			"TinyMCE6": ["fontfamily", "fontsize", "forecolor", "backcolor"]
+		};
 
 		this.setButtonGroups([{
 			name: "font-style",
-			visible: true,
+			visible: this.getShowGroupFontStyle(),
 			row: 0,
 			priority: 10,
 			customToolbarPriority: 20,
@@ -1001,16 +1181,14 @@ sap.ui.define([
 			]
 		}, {
 			name: "font",
-			visible: false,
+			visible: this.getShowGroupFont(),
 			row: 0,
 			priority: 30,
 			customToolbarPriority: 50,
-			buttons: [
-				"fontselect", "fontsizeselect", "forecolor", "backcolor"
-			]
+			buttons: fontButtonGroupButtoNamesMapping[this.getEditorType()]
 		}, {
 			name: "clipboard",
-			visible: true,
+			visible: this.getShowGroupClipboard(),
 			row: 1,
 			priority: 10,
 			customToolbarPriority: 110,
@@ -1019,23 +1197,16 @@ sap.ui.define([
 			]
 		}, {
 			name: "structure",
-			visible: true,
+			visible: this.getShowGroupStructure(),
 			row: 1,
 			priority: 20,
 			customToolbarPriority: 60,
 			buttons: [
 				"bullist", "numlist", "outdent", "indent"
 			]
-		}, {
-			name: "e-mail",
-			visible: false,
-			row: 1,
-			priority: 30,
-			customToolbarPriority: 10,
-			buttons: []
 		}, {
 			name: "undo",
-			visible: false,
+			visible: this.getShowGroupUndo(),
 			row: 1,
 			priority: 40,
 			customToolbarPriority: 100,
@@ -1044,7 +1215,7 @@ sap.ui.define([
 			]
 		}, {
 			name: "insert",
-			visible: false,
+			visible: this.getShowGroupInsert(),
 			row: 1,
 			priority: 50,
 			customToolbarPriority: 80,
@@ -1053,26 +1224,24 @@ sap.ui.define([
 			]
 		}, {
 			name: "link",
-			visible: false,
+			visible: this.getShowGroupLink(),
 			row: 1,
 			priority: 60,
 			customToolbarPriority: 70,
 			buttons: [
 				"link", "unlink"
 			]
-		}]);
-
-		this.addButtonGroup({
+		}, {
 			// Text Align group
 			name: "text-align",
-			visible: true,
+			visible: this.getShowGroupTextAlign(),
 			row: 0,
 			priority: 20,
 			customToolbarPriority: 30,
 			buttons: [
 				"alignleft", "aligncenter", "alignright", "alignjustify"
 			]
-		});
+		}]);
 	};
 
 	// the following functions shall not work after the first rendering
@@ -1080,22 +1249,28 @@ sap.ui.define([
 	 * Switches the editor type and sets the default settings for the editor.
 	 * All plugins and button groups should be set after this has been invoked
 	 *
-	 * @param {string} [sEditorType] Which editor type to be used (currently only TinyMCE 4 and 5)
-	 * @returns {object} Control instance (for method chaining)
+	 * @param {string} [sEditorType] Which editor type to be used (currently only TinyMCE 4, 5 and 6)
+	 * @returns {sap.ui.richtexteditor.RichTextEditor} Control instance (for method chaining)
 	 * @public
 	 */
 	RichTextEditor.prototype.setEditorType = function(sEditorType) {
-		var sEditorLocation;
+
 		if (!this._bEditorCreated) { // only supported before first rendering!
 			this.setProperty("editorType", sEditorType);
+			sEditorType = this.getEditorType();
 
-			sEditorLocation = sEditorType === RichTextEditor.EDITORTYPE_TINYMCE5 ? RichTextEditor.EDITORLOCATION_TINYMCE5 : RichTextEditor.EDITORLOCATION_TINYMCE4;
-			this.setEditorLocation(sEditorLocation);
+			this._setupToolbar();
 
-			if (sEditorType !== RichTextEditor.EDITORTYPE_TINYMCE4 && sEditorType !== RichTextEditor.EDITORTYPE_TINYMCE5) {
+			if (!oEditorMapping[sEditorType]) {
 				Log.error('TinyMCE3 is removed now due to security concerns, please do NOT use it anymore. The framework automatically will load TinyMCE4 since v1.60');
 			}
 
+			if (oEditorMapping[sEditorType] === "TinyMCE4") {
+				Log.error("TinyMCE version 4 is used as editor. This version is no longer supported by TinyMCE and will be removed in future releases, therefore using it is at your own risk. Please consider upgrading to TinyMCE version 6.");
+			} else if (oEditorMapping[sEditorType] === "TinyMCE5") {
+				Log.warning("TinyMCE version 5 is used as editor type. TinyMCE 5 will be depreacated with the next stable release of SAPUI5.");
+			}
+
 			this.initTinyMCE();
 		} else {
 			Log.error(
@@ -1143,7 +1318,7 @@ sap.ui.define([
 			sGroupSep = sButtonSeparator + sGroupSeparator + sButtonSeparator,
 			i, iLen, mGroup,
 			aOrderedGroups = {},
-			bIsTinyMCE5 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5,
+			bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6].includes(this.getEditorType()),
 			sButtonRows = "",
 			aButtonRows = [];
 
@@ -1171,7 +1346,7 @@ sap.ui.define([
 					continue;
 				}
 
-				if (bIsTinyMCE5) {
+				if (bIsTinyMCE5Or6) {
 					if (!sButtonRows) {
 						sButtonRows = "";
 					}
@@ -1185,7 +1360,7 @@ sap.ui.define([
 			}
 		}
 
-		if (bIsTinyMCE5) {
+		if (bIsTinyMCE5Or6) {
 			return sButtonRows;
 		}
 
@@ -1231,19 +1406,6 @@ sap.ui.define([
 		return aPluginNames.join(",");
 	};
 
-
-
-	/**
-	 * Checks whether TinyMCE has rendered its HTML
-	 *
-	 * @returns {boolean} Whether TinyMCE is rendered inside the page
-	 * @private
-	 */
-	RichTextEditor.prototype.tinyMCEReady = function() {
-		var iframe = (this._iframeId ? window.document.getElementById(this._iframeId) : null);
-		return !!iframe;
-	};
-
 	/**
 	 * Event handler being called when the text in the editor has changed
 	 *
@@ -1262,48 +1424,6 @@ sap.ui.define([
 		}
 	};
 
-	/**
-	 * Called on every keydown
-	 *
-	 * @param {jQuery.Event} [oEvent] The keyboard event
-	 * @returns {void}
-	 * @private
-	 */
-	RichTextEditor.prototype._tinyMCEKeyboardHandler = function(oEvent) {
-		var newIndex,
-			key = oEvent['keyCode'];
-
-		switch (key) {
-			case KeyCodes.TAB: /* 9 */
-				if (!this.$focusables.index(jQuery(oEvent.target)) === 0) { // if not on very first element
-					var index = this.$focusables.length - 1; // this element moves the focus into the iframe
-					this.$focusables.get(index).focus();
-				}
-				break;
-
-			case KeyCodes.ARROW_LEFT:
-			case KeyCodes.ARROW_UP:
-				newIndex = this.$focusables.index(jQuery(oEvent.target)) - 1;
-				if (newIndex === 0) {
-					newIndex = this.$focusables.length - 2;
-				}
-				this.$focusables.get(newIndex).focus();
-				break;
-
-			case KeyCodes.ARROW_RIGHT:
-			case KeyCodes.ARROW_DOWN:
-				newIndex = this.$focusables.index(jQuery(oEvent.target)) + 1;
-				if (newIndex === this.$focusables.length - 1) {
-					newIndex = 1;
-				}
-				this.$focusables.get(newIndex).focus();
-				break;
-
-			default:
-				// Do not react to other keys
-				break;
-		}
-	};
 	//////////////////////////// End editor section "TinyMCE" (All versions) ///////////////////////////
 
 	////////////////////////////////// Begin editor section "TinyMCE" /////////////////////////////////
@@ -1380,7 +1500,7 @@ sap.ui.define([
 	/**
 	 * Determines if a new TinyMCE instance should be loaded.
 	 * @private
-	 * @returns {boolean}
+	 * @returns {boolean} Whether tinyMCE should be loaded.
 	 */
 	RichTextEditor.prototype._shouldLoadTinyMCE = function () {
 		var sEditorType = this.getEditorType();
@@ -1394,6 +1514,8 @@ sap.ui.define([
 				return window.tinymce.majorVersion != "4";
 			case RichTextEditor.EDITORTYPE_TINYMCE5:
 				return window.tinymce.majorVersion != "5";
+			case RichTextEditor.EDITORTYPE_TINYMCE6:
+				return window.tinymce.majorVersion != "6";
 			default:
 				return false;
 		}
@@ -1404,9 +1526,11 @@ sap.ui.define([
 	 */
 	RichTextEditor.prototype.onBeforeRenderingTinyMCE = function() {
 		if (this._shouldLoadTinyMCE()) {
+			// fallback to tinymce 4 for now since the editorLocation property used to do so
+			var sEditorLocation = EDITOR_LOCATION_MAPPING[this.getEditorType()] || EDITOR_LOCATION_MAPPING[RichTextEditor.EDITORTYPE_TINYMCE4];
 			// Load TinyMCE component
 			this._tinyMCEStatus = EditorStatus.Loading;
-			this._pTinyMCELoaded = RichTextEditor.loadTinyMCE(this.getEditorLocation()).then(function() {
+			this._pTinyMCELoaded = RichTextEditor.loadTinyMCE(sEditorLocation).then(function() {
 				this._tinyMCEStatus = EditorStatus.Loaded;
 			}.bind(this));
 		} else {
@@ -1525,6 +1649,7 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype.setValueTinyMCE = function(sValue) {
+
 		switch (this._tinyMCEStatus) {
 			case EditorStatus.Initial:
 			case EditorStatus.Initializing:
@@ -1641,10 +1766,6 @@ sap.ui.define([
 			this._oEditor.save();
 		}
 
-		// Focus handling
-		var $Editor = jQuery(this._oEditor.getContainer());
-		$Editor.on('keydown', jQuery.proxy(this, this._tinyMCEKeyboardHandler));
-
 		// Make sure focus event is triggered, when body inside the iframe is focused
 		var $EditorIFrame = jQuery(oEditorIFrame),
 			$Body = jQuery(this._oEditor.getBody()),
@@ -1678,6 +1799,8 @@ sap.ui.define([
 			oToolbarDOM.setAttribute("aria-roledescription", oResourceBundle.getText("CUSTOM_TOOLBAR_ARIA_ROLEDESCRIPTION"));
 		}
 
+		this._oEditor.getContainer().classList.add("sapUiRteEditorContainer");
+
 		// TODO: make sure ready is fired if no reinitializations are pending
 		this.fireReadyTinyMCE();
 	};
@@ -1745,7 +1868,7 @@ sap.ui.define([
 	/**
 	 * Helper function for evaluating the textDirection of the tinyMCE's content config
 	 *
-	 * @returns {sString} Text direction
+	 * @returns {string} Text direction
 	 * @private
 	 */
 	RichTextEditor.prototype._getTextDirection = function() {
@@ -1781,12 +1904,29 @@ sap.ui.define([
 			sPluginsList = sPluginsList.replace(/(,powerpaste|powerpaste,)/gi, "");
 		}
 
+		var bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6].includes(this.getEditorType());
+		var bIsTinyMCE6 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6;
+
+		// since TinyMCE 6 plugins property format has changed
+		if (bIsTinyMCE6) {
+			sPluginsList = this.getPlugins().map(function(oPlugin) {
+				return oPlugin.name;
+			});
+		}
+
+		if (bIsTinyMCE6 && !this.getEditable()) {
+			sPluginsList = sPluginsList.filter(function(oPlugin) {
+				return oPlugin !== "powerpaste";
+			});
+		}
+
 		/*eslint-disable camelcase */
 		var oConfig = {
 			// The following line only covers the editor content, not the UI in general
+			height: "calc(100% - var(--_sap_ui_richtexteditor__toolbar_height))",
 			directionality: this._getTextDirection(),
 			selector: "[id='" + this._textAreaId + "']",
-			theme: this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5 ? "silver" : "modern",
+			theme: bIsTinyMCE5Or6 ? "silver" : "modern",
 			menubar: false,
 			language: this._getLanguageTinyMCE(),
 			browser_spellcheck: true,
@@ -1835,10 +1975,11 @@ sap.ui.define([
 	 * @returns {string} The language to be used for TinyMCE
 	 */
 	RichTextEditor.prototype._getLanguageTinyMCE = function() {
-		var oLocale = new sap.ui.core.Locale(Core.getConfiguration().getLanguage()),
+		var oLocale = new Locale(Core.getConfiguration().getLanguage()),
 			sLanguage = oLocale.getLanguage(),
 			sRegion = oLocale.getRegion(),
-			bIsTinyMCE5 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5,
+			bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6].includes(this.getEditorType()),
+			bIsTinyMCE6 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6,
 			sLangStr;
 
 		// Language mapping for old/fallback languages
@@ -1846,7 +1987,7 @@ sap.ui.define([
 
 		// Find default region, if region is not given
 		if (!sRegion) {
-			sRegion = RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS[sLanguage];
+			sRegion = bIsTinyMCE6 ?  RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS_TINYMCE6[sLanguage] : RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS[sLanguage];
 		}
 
 		sLangStr = sRegion ? sLanguage + "_" + sRegion.toUpperCase() : sLanguage;
@@ -1856,14 +1997,16 @@ sap.ui.define([
 			return sLangStr;
 		}
 
-		// If there is region language in the additional languages supported in TinyMCE5, return it
-		if (bIsTinyMCE5 && RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLangStr]) {
-			return sLangStr;
-		}
+		if (bIsTinyMCE5Or6) {
+			// If there is region language in the additional languages supported in TinyMCE5, return it
+			if (RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLangStr]) {
+				return sLangStr;
+			}
 
-		// If there is language in the additional languages supported in TinyMCE5, return it
-		if (bIsTinyMCE5 && RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLanguage]) {
-			return sLanguage;
+			// If there is language in the additional languages supported in TinyMCE5, return it
+			if (RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE5[sLanguage]) {
+				return sLanguage;
+			}
 		}
 
 		// If there is a some language, return it
@@ -1934,30 +2077,25 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype._registerWithPopupTinyMCE = function() {
-		var oBus = Core.getEventBus(),
-			bIsTinyMCE5 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5,
+		var bIsTinyMCE5Or6 = [RichTextEditor.EDITORTYPE_TINYMCE5, RichTextEditor.EDITORTYPE_TINYMCE6].includes(this.getEditorType()),
 			$Pop = this.$().closest("[data-sap-ui-popup]");
 
 		setTimeout(function() {
 			if ($Pop.length === 1) {
-				var sPopupId = $Pop.attr("data-sap-ui-popup"),
-					sDialogId = "tox-dialog-" + this.getId(),
-					oObject = { id: this._iframeId };
-
-				oBus.publish("sap.ui", "sap.ui.core.Popup.addFocusableContent-" + sPopupId, oObject);
+				var sDialogId = "tox-dialog-" + this.getId();
 
 				if (this._oEditor) {
 					this._oEditor.on('OpenWindow', function(oEvent) {
-						if (bIsTinyMCE5) { // sets our own id to the newly created dialog, because in TinyMCE5 doesn't set id
+						if (bIsTinyMCE5Or6) { // sets our own id to the newly created dialog, because in TinyMCE5 doesn't set id
 							jQuery(".tox-dialog[role='dialog']").attr("id", sDialogId);
 						}
-						var oObject = { id: bIsTinyMCE5 ? sDialogId : oEvent.win._id};
-						oBus.publish("sap.ui", "sap.ui.core.Popup.addFocusableContent-" + sPopupId, oObject);
+						var sSelector = "#" + (bIsTinyMCE5Or6 ? sDialogId : oEvent.win._id);
+						Popup.addExternalContent(sSelector, /* marked as selectable */ true);
 					});
 					this._oEditor.on('CloseWindow', function(oEvent) {
-						var oObject = { id: bIsTinyMCE5 ? sDialogId : oEvent.win._id};
-						oBus.publish("sap.ui", "sap.ui.core.Popup.removeFocusableContent-" + sPopupId, oObject);
-						if (bIsTinyMCE5) {
+						var sSelector = "#" + (bIsTinyMCE5Or6 ? sDialogId : oEvent.win._id);
+						Popup.removeExternalContent(sSelector, /* remove selectable */ true);
+						if (bIsTinyMCE5Or6) {
 							jQuery(".tox-dialog[role='dialog']").attr("id"); // remove our id
 						}
 					});
@@ -1977,9 +2115,7 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype._checkCustomToolbarRequirements = function() {
-		var bRequirementsFullfiled = this.getCustomToolbar() &&
-			(this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE4 || this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE5) &&
-			library.RichTextEditorHelper.bSapMLoaded;
+		var bRequirementsFullfiled = this.getCustomToolbar() && oEditorMapping[this.getEditorType()] && library.RichTextEditorHelper.bSapMLoaded;
 
 		this.$().toggleClass("sapUiRTEWithCustomToolbar", bRequirementsFullfiled);