Initial TinyMCE editor support (still need to work on spellcheck and skins)

5 files changed, 742 insertions, 2 deletions

diff --git a/skins/default/editor_content.css b/skins/default/editor_content.css
new file mode 100644
index 000000000..182e79121
--- /dev/null
+++ b/skins/default/editor_content.css
@@ -0,0 +1,58 @@
+/* This file contains the CSS data for the editable area(iframe) of TinyMCE */

+/* You can extend this CSS by adding your own CSS file with the the content_css option */

+

+body, td, pre {

+	font-family: Verdana, Arial, Helvetica, sans-serif;

+	font-size: 10px;

+}

+

+body {

+	background-color: #FFFFFF;

+}

+

+.mceVisualAid {

+	border: 1px dashed #BBBBBB !important;

+}

+

+div.mceVisualAid {

+	background-image:url('../images/spacer.gif');

+	visibility: visible !important;

+}

+

+.mceItemAnchor {

+	width: 12px;

+	line-height: 6px;

+	overflow: hidden;

+	padding-left: 12px;

+	background-image: url('../images/anchor_symbol.gif');

+	background-position: bottom;

+	background-repeat: no-repeat;

+}

+

+/* Important is needed in Gecko browsers inorder to style links */

+/*

+a {

+	color: green !important;

+}

+*/

+

+/* Style selection range colors in Gecko browsers */

+/*

+::-moz-selection {

+	background-color: red;

+	color: green;

+}

+*/

+

+/* MSIE specific */

+

+* html body {

+	scrollbar-3dlight-color: #F0F0EE;

+	scrollbar-arrow-color: #676662;

+	scrollbar-base-color: #F0F0EE;

+	scrollbar-darkshadow-color: #DDDDDD;

+	scrollbar-face-color: #E0E0DD;

+	scrollbar-highlight-color: #F0F0EE;

+	scrollbar-shadow-color: #F0F0EE;

+	scrollbar-track-color: #F5F5F5;

+}

diff --git a/skins/default/editor_popup.css b/skins/default/editor_popup.css
new file mode 100644
index 000000000..2bae9158a
--- /dev/null
+++ b/skins/default/editor_popup.css
@@ -0,0 +1,327 @@
+/* This file contains the CSS data for all popups in TinyMCE */

+

+body {

+	background-color: #F0F0EE;

+	font-family: Verdana, Arial, Helvetica, sans-serif;

+	font-size: 11px;

+	scrollbar-3dlight-color: #F0F0EE;

+	scrollbar-arrow-color: #676662;

+	scrollbar-base-color: #F0F0EE;

+	scrollbar-darkshadow-color: #DDDDDD;

+	scrollbar-face-color: #E0E0DD;

+	scrollbar-highlight-color: #F0F0EE;

+	scrollbar-shadow-color: #F0F0EE;

+	scrollbar-track-color: #F5F5F5;

+	margin: 8px;

+}

+

+td {

+	font-family: Verdana, Arial, Helvetica, sans-serif;

+	font-size: 11px;

+}

+

+input {

+	background: #FFFFFF;

+	border: 1px solid #cccccc;

+}

+

+td, input, select, textarea {

+	font-family: Verdana, Arial, Helvetica, sans-serif;

+	font-size: 10px;

+}

+

+input, select, textarea {

+	border: 1px solid #808080;

+}

+

+.input_noborder {

+	border: 0;

+}

+

+#insert, .updateButton {

+   font-weight: bold;

+   width: 90px;

+   height: 21px;

+   border: 0;

+   background-image: url('../images/insert_button_bg.gif');

+   cursor: pointer;

+}

+

+#cancel {

+   font-weight: bold;

+   width: 90px;

+   height: 21px;

+   border: 0;

+   background-image: url('../images/cancel_button_bg.gif');

+   cursor: pointer;

+}

+

+/* Mozilla only style */

+html>body #insert, html>body #cancel {

+	padding-bottom: 2px;

+}

+

+.title {

+	font-size: 12px;

+	font-weight: bold;

+	color: #2B6FB6;

+}

+

+table.charmap {

+	border-style: solid;

+	border-width: 1px;

+	border-color: #AAAAAA;

+}

