WYSIWYG Inline Edit with Jeditable

September 6th, 2008

Latest custom input for Jeditable uses jWYSIWYG editor by Juan M Martínez. This code has been almost ready for a while. This week I finally had time to fix some outstanding FireFox bugs.

If you are interested in writing your own Jeditable custom inputs read the introduction. You might also be interested in MarkItUp! custom input which is similar to jWYSIWYG input.

To test see the working demo and then download the source.

Usage

First include all needed JavaScript and CSS in your HTML.



<script src="jquery.js"" type="text/javascript"></script>
<script src="jquery.wysiwyg.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>
<script src="jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.wysiwyg.css" type="text/css">

Now you can use input type wysiwyg. Set onblur to ignore. Otherwise clicking menubar will cause editing to quit. You should also include atleast submit and cancel parameters. All jWYSIWYG settings can be passed using wysiwyg parameter. Check documentation from Juan’s webpage.


$('.editable').editable('http://www.example.com/save.php', { 
    type      : 'wysiwyg',
    onblur    : 'ignore',
    submit    : 'OK',
    cancel    : 'Cancel',
    wysiwyg   : { controls : { separator04         : { visible : true },
                               insertOrderedList   : { visible : true },
                               insertUnorderedList : { visible : true }
                }
    }
});

I tested the code with IE6, IE7, FF2, Safari and Chrome. In case you find any problems drop me a line.

Tagged with jeditable jquery

26 Responses to “WYSIWYG Inline Edit with Jeditable”

Ilija Studen says:
September 7th, 2008 at 04:57 PM
“Working demo” is not working for me (Safari 3.1.2 on Mac OS X 10.5.4). When I click on “edit in place” I get redirected back on http://www.appelsiini.net/projects/jeditable page.
Mika Tuupola says:
September 7th, 2008 at 07:02 PM
Your browser is following a link in the text. Click anywhere else than on the link. Following a link can be disabled with jQuery. But I just remove the link from example text because it is confusing.
Prashant Sakhuja says:
September 18th, 2008 at 06:31 AM
Mika, Great work with the script. I was not sure how you are saving the edited text using: http://www.appelsiini.net/projects/jeditable/wysiwyg/php/save.php Can you share the logic for this.
Mika Tuupola says:
September 18th, 2008 at 10:00 AM
Prashant: Same way as you would you save text with any normal form? Check the source for example scripts. You can ignore all parts which say Textile, unless you plan to use Textile rendering.

Thiago says:
September 18th, 2008 at 06:59 PM

Dear Mika, The style is applied in the form. You do not think it would be better if it were applied in the input?

Thus:


/* apply css or style or both */
if (settings.cssclass) {
    if ('inherit' == settings.cssclass) {
        input.attr('class', $(self).attr('class'));
    } else {
        input.attr('class', settings.cssclass);
    }
}

if (settings.style) {
    if ('inherit' == settings.style) {
        input.attr('style', $(self).attr('style'));
        /* IE needs the second line or display wont be inherited */
        input.css('display', $(self).css('display'));                
    } else {
        input.attr('style', settings.style);
    }
}

Mika Tuupola says:
September 18th, 2008 at 07:06 PM
Thiago: I guess it’s just matter of taste how you want to write selectors. You can style input now with:
form.editable > textarea { color : #F00 }
If class was applied to input you would:
textarea.editable { color : #F00 }
Ian Tresman says:
October 3rd, 2008 at 11:12 AM
Two suggested features for Jeditable:

1. Jeditable activates only after “login” (or authentication)

2. After login, editable areas optionally are (a) all highlighted on the page, and/or (b) highlighted when cursor moves over element.
Mika Tuupola says:
October 4th, 2008 at 12:23 AM
Ian: Good points, but both of them are something that should be handled outside of the plugin. For example:

1) Backend should add class editable (or something similar) after authentication to those elements which should become editable.

2) You are already using jQuery so why not just use jQuery to handle highlighting. Something like:
```
$('.editable').hover(
    function() {
        $(this).addClass('hover');
    }, 
    function() {
        $(this).removeClass('hover');
   }
);
```
none says:
October 17th, 2008 at 08:58 AM
Where I can find a list of all the options editor jwysiwyg?
Mika Tuupola says:
October 18th, 2008 at 06:22 PM
From jWYSIWYG homepage.
Ian Tresman says:
October 19th, 2008 at 12:52 AM
Is you file, save.php available for download somewhere, so we can see how to process the edited text, and pass it back to the original HTML file.
Mika Tuupola says:
October 20th, 2008 at 10:34 AM
All files are downloadable from Subversion. The example save.php script is pretty rudimentary. It just saves values to new row in database. You can also ignore all Textile parts. They are used for demoing Textile rendering.
Thiago Santos says:
October 24th, 2008 at 11:26 PM
Hello !

