kivi.js: ckeditor über Klasse »texteditor« nutzen können

diff --git a/SL/ClientJS.pm b/SL/ClientJS.pm
index ff4aeb8..fcc2c14 100644 (file)
--- a/SL/ClientJS.pm
+++ b/SL/ClientJS.pm
@@ -65,7 +65,7 @@ my %supported_methods = (
   removeData   => 2,
 
   # Form Events
-  focus        => 1,
+  focus        => 1, # kivi.set_focus(<TARGET>)
 
   # Generic Event Handling ## pattern: $(<TARGET>).<FUNCTION>(<ARG1>, kivi.get_function_by_name(<ARG2>))
   on           => 3,
@@ -106,6 +106,9 @@ my %supported_methods = (
   'jstree:deselect_node' => 2,
   'jstree:deselect_all'  => 1,
 
+  # ## ckeditor stuff ##
+  'focus_ckeditor'       => 1,  # kivi.focus_ckeditor_when_ready(<TARGET>)
+
   # ## other stuff ##
   redirect_to            => 1,  # window.location.href = <TARGET>
 
@@ -201,6 +204,12 @@ sub dialog {
   return $self;
 }
 
+sub ckeditor {
+  my ($self) = @_;
+  $self->{_prefix} = 'ckeditor:';
+  return $self;
+}
+
 sub flash {
   my ($self, $type, @messages) = @_;
 

diff --git a/js/client_js.js b/js/client_js.js
index f39b192..bd70c89 100644 (file)
--- a/js/client_js.js
+++ b/js/client_js.js
@@ -80,7 +80,7 @@ ns.eval_json_result = function(data) {
       else if (action[0] == 'removeData')           $(action[1]).removeData(action[2]);
 
       // Form Events
-      else if (action[0] == 'focus')                $(action[1]).focus();
+      else if (action[0] == 'focus')                kivi.set_focus(action[1]);
 
       // Generic Event Handling ##
       else if (action[0] == 'on')                   $(action[1]).on(action[2], kivi.get_function_by_name(action[3]));
@@ -121,6 +121,9 @@ ns.eval_json_result = function(data) {
       else if (action[0] == 'jstree:deselect_node') $.jstree._reference($(action[1])).deselect_node(action[2]);
       else if (action[0] == 'jstree:deselect_all')  $.jstree._reference($(action[1])).deselect_all();
 
+      // ## ckeditor stuff ##
+      else if (action[0] == 'focus_ckeditor')       kivi.focus_ckeditor_when_ready(action[1]);
+
       // ## other stuff ##
       else if (action[0] == 'redirect_to')          window.location.href = action[1];
       else if (action[0] == 'flash')                kivi.display_flash(action[1], action[2]);

diff --git a/js/kivi.js b/js/kivi.js
index 68a5e41..469d889 100644 (file)
--- a/js/kivi.js
+++ b/js/kivi.js
@@ -27,6 +27,51 @@ namespace("kivi", function(ns) {
     ns._locale = locale;
   };
 
+  ns.set_focus = function(element) {
+    var $e = $(element).eq(0);
+    if ($e.data('ckeditorInstance'))
+      ns.focus_ckeditor_when_ready($e);
+    else
+      $e.focus();
+  };
+
+  ns.focus_ckeditor_when_ready = function(element) {
+    $(element).ckeditor(function() { ns.focus_ckeditor(element); });
+  };
+
+  ns.focus_ckeditor = function(element) {
+    var editor   = $(element).ckeditorGet();
+               var editable = editor.editable();
+
+               if (editable.is('textarea')) {
+                       var textarea = editable.$;
+
+                       if (CKEDITOR.env.ie)
+                               textarea.createTextRange().execCommand('SelectAll');
+                       else {
+                               textarea.selectionStart = 0;
+                               textarea.selectionEnd   = textarea.value.length;
+                       }
+
+                       textarea.focus();
+
+               } else {
+                       if (editable.is('body'))
+                               editor.document.$.execCommand('SelectAll', false, null);
+
+                       else {
+                               var range = editor.createRange();
+                               range.selectNodeContents(editable);
+                               range.select();
+                       }
+
+                       editor.forceNextSelectionCheck();
+                       editor.selectionChange();
+
+      editor.focus();
+               }
+  };
+
   ns.init_tabwidget = function(element) {
     var $element   = $(element);
     var tabsParams = {};
@@ -44,6 +89,34 @@ namespace("kivi", function(ns) {
     $element.tabs(tabsParams);
   };
 
+  ns.init_text_editor = function(element) {
+    var layouts = {
+      all:     [ [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript' ], [ 'BulletedList', 'NumberedList' ], [ 'RemoveFormat' ] ],
+      default: [ [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript' ], [ 'BulletedList', 'NumberedList' ], [ 'RemoveFormat' ] ]
+    };
+
+    var $e      = $(element);
+    var buttons = layouts[ $e.data('texteditor-layout') || 'default' ] || layouts['default'];
+    var config  = {
+      entities:      false,
+      language:      'de',
+      removePlugins: 'resize',
+      toolbar:       buttons
+    }
+
+    var style = $e.prop('style');
+    $(['width', 'height']).each(function(idx, prop) {
+      var matches = (style[prop] || '').match(/(\d+)px/);
+      if (matches && (matches.length > 1))
+        config[prop] = matches[1];
+    });
+
+    $e.ckeditor(config);
+
+    if ($e.hasClass('texteditor-autofocus'))
+      $e.ckeditor(function() { ns.focus_ckeditor($e); });
+  };
+
   ns.reinit_widgets = function() {
     ns.run_once_for('.datepicker', 'datepicker', function(elt) {
       $(elt).datepicker();
@@ -63,6 +136,7 @@ namespace("kivi", function(ns) {
     });
 
     ns.run_once_for('.tabwidget', 'tabwidget', kivi.init_tabwidget);
+    ns.run_once_for('.texteditor', 'texteditor', kivi.init_text_editor);
   };
 
   ns.submit_ajax_form = function(url, form_selector, additional_data) {