+

+td.charmap, td.charmapOver {

+	color: #000000;

+	border-color: #AAAAAA;

+	border-style: solid;

+	border-width: 1px;

+	text-align: center;

+	font-size: 12px;

+}

+

+td.charmapOver {

+	background-color: #CCCCCC;

+	cursor: default;

+}

+

+a.charmap {

+	color: #000000;

+	text-decoration: none

+}

+

+.wordWrapCode {

+	vertical-align: middle;

+	border: 1px none #000000;

+	background-color: transparent;

+}

+

+input.radio {

+	border: 1px none #000000;

+	background-color: transparent;

+	vertical-align: middle;

+}

+

+input.checkbox {

+	border: 1px none #000000;

+	background-color: transparent;

+	vertical-align: middle;

+}

+

+.mceButtonNormal, .mceButtonOver, .mceButtonDown, .mceSeparator, .mceButtonDisabled, .mceButtonSelected {

+	margin-left: 1px;

+}

+

+.mceButtonNormal {

+	border-top: 1px solid;

+	border-left: 1px solid;

+	border-bottom: 1px solid;

+	border-right: 1px solid;

+	border-color: #F0F0EE;

+	cursor: default;

+}

+

+.mceButtonOver {

+	border: 1px solid #0A246A;

+	cursor: default;

+	background-color: #B6BDD2;

+}

+

+.mceButtonDown {

+	cursor: default;

+	border: 1px solid #0A246A;

+	background-color: #8592B5;

+}

+

+.mceButtonDisabled {

+	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);

+	-moz-opacity:0.3;

+	opacity: 0.3;

+	border-top: 1px solid;

+	border-left: 1px solid;

+	border-bottom: 1px solid;

+	border-right: 1px solid;

+	border-color: #F0F0EE;

+	cursor: default;

+}

+

+.mceActionPanel {

+	margin-top: 5px;

+}

+

+/* Tabs classes */

+

+.tabs {

+	float: left;

+	width: 100%;

+	line-height: normal;

+	background-image: url("../images/xp/tabs_bg.gif");

+}

+

+.tabs ul {

+	margin: 0;

+	padding: 0 0 0;

+	list-style: none;

+}

+

+.tabs li {

+	float: left;

+	background: url("../images/xp/tab_bg.gif") no-repeat left top;

+	margin: 0;

+	margin-left: 0;

+	margin-right: 2px;

+	padding: 0 0 0 10px;

+	line-height: 18px;

+}

+

+.tabs li.current {

+	background: url("../images/xp/tab_sel_bg.gif") no-repeat left top;

+	margin-right: 2px;

+}

+

+.tabs span {

+	float: left;

+	display: block;

+	background: url("../images/xp/tab_end.gif") no-repeat right top;

+	padding: 0px 10px 0 0;

+}

+

+.tabs .current span {

+	background: url("../images/xp/tab_sel_end.gif") no-repeat right top;

+}

+

+.tabs a {

+	text-decoration: none;

+	font-family: Verdana, Arial;

+	font-size: 10px;

+}

+

+.tabs a:link, .tabs a:visited, .tabs a:hover {

+	color: black;

+}

+

+.tabs a:hover {

+}

+

+.tabs .current {

+}

+

+.tabs .current a, .tabs .current a:link, .tabs .current a:visited {

+}

+

+.panel_wrapper div.panel {

+	display: none;

+}

+

+.panel_wrapper div.current {

+	display: block;

+	width: 100%;

+	height: 300px;

+	overflow: visible; /* Should be auto but that breaks Safari */

+}

+

+.panel_wrapper {

+	border: 1px solid #919B9C;

+	border-top: 0px;

+	padding: 10px;

+	padding-top: 5px;

+	clear: both;

+	background-color: white;

+}

+

+fieldset {

+	border: 1px solid #919B9C;

+	font-family: Verdana, Arial;

+	font-size: 10px;

+	padding: 0;

+	margin: 0;

+	padding: 4px;

+}

+

+legend {

+	color: #2B6FB6;

+	font-weight: bold;

+}

+

+.properties {

+	width: 100%;

+}

+

+.properties .column1 {

+}