You wrote a great plugins, but i founded what appear be a “bug”: when the object selected is a true link like: “Google.com When you click, the link is loaded and therefore the input field appears.

best regards, Thiago Santos
Mika Tuupola says:
October 25th, 2008 at 01:55 AM
Thiago: I have been thinking for a while is it a bug or feautre :) Meaning should Jeditable override default behaviour link or not. In any case you can fix it with something like:
```
$('.editable > a').bind("click", function(){
    return false;
});
```
Thiago Santos says:
October 26th, 2008 at 12:16 AM
Thanks for your reply Mika, jEditable could have an option for enable or not this “bug-feature”!

Thanks again, sucess !

Thiago Santos
Leo Machado says:
October 30th, 2008 at 03:01 PM
Hi Mika!

Where is DB.php file? i search in http://svn.appelsiini.net/viewvc/javascript/trunk/jquery_jeditable/php/

but i didn`t found! thanks
Mika Tuupola says:
October 30th, 2008 at 06:03 PM
It is part of PEAR DB library. You can install it from commandline with:
```
>pear install DB
```
Leo Machado says:
November 4th, 2008 at 04:00 PM
Hi again Mike, and sorry for my English..

this script is very good, and i could adapt to my need, but the only question is when I edit the “editable_textile,” he query the database, but always when I click, he brings an old result.

Is there any way to eliminate this cache?

Thank you, Leo
Mika Tuupola says:
November 4th, 2008 at 08:05 PM
Leo: Do you have example code somewhere online? I am not sure if I understand correctly when the old content comes back. When you start editing or when you submit edited content.

In any case to me it sounds like your database query fails to save the content.
Doug Beleznay says:
November 11th, 2008 at 01:41 AM
in comment # 8 you suggest adding the .hover method through jquery – but I have found some problems with that.

The way that Jeditable resizes itself during editing means that when I click the save or cancel it sometimes does not catch the mouseexit events, so the item stays highlighted.

I have tried adding a callback function in order to remove it, but that doesn’t work if you click on the cancel button (it looks like the callback isn’t getting called)

callback : function(){$(this).removeClass(‘hover’);}

It looks like knight_killer has added callbacks for mouse over and leave at http://stackoverflow.com/questions/152104/problems-using-jeditable-and-autogrow

I might try that, but was wondering if you had any other thoughts.
Brad says:
November 21st, 2008 at 09:42 AM
Hey there,

I’ve been trying to get jeditable working with 90% success – can edit text once, and after that I get the error “DB Error: constraint violation”. I’m new to sqlite/pear, and am trying to understand what could be going on.

It appears like the db/table got set up right:

sqlite> .dump BEGIN TRANSACTION; CREATE TABLE config (id INTEGER primary key, token VARCHAR, value TEXT, date DATETIME); INSERT INTO config VALUES; COMMIT; sqlite>

... and there are no errors except the “constraint violation” that returns as status for “echo $status = $dbh->query($query);”

This is pretty much the neatest plugin I’ve ever seen and I’m trying hard to get it to work as-is before I port it over to mysql.

Thanks so much!

Cheers, Brad
Touya says:
November 24th, 2008 at 11:14 AM
I find a bug with loadurl: script:
```
$("#editable_discount").editable("/seller/setting_discount", { 
  loadurl  : '/seller/load_discount',
  style  : "display: inline;",
  tooltip   : 'click to edit',
  type      : 'text'
});
```
html
```
<div id="editable_discount">55555</div>
```
moves cause the bug:

1 click editable_discount,modify value into 444,confirm 2 click editable_discount again,then loadurl get 55555 back again, seems IE7 cached the result… should I add t=new Date() somewhere after the loadurl?How to ? Thanks..
Mika Tuupola says:
November 27th, 2008 at 06:10 PM
Touya: Are you sure your values are saved to database? Does this happen with IE7 only and others work as expected?
Mika Tuupola says:
November 28th, 2008 at 12:02 PM
Brad: It sounds like your DB installation cannot create sequences. Have you tried with MySQL driver? DB library is actually kinda old and I should rewrite examples using PDO.
Zouz says:
December 23rd, 2008 at 05:14 PM
What if i want the dir to be RTL ???
Peter says:
January 2nd, 2009 at 01:59 PM
Hi Mika,

Thanks for the very fine work you publish here! Independantly, jEditable and jWysiwyg are very useful work by themselves. I wonder what is the advantage of having them both together? E.g. if I need Wysiwyg, I’d just use jWysiwyg (alone).

Keep up the good work!

Mika Tuupola