W.I.P. implementing TinyMCE editor and deprecating CKEditor:

- Keep editor toolbar in one line at least for mail compose
- Add a preference to enable/disable menubar at the top of editor
- Respects mode preference

api/js/etemplate/et2_widget_htmlarea.js

@@ -29,7 +29,7 @@ var et2_htmlarea = (function(){ "use strict"; return et2_inputWidget.extend([et2
 		'mode': {
 			'name': 'Mode',
 			'description': 'One of {ascii|simple|extended|advanced}',
-			'default': 'simple',
+			'default': '',
 			'type': 'string'
 		},
 		'height': {
@@ -65,6 +65,12 @@ var et2_htmlarea = (function(){ "use strict"; return et2_inputWidget.extend([et2
 			description: "Callback function for handling image upload",
 			type: 'js',
 			default: et2_no_init
+		},
+		menubar: {
+			name: "Menubar",
+			description: "Display menubar at the top of the editor",
+			type: "boolean",
+			default: true
 		}
 	},
 
@@ -106,6 +112,7 @@ var et2_htmlarea = (function(){ "use strict"; return et2_inputWidget.extend([et2
 			language: egw.preference('lang', 'common'),
 			paste_data_images: true,
 			browser_spellcheck: true,
+			contextmenu: false,
 			images_upload_url: this.options.imageUpload,
 			file_picker_callback: jQuery.proxy(this._file_picker_callback, this),
 			images_upload_handler: jQuery.proxy(this._images_upload_handler, this),
@@ -181,20 +188,22 @@ var et2_htmlarea = (function(){ "use strict"; return et2_inputWidget.extend([et2
 	 */
 	_extendedSettings: function () {
 
+		var rte_menubar = egw.preference('rte_menubar', 'common');
 		var settings = {
 			fontsize_formats: this.font_size_formats[egw.preference('rte_font_unit', 'common')],
+			menubar: parseInt(rte_menubar) && this.menubar ? true : typeof rte_menubar != 'undefined' ? false : this.menubar
 		};
 
 		var mode = this.mode || egw.preference('rte_features', 'common');
 		switch (mode)
 		{
 			case 'simple':
-				settings.toolbar = "formatselect | fontselect fontsizeselect | bold italic strikethrough forecolor backcolor | "+
+				settings.toolbar = "fontselect fontsizeselect | bold italic forecolor backcolor | "+
 					"alignleft aligncenter alignright alignjustify  | numlist "+
-					"bullist outdent indent"
+					"bullist outdent indent | link image"
 				break;
 			case 'extended':
-				settings.toolbar = "formatselect | fontselect fontsizeselect | bold italic strikethrough forecolor backcolor | "+
+				settings.toolbar = "fontselect fontsizeselect | bold italic strikethrough forecolor backcolor | "+
 					"link | alignleft aligncenter alignright alignjustify  | numlist "+
 					"bullist outdent indent  | removeformat | image"
 				break;

api/templates/default/etemplate2.css

@@ -2892,6 +2892,7 @@ a.chzn-single.et2_country-select span.img {
 }
 
 .tox-tinymce {display: flex !important;}
+.tox-tbtn.tox-tbtn--select.tox-tbtn--bespoke:nth-child(2) {width: 60px;}
 div.eml {
 	position:absolute;
 	height: 100%;

mail/templates/default/compose.xet

@@ -87,7 +87,7 @@
 		</vbox>
 		<vbox class="mailComposeBodySection" width="100%">
 			<hbox disabled="@is_plain" class="mailComposeBody mailComposeHtmlContainer">
-				<htmlarea name="mail_htmltext" id="mail_htmltext" imageUpload="link_to" expand_toolbar="true" height="478px" width="100%" resize_ratio="0"/>
+				<htmlarea name="mail_htmltext" id="mail_htmltext" menubar="false" mode="simple" imageUpload="link_to" expand_toolbar="true" height="478px" width="100%" resize_ratio="0"/>
 			</hbox>
 			<hbox disabled="@is_html" class="mailComposeBody mailComposeTextContainer">
 				<textbox multiline="true" rows="40" cols="120" width="100%" span="all" no_lang="1" name="mail_plaintext" id="mail_plaintext" resize_ratio="0"/>

preferences/inc/class.preferences_hooks.inc.php

@@ -71,8 +71,6 @@ class preferences_hooks
 			'br'	=> lang('br')
 		);
 
-		$rich_text_editor_skins = Api\Html\CkEditorConfig::getAvailableCKEditorSkins();
-
 		$account_sels = array(
 			'selectbox'     => lang('Selectbox'),
 			'primary_group' => lang('Selectbox with primary group and search'),
@@ -388,15 +386,18 @@ class preferences_hooks
 				'admin'  => False,
 				'forced' => 'br',
 			),
-			'rte_skin' => array(
+			'rte_menubar' => array(
 				'type'   => 'select',
-				'label'  => 'Rich text editor theme',
+				'label'  => 'Enable menubar',
-				'name'   => 'rte_skin',
+				'name'   => 'rte_menubar',
-				'values' => $rich_text_editor_skins,
+				'values' => array(
-				'help'   => 'Select the theme (visualization) of the rich text editor.',
+					'1' => lang('Yes'),
+					'0' => lang('No'),
+				),
+				'help'   => 'Enable/Disable menubar from top of the editor.',
 				'xmlrpc' => True,
-				'admin'  => False,
+				'admin'  => '1',
-				'forced' => 'moono',
+				'default' => '1',
 			),
 			'rte_features' => array(
 				'type'   => 'select',