@sapui5/sap.ui.richtexteditor 1.84.40 → 1.84.42

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

@@ -1,58 +1,54 @@
 /*!
  * SAPUI5
- * (c) Copyright 2009-2023 SAP SE. All rights reserved.
+ * (c) Copyright 2009-2024 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. Currently only
-	 * relevant for TinyMCE4
+	 * Describes the internal status of the editor component used inside the RichTextEditor control.
 	 *
 	 * @enum {string}
 	 * @private
 	 */
 	var EditorStatus = {
 		/**
-		 * Uses TinyMCE version 4 as editor
+		 * Uses TinyMCE as editor
 		 * @private
 		 */
 		Initial: "Initial",
@@ -84,16 +80,16 @@ sap.ui.define([
 	 * synchronizing the state of its internal controls with the current state of the selection in the editor
 	 * (bold, italics, font styles etc.).
 	 *
-	 * <h4>Limitations</h4>
+	 * <h4>Restrictions</h4>
 	 *
 	 * <b>Note: The <code>RichTextEditor</code> uses a third-party component and therefore
-	 * some additional limitations apply for its proper usage and support.
+	 * some additional restrictions apply for its proper usage and support.
 	 * For more information see the Preamble section in {@link topic:d4f3f1598373452bb73f2120930c133c sap.ui.richtexteditor}.
 	 * </b>
 	 *
 	 * <h3>Guidelines</h3>
 	 * <ul>
-	 * <li> The <code>RichTextEditor</code> should be used for desktop apps only. However, if it is essential for your use case, you can enable the mobile version of TinyMCE, whilst having in mind the limitations. For more information see the {@link topic:d4f3f1598373452bb73f2120930c133c sap.ui.richtexteditor documentation}.</li>
+	 * <li> The <code>RichTextEditor</code> should be used for desktop apps only. However, if it is essential for your use case, you can enable the mobile version of TinyMCE, whilst having in mind the restrictions. For more information see the {@link topic:d4f3f1598373452bb73f2120930c133c sap.ui.richtexteditor documentation}.</li>
 	 * <li> In order to be usable, the control needs a minimum width 17.5 rem and height of 12.5 rem.</li>
 	 * <li> Do not instantiate the <code>RichTextEditor</code> from a hidden container.</li>
 	 * <li> Make sure you destroy the <code>RichTextEditor</code> instance instead of hiding it and create a new one when you show it again.</li>
@@ -113,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.84.40 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, fontsize, 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
@@ -124,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: {
@@ -141,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.
@@ -151,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 },
 
@@ -162,9 +199,14 @@ 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' },
 
@@ -183,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 },
 
@@ -232,7 +282,7 @@ sap.ui.define([
 				required: { type: "boolean", group: "Misc", defaultValue: false },
 
 				/**
-				 * Determines whether to run the HTML sanitizer once the value (HTML markup) is applied or not. To configure allowed URLs please use the whitelist API via <code>jQuery.sap.addUrlWhitelist</code>
+				 * Determines whether to run the HTML sanitizer once the value (HTML markup) is applied or not. To configure allowed URLs please use the validator API via {@link module:sap/base/security/URLListValidator#add URLListValidator API}.
 				 */
 				sanitizeValue: { type: "boolean", group: "Misc", defaultValue: true },
 
@@ -244,16 +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.84.40
+				 * 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 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: [] },
+				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 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 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: {}
 			},
@@ -311,7 +365,7 @@ sap.ui.define([
 			associations: {
 				/**
 				 * Association to controls / IDs which label this control (see WAI-ARIA attribute <code>aria-labelledby</code>).
-				 * @since 1.76.0
+				 * @since 1.84.40
 				 */
 				ariaLabelledBy: {
 					type: "sap.ui.core.Control",
@@ -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;
 
@@ -340,98 +393,151 @@ sap.ui.define([
 
 	// Editor type entries for backwards compatibility
 	RichTextEditor.EDITORTYPE_TINYMCE4 = library.EditorType.TinyMCE4;
-
-	RichTextEditor.EDITORLOCATION_TINYMCE4 = "js/tiny_mce4/tinymce.min.js";
-
-	if (Core.getConfiguration().getDebug()) {
-		RichTextEditor.EDITORLOCATION_TINYMCE4 = "js/tiny_mce4/tinymce.js";
-	}
-
-	RichTextEditor.MAPPED_LANGUAGES_TINYMCE4 = {
-		"sh": "sr",
-		"ji": "yi",
+	RichTextEditor.EDITORTYPE_TINYMCE6 = library.EditorType.TinyMCE6;
+
+	// default
+	RichTextEditor.EDITORTYPE_TINYMCE = library.EditorType.TinyMCE4;
+
+	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_TINYMCE6] = "js/tiny_mce6/tinymce.min.js";
+
+	RichTextEditor.DEFAULT_PLUGINS_TINYMCE4 = [
+		"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 = {
+		"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_TINYMCE4 = {
+	RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE = {
 		"en": true, // Default
-		"ar": true,
+		"af_ZA": true,
 		"ar_SA": true,
-		"hy": true,
+		"ar": true,
 		"az": true,
-		"eu": true,
 		"be": true,
+		"bg_BG": true,
 		"bn_BD": true,
 		"bs": true,
-		"bg_BG": true,
 		"ca": true,
-		"zh_CN": true,
-		"zh_TW": true,
-		"hr": true,
+		"cs_CZ": true,
 		"cs": true,
+		"cy": true,
 		"da": true,
+		"de_AT": true,
+		"de": true,
 		"dv": true,
-		"nl": true,
+		"el": true,
 		"en_CA": true,
 		"en_GB": true,
+		"es_MX": true,
+		"es": true,
 		"et": true,
-		"fo": true,
+		"eu": true,
+		"fa_IR": true,
+		"fa": true,
 		"fi": true,
+		"fo": true,
 		"fr_FR": true,
+		"ga": true,
 		"gd": true,
 		"gl": true,
-		"ka_GE": true,
-		"de": true,
-		"de_AT": true,
-		"el": true,
 		"he_IL": true,
+		"hi": true,
 		"hi_IN": true,
+		"hr": true,
 		"hu_HU": true,
-		"is_IS": true,
+		"hy": true,
 		"id": true,
+		"is_IS": true,
 		"it": true,
 		"ja": true,
+		"ka_GE": true,
+		"kab": true,
 		"kk": true,
 		"km_KH": true,
 		"ko_KR": true,
-		"ku": true,
 		"ku_IQ": true,
-		"lv": true,
-		"lt": true,
+		"ku": true,
 		"lb": true,
-		"ml": true,
+		"lt": true,
+		"lv": true,
 		"ml_IN": true,
+		"ml": true,
 		"mn_MN": true,
 		"nb_NO": true,
-		"fa": true,
-		"fa_IR": true,
+		"nl": true,
 		"pl": true,
 		"pt_BR": true,
 		"pt_PT": true,
 		"ro": true,
 		"ru": true,
-		"ru@petr1708": true,
-		"sr": true,
 		"si_LK": true,
 		"sk": true,
 		"sl_SI": true,
-		"es": true,
-		"es_MX": true,
+		"sl": true,
+		"sr": true,
 		"sv_SE": true,
-		"tg": true,
-		"ta": true,
 		"ta_IN": true,
-		"tt": true,
+		"ta": true,
+		"tg": true,
 		"th_TH": true,
 		"tr_TR": true,
+		"tr": true,
+		"tt": true,
 		"ug": true,
-		"uk": true,
 		"uk_UA": true,
-		"vi": true,
+		"uk": true,
+		"uz": true,
 		"vi_VN": true,
-		"cy": true
+		"vi": true,
+		"zh_CN": true,
+		"zh_TW": true
+	};
+
+	RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE6 = {
+		"eo": true,
+		"es_ES": true,
+		"it_IT": true,
+		"ro_RO": true
 	};
 
 	RichTextEditor.SUPPORTED_LANGUAGES_DEFAULT_REGIONS = {
@@ -459,7 +565,37 @@ 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_TINYMCE6] = RichTextEditor.EDITORTYPE_TINYMCE6;
 
 	/**
 	 * Creates and returns a promise to load the given location as script url. Only the first invocation needs the
@@ -473,7 +609,7 @@ 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") : "";
 
@@ -485,8 +621,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
 				});
 			}
 		}
@@ -498,6 +635,8 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype.init = function() {
+		var sEditorType = oEditorMapping[this.getEditorType()] || RichTextEditor.EDITORTYPE_TINYMCE;
+
 		this._bEditorCreated = false;
 		this._sTimerId = null;
 		RichTextEditor._iCountInstances++;
@@ -510,7 +649,8 @@ sap.ui.define([
 		this._textAreaDom.style.height = "100%";
 		this._textAreaDom.style.width = "100%";
 
-		this.setEditorType(library.EditorType.TinyMCE4);
+		this.setEditorType(sEditorType);
+
 		this._setupToolbar();
 	};
 
@@ -529,16 +669,15 @@ sap.ui.define([
 		}
 
 		if (this.isPropertyInitial("editorType")) {
-			Log.warning("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.onBeforeRenderingTinyMCE4();
+		this.onBeforeRenderingTinyMCE();
 	};
 
 	RichTextEditor.prototype.onAfterRendering = function() {
-		this.onAfterRenderingTinyMCE4();
+		this.onAfterRenderingTinyMCE();
 
-		this.getDomRef() && jQuery(this).toggleClass("sapUiRTELegacyTheme", this.getUseLegacyTheme());
 	};
 
 	/**
@@ -550,7 +689,7 @@ sap.ui.define([
 	RichTextEditor.prototype.reinitialize = function() {
 		// Make sure reinitialization does not happen because several settings are done
 		clearTimeout(this._iReinitTimeout);
-		this._iReinitTimeout = window.setTimeout(this.reinitializeTinyMCE4.bind(this), 0);
+		this._iReinitTimeout = window.setTimeout(this.reinitializeTinyMCE.bind(this), 0);
 	};
 
 
@@ -560,15 +699,14 @@ 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.getNativeApiTinyMCE4();
+		return this.getNativeApiTinyMCE();
 	};
 
 	RichTextEditor.prototype.exit = function() {
 		clearTimeout(this._reinitDelay);
-		this.exitTinyMCE4();
+		this.exitTinyMCE();
 		RichTextEditor._iCountInstances--;
 	};
 
@@ -579,7 +717,7 @@ sap.ui.define([
 
 		if (this.getSanitizeValue()) {
 			Log.trace("sanitizing HTML content for " + this);
-			// images are using the URL whitelist support
+			// images are using the URL validator support
 			sValue = sanitizeHTML(sValue);
 		}
 
@@ -589,9 +727,8 @@ sap.ui.define([
 
 		this.setProperty("value", sValue, true);
 		sValue = this.getProperty("value");
-		var methodName = "setValue" + this.getEditorType();
-		if (this[methodName] && typeof this[methodName] === "function") {
-			this[methodName].call(this, sValue);
+		if (oEditorMapping[this.getEditorType()]) {
+			this.setValueTinyMCE(sValue);
 		} else {
 			this.reinitialize();
 		}
@@ -630,7 +767,7 @@ sap.ui.define([
 	 * Helper function for show/hide of each button group
 	 *
 	 * @param {boolean} [bShow] Boolean value, indicating if the group should be shown or hidden
- 	 * @param {object} [mSettings] Settings object
+	 * @param {object} [mSettings] Settings object
 	 * @returns {object} Control instance (for method chaining)
 	 * @private
 	 */
@@ -710,7 +847,7 @@ sap.ui.define([
 	RichTextEditor.prototype.setCustomToolbar = function (bEnabled) {
 		// switching the custom toolbar on/off after init may cause performance issues, backward incompatibility
 		// and TinyMCE life-cycle management
-		if (!this._tinyMCE4Status || this._tinyMCE4Status === EditorStatus.Initial) { // only supported before first rendering!
+		if (!this._tinyMCEStatus || this._tinyMCEStatus === EditorStatus.Initial) { // only supported before first rendering!
 			this.setProperty("customToolbar", bEnabled);
 		} else {
 			Log.error("Cannot set customToolbar property to " + bEnabled + " after initialization.", this);
@@ -724,7 +861,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) {
@@ -749,7 +886,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) {
@@ -768,85 +905,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");
@@ -855,7 +1021,6 @@ sap.ui.define([
 			if (aGroups[i].name === sGroupName) {
 				aGroups.splice(i, 1);
 				--i;
-
 				oCustomToolbar && oCustomToolbar.removeButtonGroup(sGroupName);
 			}
 		}
@@ -869,7 +1034,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) {
@@ -879,6 +1044,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");
@@ -891,11 +1060,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) {
@@ -915,15 +1107,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
@@ -955,31 +1145,29 @@ 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_TINYMCE6), // to
+			"TinyMCE4": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE4),
+			"TinyMCE6": fnMapPluginList(RichTextEditor.DEFAULT_PLUGINS_TINYMCE6)
+		};
+
+		this.setPlugins(mapping[this.getEditorType()]);
+
+		var fontButtonGroupButtoNamesMapping = {
+			"TinyMCE": ["fontfamily", "fontsize", "forecolor", "backcolor"],
+			"TinyMCE4": ["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,
@@ -988,16 +1176,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,
@@ -1006,23 +1192,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,
@@ -1031,7 +1210,7 @@ sap.ui.define([
 			]
 		}, {
 			name: "insert",
-			visible: false,
+			visible: this.getShowGroupInsert(),
 			row: 1,
 			priority: 50,
 			customToolbarPriority: 80,
@@ -1040,26 +1219,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
@@ -1067,22 +1244,27 @@ 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 3 and 4)
-	 * @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) {
-		if (!this._bEditorCreated) { // only supported before first rendering!
 
+		if (!this._bEditorCreated) { // only supported before first rendering!
 			this.setProperty("editorType", sEditorType);
+			sEditorType = this.getEditorType();
 
-			this.setEditorLocation(RichTextEditor.EDITORLOCATION_TINYMCE4);
+			this._setupToolbar();
 
-			if (sEditorType !== library.EditorType.TinyMCE4 ) {
+			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');
 			}
 
-			this.initTinyMCE4();
+			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.");
+			}
+
+			this.initTinyMCE();
 		} else {
 			Log.error(
 				"editorType property cannot be set after the RichtextEditor has been rendered"
@@ -1114,11 +1296,11 @@ sap.ui.define([
 	/////////////////////////// Begin editor section "TinyMCE" (All versions) //////////////////////////
 
 	/**
-	 * Creates the ButtonRow strings for TinyMCE
+	 * Creates the ButtonRow for TinyMCE
 	 *
 	 * @param {string} [sButtonSeparator] Separator that is used to separate button entries
 	 * @param {string} [sGroupSeparator]  Separator that is used to separate groups of button entries
-	 * @returns {string[]} An array of strings with TinyMCE specific button format
+	 * @returns {string[]|string} Specific button format. Return an array of strings for TinyMCE 4 and single string for TinyMCE 5
 	 * @private
 	 */
 	RichTextEditor.prototype._createButtonRowsTinyMCE = function(sButtonSeparator, sGroupSeparator) {
@@ -1129,6 +1311,8 @@ sap.ui.define([
 			sGroupSep = sButtonSeparator + sGroupSeparator + sButtonSeparator,
 			i, iLen, mGroup,
 			aOrderedGroups = {},
+			bIsTinyMCE6 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6,
+			sButtonRows = "",
 			aButtonRows = [];
 
 		// Order Groups by priority
@@ -1155,13 +1339,24 @@ sap.ui.define([
 					continue;
 				}
 
-				if (!aButtonRows[iRow]) {
-					aButtonRows[iRow] = "";
+				if (bIsTinyMCE6) {
+					if (!sButtonRows) {
+						sButtonRows = "";
+					}
+					sButtonRows += mGroup.buttons.join(sButtonSeparator) + sGroupSep;
+				} else {
+					if (!aButtonRows[iRow]) {
+						aButtonRows[iRow] = "";
+					}
+					aButtonRows[iRow] += mGroup.buttons.join(sButtonSeparator) + sGroupSep;
 				}
-				aButtonRows[iRow] += mGroup.buttons.join(sButtonSeparator) + sGroupSep;
 			}
 		}
 
+		if (bIsTinyMCE6) {
+			return sButtonRows;
+		}
+
 		for (i = 0; i < aButtonRows.length; ++i) {
 			if (aButtonRows[i] === null) {
 				continue;
@@ -1204,38 +1399,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;
-	};
-
-
-	/**
-	 * TinyMCE-specific value setter that avoids re-rendering
-	 *
-	 * @param {string} [sValue] The content for the editor
-	 * @returns {void}
-	 */
-	RichTextEditor.prototype.setValueTinyMCE = function(sValue) {
-		if (this._bEditorCreated) {
-			jQuery(document.getElementById(this._textAreaId)).text(sValue);
-			this.setContentTinyMCE();
-		} else {
-			this.setProperty("value", sValue, true);
-			if (this.getDomRef()) {
-				jQuery(document.getElementById(this._textAreaId)).val(sValue);
-			}
-		}
-	};
-
 	/**
 	 * Event handler being called when the text in the editor has changed
 	 *
@@ -1244,98 +1407,35 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype.onTinyMCEChange = function(oCurrentInst) {
-		var oldVal = this.getValue(),
-			newVal = oCurrentInst.getContent();
+		var sPrevValue = this.getValue(),
+			sContent = oCurrentInst.getContent(),
+			sNewValue = this.getSanitizeValue() ? sanitizeHTML(sContent) : sContent;
 
-		if ((oldVal !== newVal) && !this.bExiting) {
-			this.setProperty("value", newVal, true); // suppress rerendering
-			this.fireChange({ oldValue: oldVal, newValue: newVal });
+		if ((sPrevValue !== sNewValue) && !this.bExiting) {
+			this.setProperty("value", sNewValue, true); // suppress rerendering
+			this.fireChange({ oldValue: sPrevValue, newValue: sNewValue });
 		}
 	};
 
-	/**
-	 * 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;
-		}
-	};
-
-
-	/**
-	 * Map languages that are incorrectly assigned or fallback if languages do not work
-	 * TODO: Change this when more languages are supported by TinyMCE
-	 *
-	 * @returns {string} The language to be used for TinyMCE
-	 */
-	RichTextEditor.prototype._getLanguageTinyMCE = function() {
-		var oLocale = new sap.ui.core.Locale(Core.getConfiguration().getLanguage()),
-			sLanguage = oLocale.getLanguage(),
-			sRegion = oLocale.getRegion(),
-			mLangFallback = {
-				"zh": "zh-" + (sRegion ? sRegion.toLowerCase() : "cn"),
-				"sh": "sr",
-				"hi": "en" // Hindi is not supported by tinyMCE - fallback to en to show something at least
-			};
-
-		sLanguage = mLangFallback[sLanguage] ? mLangFallback[sLanguage] : sLanguage;
-
-		return sLanguage;
-	};
 	//////////////////////////// End editor section "TinyMCE" (All versions) ///////////////////////////
 
-	////////////////////////////////// Begin editor section "TinyMCE4" /////////////////////////////////
+	////////////////////////////////// Begin editor section "TinyMCE" /////////////////////////////////
 
 
 	/**
-	 * Called when the editor type is set to TinyMCE4
+	 * Called when the editor type is set to TinyMCE
 	 *
 	 * @private
 	 */
-	RichTextEditor.prototype.initTinyMCE4 = function() {
-		// TinyMCE 4 instance
+	RichTextEditor.prototype.initTinyMCE = function() {
+		// TinyMCE instance
 		this._oEditor = null;
 
-		// Status of the TinyMCE4 component
-		this._tinyMCE4Status = EditorStatus.Initial;
+		// Status of the TinyMCE component
+		this._tinyMCEStatus = EditorStatus.Initial;
 
 		// Bound resize method, so it can be given to the Resizehandler with correct this-reference
-		this._boundResizeEditorTinyMCE4 = this._resizeEditorTinyMCE4.bind(this);
+		this._boundResizeEditorTinyMCE = this._resizeEditorTinyMCE.bind(this);
 
 		// If initialization is currently pending, but has not yet been requested from TinyMCE, we ca avoid calling
 		// it again without any changes
@@ -1346,25 +1446,24 @@ sap.ui.define([
 	};
 
 	/**
-	 * Called when the editor type is set from TinyMCE4 to something else or the control is destroyed
+	 * Called when the editor type is set from TinyMCE to something else or the control is destroyed
 	 *
 	 * @private
 	 */
-	RichTextEditor.prototype.exitTinyMCE4 = function() {
+	RichTextEditor.prototype.exitTinyMCE = function() {
 		this._bUnloading = true;
 
 		ResizeHandler.deregister(this._resizeHandlerId);
 		this._resizeHandlerId = null;
 
-		this._removeEditorTinyMCE4();
-
+		this._removeEditorTinyMCE();
 	};
 
 	/**
 	 * @private
 	 */
-	RichTextEditor.prototype._removeEditorTinyMCE4 = function() {
-		switch (this._tinyMCE4Status) {
+	RichTextEditor.prototype._removeEditorTinyMCE = function() {
+		switch (this._tinyMCEStatus) {
 			case EditorStatus.Initial:
 			case EditorStatus.Loading:
 			case EditorStatus.Loaded:
@@ -1372,13 +1471,13 @@ sap.ui.define([
 				break;
 
 			case EditorStatus.Initializing:
-				this._pTinyMCE4Initialized.then(this._removeEditorTinyMCE4.bind(this, this._oEditor));
+				this._pTinyMCEInitialized.then(this._removeEditorTinyMCE.bind(this, this._oEditor));
 				break;
 
 			case EditorStatus.Ready:
 				this._oEditor.remove();
-				this._tinyMCE4Status = EditorStatus.Destroyed;
-				this._boundResizeEditorTinyMCE4 = null;
+				this._tinyMCEStatus = EditorStatus.Destroyed;
+				this._boundResizeEditorTinyMCE = null;
 				this._oEditor = null;
 				break;
 
@@ -1386,58 +1485,79 @@ sap.ui.define([
 				// Ignored as the editor is already destroyed.
 				break;
 			default:
-				Log.error("Unknown TinyMCE4 status: " + this._tinyMCE4Status);
+				Log.error("Unknown TinyMCE status: " + this._tinyMCEStatus);
 				break;
 		}
 	};
 
+	/**
+	 * Determines if a new TinyMCE instance should be loaded.
+	 * @private
+	 * @returns {boolean} Whether tinyMCE should be loaded.
+	 */
+	RichTextEditor.prototype._shouldLoadTinyMCE = function () {
+		var sEditorType = this.getEditorType();
+
+		if (!window.tinymce) {
+			return true;
+		}
+
+		switch (sEditorType) {
+			case RichTextEditor.EDITORTYPE_TINYMCE4:
+				return window.tinymce.majorVersion != "4";
+			case RichTextEditor.EDITORTYPE_TINYMCE6:
+				return window.tinymce.majorVersion != "6";
+			default:
+				return false;
+		}
+	};
 
 	/**
 	 * @private
 	 */
-	RichTextEditor.prototype.onBeforeRenderingTinyMCE4 = function() {
-		if (!window.tinymce || window.tinymce.majorVersion != "4") {
+	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._tinyMCE4Status = EditorStatus.Loading;
-			this._pTinyMCE4Loaded = RichTextEditor.loadTinyMCE(this.getEditorLocation()).then(function() {
-				this._tinyMCE4Status = EditorStatus.Loaded;
+			this._tinyMCEStatus = EditorStatus.Loading;
+			this._pTinyMCELoaded = RichTextEditor.loadTinyMCE(sEditorLocation).then(function() {
+				this._tinyMCEStatus = EditorStatus.Loaded;
 			}.bind(this));
 		} else {
-			this._pTinyMCE4Loaded = Promise.resolve();
-			this._tinyMCE4Status = EditorStatus.Loaded;
+			this._pTinyMCELoaded = Promise.resolve();
+			this._tinyMCEStatus = EditorStatus.Loaded;
 		}
 	};
 
-
-
 	/**
 	 * @private
 	 */
-	RichTextEditor.prototype.onAfterRenderingTinyMCE4 = function() {
+	RichTextEditor.prototype.onAfterRenderingTinyMCE = function() {
 		var oDomRef = this.getDomRef();
 
-		if (!window.tinymce || window.tinymce.majorVersion != "4") {
+		if (this._shouldLoadTinyMCE()) {
 			// TinyMCE not loaded yet. try again later...
-			this._pTinyMCE4Loaded.then(this.onAfterRenderingTinyMCE4.bind(this));
+			this._pTinyMCELoaded.then(this.onAfterRenderingTinyMCE.bind(this));
 		} else if (oDomRef) {
 
-			switch (this._tinyMCE4Status) {
+			switch (this._tinyMCEStatus) {
 				case EditorStatus.Initializing:
 					oDomRef.appendChild(this._textAreaDom);
 					break;
 				case EditorStatus.Loaded:
 				case EditorStatus.Loading:
 					this.getDomRef().appendChild(this._textAreaDom);
-					this.reinitializeTinyMCE4();
+					this.reinitializeTinyMCE();
 					break;
 				case EditorStatus.Ready:
 					// We need to reinitialize TinyMCE so changes will be shown.
 					oDomRef.appendChild(this._textAreaDom);
-					this.reinitializeTinyMCE4();
+					this.reinitializeTinyMCE();
 					break;
 
 				default:
-					Log.error("Unknown TinyMCE4 status: " + this._tinyMCE4Status);
+					Log.error("Unknown TinyMCE status: " + this._tinyMCEStatus);
 					break;
 			}
 		}
@@ -1445,12 +1565,12 @@ sap.ui.define([
 
 
 	/**
-	 * TinyMCE4 specific reinitialize method
+	 * TinyMCE specific reinitialize method
 	 * The TinyMCE instance is destroyed and recreated with new configuration values.
 	 *
 	 * @private
 	 */
-	RichTextEditor.prototype.reinitializeTinyMCE4 = function() {
+	RichTextEditor.prototype.reinitializeTinyMCE = function() {
 		if (this._bInitializationPending || this._bUnloading) {
 			// Do nothing if an initialization is currently waiting to happen or if the control has already been destroyed...
 			return;
@@ -1462,24 +1582,24 @@ sap.ui.define([
 				this._oEditor.remove();
 			}
 
-			this._initializeTinyMCE4();
+			this._initializeTinyMCE();
 		}.bind(this);
 
-		switch (this._tinyMCE4Status) {
+		switch (this._tinyMCEStatus) {
 			case EditorStatus.Initial:
 				// Ignored as the control is not rendered yet.
 				break;
 
 			case EditorStatus.Loading:
 				this._bInitializationPending = true;
-				this._pTinyMCE4Loaded.then(fnReinitialize);
+				this._pTinyMCELoaded.then(fnReinitialize);
 				break;
 
 			case EditorStatus.Initializing:
-				// We are currently waiting for the initialization of TinyMCE4 to complete, we have to do it again to
+				// We are currently waiting for the initialization of TinyMCE to complete, we have to do it again to
 				// make sure the latest changes will be reflected
 				this._bInitializationPending = true;
-				this._pTinyMCE4Initialized.then(fnReinitialize);
+				this._pTinyMCEInitialized.then(fnReinitialize);
 				break;
 
 			case EditorStatus.Loaded:
@@ -1492,35 +1612,36 @@ sap.ui.define([
 				break;
 
 			default:
-				Log.error("Unknown TinyMCE4 status: " + this._tinyMCE4Status);
+				Log.error("Unknown TinyMCE status: " + this._tinyMCEStatus);
 				break;
 		}
 	};
 
 	/**
-	 * TinyMCE4 specific getNativeApi method
+	 * TinyMCE specific getNativeApi method
 	 * Returns the editor instance for this control instance if available
 	 *
 	 * <b>Note:</b> This is the only official way of accessing TinyMCE. Accessing the third-party API through
 	 * the window object may lead to backward incompatibility with later updates. Such cases will not be supported.
 	 *
-	 * @returns {object} The TinyMCE4 editor instance
+	 * @returns {object} The TinyMCE editor instance
 	 * @private
 	 */
-	RichTextEditor.prototype.getNativeApiTinyMCE4 = function() {
+	RichTextEditor.prototype.getNativeApiTinyMCE = function() {
 		return this._oEditor;
 	};
 
 	/**
-	 * TinyMCE4 specific setValue method
+	 * TinyMCE specific setValue method
 	 * Loads the content set in the controls property into the TinyMCE editor instance and does
 	 * the necessary post processing
 	 *
 	 * @param {string} [sValue] Content, already sanitized if sanitizer is activated
 	 * @private
 	 */
-	RichTextEditor.prototype.setValueTinyMCE4 = function(sValue) {
-		switch (this._tinyMCE4Status) {
+	RichTextEditor.prototype.setValueTinyMCE = function(sValue) {
+
+		switch (this._tinyMCEStatus) {
 			case EditorStatus.Initial:
 			case EditorStatus.Initializing:
 			case EditorStatus.Loading:
@@ -1542,24 +1663,24 @@ sap.ui.define([
 				break;
 
 			default:
-				Log.error("Unknown TinyMCE4 status: " + this._tinyMCE4Status);
+				Log.error("Unknown TinyMCE status: " + this._tinyMCEStatus);
 				break;
 		}
 	};
 
 
-	RichTextEditor.prototype._initializeTinyMCE4 = function() {
-		this._pTinyMCE4Initialized = new Promise(function(fnResolve, fnReject) {
+	RichTextEditor.prototype._initializeTinyMCE = function() {
+		this._pTinyMCEInitialized = new Promise(function(fnResolve, fnReject) {
 			this._bInitializationPending = false;
-			this._tinyMCE4Status = EditorStatus.Initializing;
-			this._textAreaDom.value = this._patchTinyMCE4Value(this.getValue());
-			window.tinymce.init(this._createConfigTinyMCE4(function() {
-				this._tinyMCE4Status = EditorStatus.Ready;
+			this._tinyMCEStatus = EditorStatus.Initializing;
+			this._textAreaDom.value = this._patchTinyMCEValue(this.getValue());
+			window.tinymce.init(this._createConfigTinyMCE(function() {
+				this._tinyMCEStatus = EditorStatus.Ready;
 				// Wee need to add a timeout here, as the promise resolves before other asynchronous tasks like the
-				// load-events, which leads to TinyMCE4 still trying to operate on its DOM after the promise is resolved.
+				// load-events, which leads to TinyMCE still trying to operate on its DOM after the promise is resolved.
 				setTimeout(function() {
 					if (!this._bInitializationPending) {
-						this._onAfterReadyTinyMCE4();
+						this._onAfterReadyTinyMCE();
 					}
 					fnResolve();
 				}.bind(this), 0);
@@ -1568,18 +1689,18 @@ sap.ui.define([
 	};
 
 	/**
-	 * Patches the value which would be inserted in TinyMCE4.
+	 * Patches the value which would be inserted in TinyMCE.
 	 *
 	 * If the value starts with an HTML comment, then tinyMCE
 	 * throws an exception and its init hook is not executed.
 	 *
 	 * TODO: Check if this is fixed with higher version of TinyMCE and remove the patch
 	 *
-	 * @param {string} value The value which will be inserted in the TinyMCE4
+	 * @param {string} value The value which will be inserted in the TinyMCE
 	 * @returns {string} The patched value
 	 * @private
 	 */
-	RichTextEditor.prototype._patchTinyMCE4Value = function (value) {
+	RichTextEditor.prototype._patchTinyMCEValue = function (value) {
 		if (value.indexOf("<!--") === 0) {
 			value = "&#8203;" + value; // Prepend the value with "ZERO WIDTH NO-BREAK SPACE" character
 		}
@@ -1594,7 +1715,7 @@ sap.ui.define([
 	 *
 	 * @private
 	 */
-	RichTextEditor.prototype._onAfterReadyTinyMCE4 = function() {
+	RichTextEditor.prototype._onAfterReadyTinyMCE = function() {
 		var oEditorIFrame = document.getElementById(this._iframeId),
 			oCustomToolbar = this.getAggregation("_toolbarWrapper"),
 			oToolbarDOM = oCustomToolbar && oCustomToolbar.getAggregation("_toolbar").getDomRef(),
@@ -1619,13 +1740,22 @@ sap.ui.define([
 		}
 
 		this._oEditor.on("change", function(oEvent) {
-			this.onTinyMCEChange(this._oEditor); // Works for TinyMCE 3 and 4
+			this.onTinyMCEChange(this._oEditor); // Works for TinyMCE 4 and 5
 		}.bind(this));
 
+		/* Save the editor's state after the custom toolbar is initialized in order to enable proper firing of a 'dirty'
+		event - a native TinyMCE event that is fired on every single change done in the editor.
+
+		When we initialize the customToolbar, setDirty method of TinyMCE is called many times, as a result of
+		executing the default font styles to ensure right synchronizing of the custom toolbar in ToolbarWrapper.prototype.modifyRTEToolbarConfig.
+
+		As a result when we have custom toolbar used, initally it is always "dirty" and the event is not fired on content change.
+		Saving the content initially  will "clean" the state, allowing the app to use the native TinyMCE dirty event.
 
-		// Focus handling
-		var $Editor = jQuery(this._oEditor.getContainer());
-		$Editor.on('keydown', jQuery.proxy(this, this._tinyMCEKeyboardHandler));
+		Event is not fired when the whole content is selected via CTRL + A and deleted. That is a TinyMCE issue.*/
+		if (this.getCustomToolbar()) {
+			this._oEditor.save();
+		}
 
 		// Make sure focus event is triggered, when body inside the iframe is focused
 		var $EditorIFrame = jQuery(oEditorIFrame),
@@ -1636,11 +1766,7 @@ sap.ui.define([
 			if (!bTriggered) {
 				bTriggered = true;
 				/* TODO remove after 1.62 version */
-				if (Device.browser.msie || Device.browser.edge) {
-					$EditorIFrame.trigger('activate');
-				} else {
-					$EditorIFrame.trigger('focus');
-				}
+				$EditorIFrame.trigger('focus');
 				$Body.trigger('focus');
 				bTriggered = false;
 			}
@@ -1651,11 +1777,11 @@ sap.ui.define([
 			this._oEditor.getBody().setAttribute("title", sTooltip);
 			$EditorIFrame.attr("title", sTooltip);
 		}
-		this._registerWithPopupTinyMCE4();
+		this._registerWithPopupTinyMCE();
 
 		// Handle resized correctly.
 		if (!this._resizeHandlerId) {
-			this._resizeHandlerId = ResizeHandler.register(this, this._boundResizeEditorTinyMCE4);
+			this._resizeHandlerId = ResizeHandler.register(this, this._boundResizeEditorTinyMCE);
 		}
 
 		this._resizeEditorOnDocumentReady();
@@ -1664,12 +1790,14 @@ 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.fireReadyTinyMCE4();
+		this.fireReadyTinyMCE();
 	};
 
 	RichTextEditor.prototype._resizeEditorOnDocumentReady = function() {
-		var fnResizeEditor = this._resizeEditorTinyMCE4.bind(this);
+		var fnResizeEditor = this._resizeEditorTinyMCE.bind(this);
 		// Resize when editor is loaded completely
 		var oEditorDocument = this._oEditor.getDoc();
 
@@ -1703,8 +1831,8 @@ sap.ui.define([
 	 *
 	 * @private
 	 */
-	RichTextEditor.prototype.fireReadyTinyMCE4 = function() {
-		switch (this._tinyMCE4Status) {
+	RichTextEditor.prototype.fireReadyTinyMCE = function() {
+		switch (this._tinyMCEStatus) {
 			case EditorStatus.Initial:
 			case EditorStatus.Loading:
 			case EditorStatus.Loaded:
@@ -1723,7 +1851,7 @@ sap.ui.define([
 				break;
 
 			default:
-				Log.error("Unknown TinyMCE4 status: " + this._tinyMCE4Status);
+				Log.error("Unknown TinyMCE status: " + this._tinyMCEStatus);
 				break;
 		}
 	};
@@ -1731,7 +1859,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() {
@@ -1750,10 +1878,10 @@ sap.ui.define([
 	 * @returns {boolean} Whether the configuration changed since last time
 	 * @private
 	 */
-	RichTextEditor.prototype._createConfigTinyMCE4 = function(fnOnInit) {
+	RichTextEditor.prototype._createConfigTinyMCE = function(fnOnInit) {
 		var oCustomToolbar = this.getAggregation("_toolbarWrapper");
 
-		// Create new instance of TinyMCE4
+		// Create new instance of TinyMCE
 		var aButtonRows = this._createButtonRowsTinyMCE(" ", "|");
 		if (aButtonRows.length === 0) {
 			aButtonRows = false;
@@ -1767,19 +1895,37 @@ sap.ui.define([
 			sPluginsList = sPluginsList.replace(/(,powerpaste|powerpaste,)/gi, "");
 		}
 
+		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: "modern",
+			theme: bIsTinyMCE6 ? "silver" : "modern",
 			menubar: false,
-			language: this._getLanguageTinyMCE4(),
+			language: this._getLanguageTinyMCE(),
 			browser_spellcheck: true,
 			convert_urls: false,
 			plugins: sPluginsList,
+			contextmenu: false,
 			toolbar_items_size: 'small',
 			toolbar: aButtonRows,
+			toolbar_mode: "sliding",
 			statusbar: false, // disables display of the status bar at the bottom of the editor
 			image_advtab: true, // Adds an "Advanced" tab to the image dialog allowing you to add custom styles, spacing and borders to images
 			readonly: !this.getEditable(),
@@ -1818,32 +1964,35 @@ sap.ui.define([
 	 *
 	 * @returns {string} The language to be used for TinyMCE
 	 */
-	RichTextEditor.prototype._getLanguageTinyMCE4 = function() {
-		var oLocale = new sap.ui.core.Locale(Core.getConfiguration().getLanguage()),
+	RichTextEditor.prototype._getLanguageTinyMCE = function() {
+		var oLocale = new Locale(Core.getConfiguration().getLanguage()),
 			sLanguage = oLocale.getLanguage(),
 			sRegion = oLocale.getRegion(),
+			bIsTinyMCE6 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6,
 			sLangStr;
 
 		// Language mapping for old/fallback languages
-		sLanguage = RichTextEditor.MAPPED_LANGUAGES_TINYMCE4[sLanguage] || sLanguage;
+		sLanguage = RichTextEditor.MAPPED_LANGUAGES_TINYMCE[sLanguage] || sLanguage;
 
 		// 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;
 
-		// If there is no language for that region defined, try without region
-		if (!RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE4[sLangStr]) {
-			sLangStr = sLanguage;
+		// If there is region language, return it
+		if (RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE[sLangStr]) {
+			return sLangStr;
 		}
-		// If there is still no language defined, fallback to english
-		if (!RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE4[sLangStr]) {
-			sLangStr = "en";
+
+		// If there is a some language, return it
+		if (RichTextEditor.SUPPORTED_LANGUAGES_TINYMCE[sLanguage]) {
+			return sLanguage;
 		}
 
-		return sLangStr;
+		// If there is still no language defined, fallback to english
+		return "en";
 	};
 
 	/**
@@ -1852,10 +2001,10 @@ sap.ui.define([
 	 * @returns {void}
 	 * @private
 	 */
-	RichTextEditor.prototype._resizeEditorTinyMCE4 = function() {
+	RichTextEditor.prototype._resizeEditorTinyMCE = function() {
 		// Resize so the full editor takes the correct height
 
-		if (this._tinyMCE4Status !== EditorStatus.Ready) {
+		if (this._tinyMCEStatus !== EditorStatus.Ready) {
 			// This only happens when the control instance is destroyed in the meantime...
 			return;
 		}
@@ -1904,31 +2053,34 @@ sap.ui.define([
 	 *
 	 * @private
 	 */
-	RichTextEditor.prototype._registerWithPopupTinyMCE4 = function() {
-		var oBus = Core.getEventBus(),
+	RichTextEditor.prototype._registerWithPopupTinyMCE = function() {
+		var bIsTinyMCE6 = this.getEditorType() === RichTextEditor.EDITORTYPE_TINYMCE6,
 			$Pop = this.$().closest("[data-sap-ui-popup]");
 
 		setTimeout(function() {
 			if ($Pop.length === 1) {
-				var sPopupId = $Pop.attr("data-sap-ui-popup"),
-					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) {
-						var oObject = { id: oEvent.win._id };
-						oBus.publish("sap.ui", "sap.ui.core.Popup.addFocusableContent-" + sPopupId, oObject);
+						if (bIsTinyMCE6) {
+							jQuery(".tox-dialog[role='dialog']").attr("id", sDialogId);
+						}
+						var sSelector = "#" + (bIsTinyMCE6 ? sDialogId : oEvent.win._id);
+						Popup.addExternalContent(sSelector, /* marked as selectable */ true);
 					});
 					this._oEditor.on('CloseWindow', function(oEvent) {
-						var oObject = { id: oEvent.win._id };
-						oBus.publish("sap.ui", "sap.ui.core.Popup.removeFocusableContent-" + sPopupId, oObject);
+						var sSelector = "#" + (bIsTinyMCE6 ? sDialogId : oEvent.win._id);
+						Popup.removeExternalContent(sSelector, /* remove selectable */ true);
+						if (bIsTinyMCE6) {
+							jQuery(".tox-dialog[role='dialog']").attr("id"); // remove our id
+						}
 					});
 				}
 			}
 		}.bind(this), 0);
 	};
-	////////////////////////////////// End editor section "TinyMCE4" /////////////////////////////////
+	////////////////////////////////// End editor section "TinyMCE" /////////////////////////////////
 
 
 	////////////////////////////////// Custom Toolbar Section  /////////////////////////////////
@@ -1940,9 +2092,7 @@ sap.ui.define([
 	 * @private
 	 */
 	RichTextEditor.prototype._checkCustomToolbarRequirements = function() {
-		var bRequirementsFullfiled = this.getCustomToolbar() &&
-			this.getEditorType() === library.EditorType.TinyMCE4 &&
-			library.RichTextEditorHelper.bSapMLoaded;
+		var bRequirementsFullfiled = this.getCustomToolbar() && oEditorMapping[this.getEditorType()] && library.RichTextEditorHelper.bSapMLoaded;
 
 		this.$().toggleClass("sapUiRTEWithCustomToolbar", bRequirementsFullfiled);