Ported to TinyMCE 4.x (TODO: use rcube_text_editor widget)

plugins/kolab_notes/kolab_notes_ui.php

@@ -72,17 +72,25 @@ class kolab_notes_ui
             $settings['selected_uid'] = $uid;
         }
 
-        // TinyMCE uses two-letter lang codes, with exception of Chinese
+        $lang_codes = array($_SESSION['language']);
-        $lang = strtolower($_SESSION['language']);
-        $lang = strpos($lang, 'zh_') === 0 ? str_replace('_', '-', $lang) : substr($lang, 0, 2);
 
-        if (!file_exists(INSTALL_PATH . 'program/js/tiny_mce/langs/'.$lang.'.js')) {
+        if ($pos = strpos($_SESSION['language'], '_')) {
+            $lang_codes[] = substr($_SESSION['language'], 0, $pos);
+        }
+
+        foreach ($lang_codes as $code) {
+            if (file_exists(INSTALL_PATH . "program/js/tinymce/langs/$code.js")) {
+                $lang = $code;
+                break;
+            }
+        }
+
+        if (empty($lang)) {
             $lang = 'en';
         }
 
         $settings['editor'] = array(
             'lang'       => $lang,
-            'editor_css' => $this->plugin->url($this->plugin->local_skin_path() . '/editor.css'),
             'spellcheck' => intval($this->rc->config->get('enable_spellcheck')),
             'spelldict'  => intval($this->rc->config->get('spellcheck_dictionary'))
         );
@@ -159,7 +167,7 @@ class kolab_notes_ui
         $attrib += array('action' => '#', 'id' => 'rcmkolabnoteseditform');
 
         $this->rc->output->add_gui_object('noteseditform', $attrib['id']);
-        $this->rc->output->include_script('tiny_mce/tiny_mce.js');
+        $this->rc->output->include_script('tinymce/tinymce.min.js');
 
         $textarea = new html_textarea(array('name' => 'content', 'id' => 'notecontent', 'cols' => 60, 'rows' => 20, 'tabindex' => 3));
         return html::tag('form', $attrib, $textarea->show(), array_merge(html::$common_attrib, array('action')));

plugins/kolab_notes/notes.js

@@ -293,27 +293,30 @@ function rcube_kolab_notes_ui(settings)
     function init_editor()
     {
         var editor_conf = {
-            mode: 'textareas',
+            selector: '#notecontent',
-            elements: 'notecontent',
+            theme: 'modern',
-            apply_source_formatting: true,
-            theme: 'advanced',
             language: settings.editor.lang,
-            content_css: settings.editor.editor_css,
+            content_css: 'program/js/tinymce/roundcube/content.css?v1',
-            theme_advanced_toolbar_location: 'top',
+            plugins: 'autolink charmap code link paste tabfocus searchreplace table textcolor',
-            theme_advanced_toolbar_align: 'left',
+            toolbar: 'bold italic underline | alignleft aligncenter alignright alignjustify '
-            theme_advanced_buttons3: '',
+                + '| bullist numlist outdent indent blockquote | forecolor backcolor fontselect fontsizeselect '
-            theme_advanced_statusbar_location: 'none',
+                + '| link unlink table charmap | code searchreplace undo redo',
+            menubar: false,
+            statusbar: false,
+            toolbar_items_size: 'small',
+            extended_valid_elements: 'font[face|size|color|style],span[id|class|align|style]',
             relative_urls: false,
             remove_script_host: false,
-            gecko_spellcheck: true,
             convert_urls: false,
+            image_description: false,
+            paste_webkit_style: "color font-size font-family",
             paste_data_images: true,
-            plugins: 'paste,tabfocus,searchreplace,table,inlinepopups',
+            //spellchecker_rpc_url: '../../../../../?_task=utils&_action=spell_html&_remote=1',
-            theme_advanced_buttons1: 'bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,outdent,indent,blockquote,|,forecolor,backcolor,fontselect,fontsizeselect',
+            //spellchecker_language: rcmail.env.spell_lang,
-            theme_advanced_buttons2: 'link,unlink,table,charmap,|,search,code,|,undo,redo',
+            accessibility_focus: false,
             setup: function(ed) {
                 // make links open on shift-click
-                ed.onClick.add(function(ed, e) {
+                ed.on('click', function(e) {
                     var link = $(e.target).closest('a');
                     if (link.length && e.shiftKey) {
                         if (!bw.mz) window.open(link.get(0).href, '_blank');

plugins/kolab_notes/skins/larry/editor.css

@@ -1,29 +0,0 @@
-/* This file contains the CSS data for the editable area(iframe) of TinyMCE */
-
-body, td, pre {
-	font-family: "Lucida Grande", Verdana,  Arial, Helvetica, sans-serif;
-	font-size: 12px;
-}
-
-body {
-	background-color: #FFF;
-	margin: 6px;
-}
-
-pre
-{
-	margin: 0;
-	padding: 0;
-	white-space: -moz-pre-wrap !important;
-	white-space: pre-wrap !important;
-	white-space: pre;
-	word-wrap: break-word; /* IE (and Safari) */
-}
-
-blockquote
-{
-	padding-left: 5px;
-	border-left: #1010ff 2px solid;
-	margin-left: 5px;
-	width: 100%;
-}

plugins/kolab_notes/skins/larry/notes.css

@@ -190,7 +190,7 @@
 	        box-shadow: inset 0 0 3px 2px rgba(71,135,177, 0.9);
 }
 
-.notesview .defaultSkin table.mceLayout {
+.notesview .mce-panel {
 	border: 0;
 }
 

plugins/kolab_notes/skins/larry/templates/notes.html

@@ -16,8 +16,8 @@
         <roundcube:container name="toolbar" id="notestoolbar" />
 
         <div id="quicksearchbar">
-            <roundcube:object name="plugin.searchform" id="quicksearchbox" />
             <a id="searchmenulink" class="iconbutton searchoptions" > </a>
+            <roundcube:object name="plugin.searchform" id="quicksearchbox" />
             <roundcube:button command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" content=" " />
         </div>
     </div>
@@ -38,7 +38,7 @@
             <roundcube:object name="plugin.notebooks" id="notebooks" class="listing" />
             </div>
             <div class="boxfooter">
-                <roundcube:button command="list-create" type="link" title="kolab_notes.createlist" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="notesoptionslink" id="notesoptionsmenulink" type="link" title="kolab_notes.listactions" class="listbutton groupactions" onclick="UI.show_popup('notesoptionsmenu', undefined, { above:true });return false" innerClass="inner" content="&#9881;" />
+                <roundcube:button command="list-create" type="link" title="kolab_notes.createlist" class="listbutton add disabled" classAct="listbutton add" innerClass="inner" content="+" /><roundcube:button name="notesoptionslink" id="notesoptionsmenulink" type="link" title="kolab_notes.listactions" class="listbutton groupactions" onclick="return UI.toggle_popup('notesoptionsmenu', event)" innerClass="inner" content="&#9881;" />
             </div>
         </div>
     </div>