+

+.properties .column2 {

+	text-align: left;

+}

+

+a:link, a:visited {

+	color: black;

+}

+

+a:hover {

+	color: #2B6FB6;

+}

+

+#plugintable thead {

+	font-weight: bold;

+	background-color: #DDDDDD;

+}

+

+#plugintable, #about #plugintable td {

+	border: 1px solid #919B9C;

+}

+

+#plugintable {

+	width: 99%;

+	margin-top: 10px;

+}

+

+#pluginscontainer {

+	height: 290px;

+	overflow: auto;

+}

+

+/* MSIE Specific styles */

+

+* html .panel_wrapper {

+	width: 100%;

+}

+

+.column {

+	float: left;

+}

+

+h1, h2, h3, h4 {

+	color: #2B6FB6;

+	margin: 0;

+	padding: 0;

+	padding-top: 5px;

+}

+

+h3 {

+	font-size: 14px;

+}

+

+#link .panel_wrapper, #link div.current {

+	height: 125px;

+}

+

+#image .panel_wrapper, #image div.current {

+	height: 190px;

+}

+

+/* Disables the advanced tab in the table plugin. */

+/*

+#table #advanced_tab {

+	display: none;

+}

+*/

+

+/* Disables the border input field and label in the table plugin. */

+/*

+#table #border, #table #borderlabel {

+	display: none;

+}

+*/

diff --git a/skins/default/editor_ui.css b/skins/default/editor_ui.css
new file mode 100644
index 000000000..c51be6c89
--- /dev/null
+++ b/skins/default/editor_ui.css
@@ -0,0 +1,353 @@
+/* This file contains the CSS data for the editor UI of TinyMCE instances */

+

+.mceToolbarTop a, .mceToolbarTop a:visited, .mceToolbarTop a:hover, .mceToolbarBottom a, .mceToolbarBottom a:visited, .mceToolbarBottom a:hover {

+	border: 0; margin: 0; padding: 0; background: transparent;

+}

+

+.mceSeparatorLine {

+	border: 0;

+	padding: 0;

+	margin-left: 4px;

+	margin-right: 2px;

+}

+

+.mceSelectList {

+	font-family: 'MS Sans Serif', sans-serif, Verdana, Arial;

+	font-size: 7pt !important;

+	font-weight: normal;

+	margin-top: 3px;

+	padding: 0;

+	display: inline;

+	vertical-align: top;

+	background-color: #F0F0EE;

+}

+

+.mceLabel, .mceLabelDisabled {

+	font-family: 'MS Sans Serif', sans-serif, Verdana, Arial;

+	font-size: 9pt;

+}

+

+.mceLabel {

+	color: #000000;

+}

+

+.mceLabelDisabled {

+	cursor: text;

+	color: #999999;

+}

+

+.mceEditor {

+	background: #F0F0EE;

+	border: 1px solid #cccccc;

+	padding: 0;

+	margin: 0;

+}

+

+.mceEditorArea {

+	font-family: 'MS Sans Serif', sans-serif, Verdana, Arial;

+	background: #FFFFFF;

+	padding: 0;

+	margin: 0;

+}

+

+.mceToolbarTop, .mceToolbarBottom {

+	background: #F0F0EE;

+	line-height: 1px;

+	font-size: 1px;

+}

+

+.mceToolbarTop {

+	border-bottom: 1px solid #cccccc;

+	padding-bottom: 1px;

+}

+

+.mceToolbarBottom {

+	border-top: 1px solid #cccccc;

+}

+

+.mceStatusbarTop, .mceStatusbarBottom, .mceStatusbar {

+	height: 20px;

+}

+

+.mceStatusbarTop .mceStatusbarPathText, .mceStatusbarBottom .mceStatusbarPathText, .mceStatusbar .mceStatusbarPathText {

+	font-family: 'MS Sans Serif', sans-serif, Verdana, Arial;

+	font-size: 9pt;

+	padding: 2px;

+	line-height: 16px;

+	overflow: visible;

+}

+

+.mceStatusbarTop {

+	border-bottom: 1px solid #cccccc;

+}

+

+.mceStatusbarBottom {

+	border-top: 1px solid #cccccc;

+}

