New: add edit in place with ckeditor

Fix: remove unused jQuery plugin ckeip

htdocs/compta/deplacement/fiche.php

@@ -346,7 +346,6 @@ else if ($id)
 			// Type
 			print '<tr><td>'.$langs->trans("Type").'</td><td>';
 			print $form->editInPlace($langs->trans($object->type), 'type', $user->rights->deplacement->creer, 'select', 'types_fees');
-			//print $langs->trans($object->type);
 			print '</td></tr>';
 
 			// Who
@@ -407,7 +406,7 @@ else if ($id)
 			// Public note
 			print '<tr><td valign="top">'.$langs->trans("NotePublic").'</td>';
 			print '<td valign="top" colspan="3">';
-			print $form->editInPlace($object->note_public, 'note_public', $user->rights->deplacement->creer, 'textarea');
+			print $form->editInPlace($object->note_public, 'note_public', $user->rights->deplacement->creer, 'ckeditor', 'dolibarr_notes');
 			print "</td></tr>";
 			
 			// Private note
@@ -415,7 +414,7 @@ else if ($id)
 			{
 				print '<tr><td valign="top">'.$langs->trans("NotePrivate").'</td>';
 				print '<td valign="top" colspan="3">';
-				print $form->editInPlace($object->note_private, 'note', $user->rights->deplacement->creer, 'textarea');
+				print $form->editInPlace($object->note_private, 'note', $user->rights->deplacement->creer, 'ckeditor', 'dolibarr_notes');
 				print "</td></tr>";
 			}
 

htdocs/core/class/html.form.class.php

@@ -149,28 +149,44 @@ class Form
      *	@param		string	$value			Value to show/edit
      *	@param		string	$htmlname		DIV ID (field name)
      *	@param		int		$condition		Condition to edit
-     *	@param		string	$area			Type of edit
+     *	@param		string	$inputType		Type of input
-     *	@param		string	$loadmethod		Name of load method
+     *	@param		string	$inputOption	Input option
      *	@return     string   		      	HTML edit in place
      */
-    function editInPlace($value, $htmlname, $condition, $type='textarea', $loadmethod='')
+    function editInPlace($value, $htmlname, $condition, $inputType='textarea', $inputOption='')
     {
     	global $conf;
     	
     	$out='';
     	
     	// Check parameters
-    	if ($type == 'textarea') $value = dol_nl2br($value);
+    	if ($inputType == 'textarea') $value = dol_nl2br($value);
-    	else if ($type == 'numeric') $value = price($value);
+    	else if ($inputType == 'numeric') $value = price($value);
-    	else if ($type == 'datepicker') $value = dol_print_date($value, 'day');
+    	else if ($inputType == 'datepicker') $value = dol_print_date($value, 'day');
     	
     	if (! empty($conf->global->MAIN_USE_JQUERY_JEDITABLE) && $condition)
     	{
-    		// Use for timestamp format
+    		if ($inputType == 'datepicker')
-    		if ($type == 'datepicker') $out.= '<input id="timeStamp" type="hidden"/>';
+    		{
-    		else if ($type == 'select' && ! empty($loadmethod)) $out.= '<input id="loadmethod" value="'.$loadmethod.'" type="hidden"/>';
+    			$out.= '<input id="timeStamp" type="hidden"/>'; // Use for timestamp format
+    		}
+    		else if ($inputType == 'select' && ! empty($inputOption))
+    		{
+    			$out.= '<input id="loadmethod" value="'.$inputOption.'" type="hidden"/>';
+    		}
+    		else if ($inputType == 'ckeditor' && ! empty($inputOption))
+    		{
+    			if (! empty($conf->fckeditor->enabled))
+    			{
+    				$out.= '<input id="toolbar" value="'.$inputOption.'" type="hidden"/>';
+    			}
+    			else
+    			{
+    				$inputType = 'textarea';
+    			}
+    		}
     		
-    		$out.= '<div class="edit_'.$type.'" id="'.$htmlname.'">';
+    		$out.= '<div class="edit_'.$inputType.'" id="'.$htmlname.'">';
     		$out.= $value;
     		$out.= '</div>';
     	}

htdocs/core/js/editinplace.js

@@ -44,6 +44,36 @@ $(document).ready(function() {
 			}
 		}
 	});
+	$('.edit_ckeditor').editable(urlSaveInPlace, {
+		type		: 'ckeditor',
+		id			: 'field',
+		onblur		: 'ignore',
+		tooltip		: tooltipInPlace,
+		placeholder	: placeholderInPlace,
+		cancel		: cancelInPlace,
+		submit		: submitInPlace,
+		indicator	: indicatorInPlace,
+		ckeditor	: {
+			customConfig: ckeditorConfig,
+			toolbar: $('#toolbar').val()
+		},
+		submitdata	: {
+			type: 'ckeditor',
+			element: element,
+			table_element: table_element,
+			fk_element: fk_element
+		},
+		callback : function(result, settings) {
+			var obj = $.parseJSON(result);
+			
+			if (obj.error) {
+				$(this).html(this.revert);
+				$.jnotify(obj.error, "error", true);
+			} else {
+				$(this).html(obj.value);
+			}
+		}
+	});
 	$('.edit_text').editable(urlSaveInPlace, {
 		type		: 'text',
 		id			: 'field',

htdocs/includes/jquery/plugins/ckeip/ckeip.js

@@ -1,70 +0,0 @@
-/*
-# CKEDITOR Edit-In Place jQuery Plugin.
-# Created By Dave Earley.
-# www.Dave-Earley.com
-*/
-
-$.fn.ckeip = function (options, callback) {
-
-    var original_html = $(this);
-    var defaults = {
-        e_height: '10',
-        data: {}, e_url: '',
-        e_hover_color: '#eeeeee',
-        ckeditor_config: '',
-        e_width: '50'
-    };
-    var settings = $.extend({}, defaults, options);
-
-    return this.each(function () {
-        var eip_html = $(this).html();
-        var u_id = Math.floor(Math.random() * 99999999);
-
-
-        $(this).before("<div id='ckeip_" + u_id + "'  style='display:none;'><textarea id ='ckeip_e_" + u_id + "' cols='" + settings.e_width + "' rows='" + settings.e_height + "'  >" + eip_html + "</textarea>  <br /><a href='#' id='save_ckeip_" + u_id + "'>Save</a> <a href='#' id='cancel_ckeip_" + u_id + "'>Canel </a></div>");
-
-        $('#ckeip_e_' + u_id + '').ckeditor(settings.ckeditor_config);
-
-        $(this).bind("dblclick", function () {
-
-            $(this).hide();
-            $('#ckeip_' + u_id + '').show();
-
-        });
-
-        $(this).hover(function () {
-            $(this).css({
-                backgroundColor: settings.e_hover_color
-            });
-        }, function () {
-            $(this).css({
-                backgroundColor: ''
-            });
-        });
-
-
-        $("#cancel_ckeip_" + u_id + "").click(function () {
-            $('#ckeip_' + u_id + '').hide();
-            $(original_html).fadeIn();
-            return false;
-        });
-
-        $("#save_ckeip_" + u_id + "").click(function () {
-            var ckeip_html = $('#ckeip_e_' + u_id + '').val();
-            $.post(settings.e_url, {
-                content: ckeip_html,
-                data: settings.data
-            }, function (response) {
-                if (typeof callback == "function") callback(response);
-
-                $(original_html).html(ckeip_html);
-                $('#ckeip_' + u_id + '').hide();
-                $(original_html).fadeIn();
-
-            });;
-            return false;
-
-        });
-
-    });
-};

htdocs/includes/jquery/plugins/jeditable/jquery.jeditable.ckeditor.js

@@ -0,0 +1,70 @@
+/*
+ * CKEditor input for Jeditable
+ * 
+ * Adapted from Wysiwyg input for Jeditable by Mike Tuupola
+ *   http://www.appelsiini.net/2008/9/wysiwyg-for-jeditable
+ *
+ * Copyright (c) 2009 Jeremy Bell
+ *
+ * Licensed under the MIT license:
+ *   http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Depends on CKEditor:
+ *   http://ckeditor/
+ *   
+ */
+
+(function($) {
+	$.generateId = function() {
+		return arguments.callee.prefix + arguments.callee.count++;
+	};
+	$.generateId.prefix = 'jq$';
+	$.generateId.count = 0;
+
+	$.fn.generateId = function() {
+		return this.each(function() {
+			this.id = $.generateId();
+		});
+	};
+})(jQuery);
+
+(function($) {
+$.editable.addInputType('ckeditor', {
+    /* Use default textarea instead of writing code here again. */
+    //element : $.editable.types.textarea.element,
+    element : function(settings, original) {
+        /* Hide textarea to avoid flicker. */
+        var textarea = $('<textarea>').css("opacity", "0").generateId();
+        if (settings.rows) {
+            textarea.attr('rows', settings.rows);
+        } else {
+            textarea.height(settings.height);
+        }
+        if (settings.cols) {
+            textarea.attr('cols', settings.cols);
+        } else {
+            textarea.width(settings.width);
+        }
+        $(this).append(textarea);
+        return(textarea);
+    },
+    content : function(string, settings, original) { 
+        /* jWYSIWYG plugin uses .text() instead of .val()        */
+        /* For some reason it did not work work with generated   */
+        /* textareas so I am forcing the value here with .text() */
+        $('textarea', this).text(string);
+    },
+    plugin : function(settings, original) {
+        var self = this;
+        if (settings.ckeditor) {
+            setTimeout(function() { CKEDITOR.replace($('textarea', self).attr('id'), settings.ckeditor); }, 0);
+        } else {
+            setTimeout(function() { CKEDITOR.replace($('textarea', self).attr('id')); }, 0);
+        }
+    },
+    submit : function(settings, original) {
+        $('textarea', this).val(CKEDITOR.instances[$('textarea', this).attr('id')].getData());
+	CKEDITOR.instances[$('textarea', this).attr('id')].destroy();
+    }
+});
+})(jQuery);

htdocs/main.inc.php

@@ -928,23 +928,6 @@ function top_htmlhead($head, $title='', $disablejs=0, $disablehead=0, $arrayofjs
 				print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jnotify/jquery.jnotify.min.js"></script>'."\n";
 				print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/jnotify.js"></script>'."\n";
 			}
-            // jQuery jeditable
-			if (! empty($conf->global->MAIN_USE_JQUERY_JEDITABLE))
-			{
-				print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.min'.$ext.'"></script>'."\n";
-				print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-datepicker.js"></script>'."\n";
-				print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-autocomplete.js"></script>'."\n";
-				print '<script type="text/javascript">'."\n";
-				print 'var urlSaveInPlace = \''.DOL_URL_ROOT.'/core/ajax/saveinplace.php\';'."\n";
-				print 'var urlLoadInPlace = \''.DOL_URL_ROOT.'/core/ajax/loadinplace.php\';'."\n";
-				print 'var tooltipInPlace = \''.$langs->transnoentities('ClickToEdit').'\';'."\n";
-				print 'var placeholderInPlace = \''.$langs->trans('ClickToEdit').'\';'."\n";
-				print 'var cancelInPlace = \''.$langs->trans('Cancel').'\';'."\n";
-				print 'var submitInPlace = \''.$langs->trans('Ok').'\';'."\n";
-				print 'var indicatorInPlace = \'<img src="'.DOL_URL_ROOT."/theme/".$conf->theme."/img/working.gif".'">\';'."\n";
-				print '</script>'."\n";
-				print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/editinplace.js"></script>'."\n";
-			}
 			// Flot
 			if (empty($conf->global->MAIN_DISABLE_JQUERY_FLOT))
 			{
@@ -960,6 +943,25 @@ function top_htmlhead($head, $title='', $disablejs=0, $disablehead=0, $arrayofjs
                 print '<script type="text/javascript">var CKEDITOR_BASEPATH = \''.DOL_URL_ROOT.'/includes/ckeditor/\';</script>'."\n";
                 print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/ckeditor/ckeditor_basic.js"></script>'."\n";
             }
+            // jQuery jeditable
+            if (! empty($conf->global->MAIN_USE_JQUERY_JEDITABLE))
+            {
+            	print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.min'.$ext.'"></script>'."\n";
+            	print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-datepicker.js"></script>'."\n";
+            	print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ui-autocomplete.js"></script>'."\n";
+            	print '<script type="text/javascript">'."\n";
+            	print 'var urlSaveInPlace = \''.DOL_URL_ROOT.'/core/ajax/saveinplace.php\';'."\n";
+            	print 'var urlLoadInPlace = \''.DOL_URL_ROOT.'/core/ajax/loadinplace.php\';'."\n";
+            	print 'var tooltipInPlace = \''.$langs->transnoentities('ClickToEdit').'\';'."\n";
+            	print 'var placeholderInPlace = \''.$langs->trans('ClickToEdit').'\';'."\n";
+            	print 'var cancelInPlace = \''.$langs->trans('Cancel').'\';'."\n";
+            	print 'var submitInPlace = \''.$langs->trans('Ok').'\';'."\n";
+            	print 'var indicatorInPlace = \'<img src="'.DOL_URL_ROOT."/theme/".$conf->theme."/img/working.gif".'">\';'."\n";
+            	print 'var ckeditorConfig = \''.dol_buildpath('/theme/'.$conf->theme.'/ckeditor/config.js',1).'\';'."\n";
+            	print '</script>'."\n";
+            	print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/core/js/editinplace.js"></script>'."\n";
+            	print '<script type="text/javascript" src="'.DOL_URL_ROOT.'/includes/jquery/plugins/jeditable/jquery.jeditable.ckeditor.js"></script>'."\n";
+            }
             // File Upload
             if (! empty($conf->global->MAIN_USE_JQUERY_FILEUPLOAD))
             {

htdocs/theme/eldy/style.css.php

@@ -1693,7 +1693,7 @@ table.cal_event td { border: 0px; padding-<?php print $left; ?>: 0px; padding-<?
 /*  jQuery - jeditable                                                            */
 /* ============================================================================== */
 
-.edit_textarea:hover, .edit_text:hover, .edit_numeric:hover, .edit_select:hover {
+.edit_textarea:hover, .edit_ckeditor:hover, .edit_text:hover, .edit_numeric:hover, .edit_select:hover {
 	background: white url(<?php echo dol_buildpath($path.'/theme/eldy/img/edit.png',1) ?>) right top no-repeat;
 	cursor: pointer;
 }