+

+.mceStatusbar {

+	border-bottom: 1px solid #cccccc;

+}

+

+.mcePathItem, .mcePathItem:link, .mcePathItem:visited, .mcePathItem:hover {

+	text-decoration: none;

+	font-family: 'MS Sans Serif', sans-serif, Verdana, Arial;

+	font-size: 9pt;

+	color: #000000;

+}

+

+.mcePathItem:hover {

+	text-decoration: underline;

+}

+

+.mceStatusbarPathText {

+	float: left;

+}

+

+.mceStatusbarResize {

+	float: right;

+	background-image: url('../images/statusbar_resize.gif');

+	background-repeat: no-repeat;

+	width: 11px;

+	height: 20px;

+	cursor: se-resize;

+}

+

+.mceResizeBox {

+	width: 10px;

+	height: 10px;

+	display: none;

+	border: 1px dotted gray;

+	margin: 0;

+	padding: 0;

+}

+

+.mceEditorIframe {

+	border: 0;

+}

+

+/* Button CSS rules */

+

+a.mceButtonDisabled img, a.mceButtonNormal img, a.mceButtonSelected img {

+	width: 20px;

+	height: 20px;

+	cursor: default;

+	margin-top: 1px;

+	margin-left: 1px;

+}

+

+a.mceButtonDisabled img {

+	border: 0 !important;

+}

+

+a.mceButtonNormal img, a.mceButtonSelected img {

+	border: 1px solid #F0F0EE !important;

+}

+

+a.mceButtonSelected img {

+	border: 1px solid #6779AA !important;

+	background-color: #D4D5D8;

+}

+

+a.mceButtonNormal img:hover, a.mceButtonSelected img:hover {

+	border: 1px solid #0A246A !important;

+	cursor: default;

+	background-color: #B6BDD2;

+}

+

+a.mceButtonDisabled img {

+	-moz-opacity:0.3;

+	opacity: 0.3;

+	border: 1px solid #F0F0EE !important;

+	cursor: default;

+}

+

+a.mceTiledButton img {

+	background-image: url('../images/buttons.gif');

+	background-repeat: no-repeat;

+}

+

+/* MSIE specific rules */

+

+* html a.mceButtonNormal img, * html a.mceButtonSelected img, * html a.mceButtonDisabled img {

+	border: 0 !important;

+	margin-top: 2px;

+	margin-bottom: 1px;

+}

+

+* html a.mceButtonDisabled img {

+	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);

+	border: 0 !important;

+}

+

+* html a.mceButtonDisabled {

+	border: 1px solid #F0F0EE !important;

+}

+

+* html a.mceButtonNormal, * html a.mceButtonSelected {

+	border: 1px solid #F0F0EE !important;

+	cursor: default;

+}

+

+* html a.mceButtonSelected {

+	border: 1px solid #6779AA !important;

+	background-color: #D4D5D8;

+}

+

+* html a.mceButtonNormal:hover, * html a.mceButtonSelected:hover {

+	border: 1px solid #0A246A !important;

+	cursor: default;

+	background-color: #B6BDD2;

+}

+

+* html .mceSelectList {

+	margin-top: 2px;

+}

+

+/* Menu button CSS rules */

+

+span.mceMenuButton img, span.mceMenuButtonSelected img {

+	border: 1px solid #F0F0EE;

+	margin-left: 1px;

+}

+

+span.mceMenuButtonSelected img {

+	border: 1px solid #6779AA;

+	background-color: #B6BDD2;

+}

+

+span.mceMenuButtonSelected img.mceMenuButton {

+	border: 1px solid #F0F0EE;

+	background-color: transparent;

+}

+

+span.mceMenuButton img.mceMenuButton, span.mceMenuButtonSelected img.mceMenuButton {

+	border-left: 0;

+	margin-left: 0;

+}

+

+span.mceMenuButton:hover img, span.mceMenuButtonSelected:hover img {

+	border: 1px solid #0A246A;

+	background-color: #B6BDD2;

+}

+

+span.mceMenuButton:hover img.mceMenuButton, span.mceMenuButtonSelected:hover img.mceMenuButton {

+	border-left: 0;

+}

+

+span.mceMenuButtonFocus img {

+	border: 1px solid gray;

+	border-right: 0;

+	margin-left: 1px;

+	background-color: #F5F4F2;

+}

+

+span.mceMenuButtonFocus img.mceMenuButton {

+	border: 1px solid gray;

+	border-left: 1px solid #F5F4F2;

+	margin-left: 0;

+}

+

+/* Menu button MSIE specific rules */

+

+* html span.mceMenuButton, * html span.mceMenuButtonFocus {

+	position: relative;

+	left: 0;

+	top: 0;

+}

+

+* html span.mceMenuButton img, * html span.mceMenuButtonSelected img, * html span.mceMenuButtonFocus img {

+	position: relative;

+	top: 1px;

+}

+

+* html span.mceMenuHover img {

+	border: 1px solid #0A246A;

+	background-color: #B6BDD2;

+}

+

+* html span.mceMenuButtonSelected.mceMenuHover img.mceMenuButton {

+	border: 1px solid #0A246A;

+	background-color: #B6BDD2;

+	border-left: 0;

+}

+

+/* Menu */

+

+.mceMenu {

+	position: absolute;

+	left: 0;

+	top: 0;

+	display: none;

+	z-index: 100;

+	background-color: white;

+	border: 1px solid gray;

+	font-weight: normal;

+}

+

+.mceMenu a, .mceMenuTitle, .mceMenuDisabled {

+	display: block;

+	width: 100%;

+	text-decoration: none;

+	background-color: white;

+	font-family: Tahoma, Verdana, Arial, Helvetica;

+	font-size: 11px;

+	line-height: 20px;

+	color: black;

+}

+

+.mceMenu a:hover {

+	background-color: #B6BDD2;

+	color: black;

+	text-decoration: none !important;

+}

+

+.mceMenu span {

+	padding-left: 10px;

+	padding-right: 10px;

+	display: block;

+	line-height: 20px;

+}

+

+.mceMenuSeparator {

+	border-bottom: 1px solid gray;

+	background-color: gray;

+	height: 1px;

+}

+

+.mceMenuTitle span {

+	padding-left: 5px;

+}

+

+.mceMenuTitle {

+	background-color: #DDDDDD;

+	font-weight: bold;

+}

+

+.mceMenuDisabled {

+	color: gray;

+}

+

+span.mceMenuSelectedItem {

+	background-image: url('../images/menu_check.gif');

+	background-repeat: no-repeat;

+	background-position: 5px 8px;

+	padding-left: 20px;

+}

+

+span.mceMenuCheckItem {

+	padding-left: 20px;

+}

+

+span.mceMenuLine {

+	display: block;

+	position: absolute;

+	left: 0;

+	top: -1px;

+	background-color: #F5F4F2;

+	width: 30px;

+	height: 1px;

+	overflow: hidden;

+	padding-left: 0;

+	padding-right: 0;

+}

diff --git a/skins/default/templates/compose.html b/skins/default/templates/compose.html
index ed44bb56c..2c11e0015 100644
--- a/skins/default/templates/compose.html
+++ b/skins/default/templates/compose.html
@@ -106,7 +106,9 @@ function rcmail_toggle_display(id)
 <td align="right">
 <roundcube:label name="charset" />:&nbsp;<roundcube:object name="charsetSelector" tabindex="8" />
 </td>
-
+<td align="right">
+ <roundcube:label name="editortype" />:&nbsp;<roundcube:object name="editorSelector" tabindex="9" />
+</td>
 </tr></tbody></table>
 
 </td>
diff --git a/skins/default/templates/ldappublicsearch.html b/skins/default/templates/ldappublicsearch.html
index 70570c06f..d9714cb85 100644
--- a/skins/default/templates/ldappublicsearch.html
+++ b/skins/default/templates/ldappublicsearch.html
@@ -22,7 +22,7 @@
 <roundcube:object name="ldappublicaddresslist"
   id="ldappublicaddresslist"
   cellspacing="0"
-  summary="Ldap email address list" />
+  summary="LDAP email address list" />
 </div>
 
 <roundcube:include file="/includes/ldapscripts.html" />