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.
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.
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.
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.
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.
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); } }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 }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.
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'); } );October 17th, 2008 at 08:58 AM
Where I can find a list of all the options editor jwysiwyg?
October 18th, 2008 at 06:22 PM
From jWYSIWYG homepage.
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.
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.
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
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; });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
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
October 30th, 2008 at 06:03 PM
It is part of PEAR DB library. You can install it from commandline with:
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
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.
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.
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
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
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..
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?
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.
December 23rd, 2008 at 05:14 PM
What if i want the dir to be RTL ???
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!
January 7th, 2009 at 10:32 PM
Hi Mika, thanks for the script, life just got easier with it =)
but you’ve got to show us how’s your SAVE.PHP is functioning, the link you’ve provided above is empty – http://svn.appelsiini.net/viewvc/javascript/trunk/jquery_jeditable/php/ and erorring…
here is the code i use to save (which DOES actually update database)
$newsline = $_POST['value']; $ID = $_POST['id']; $q_add = "Insert into news (News,Date) values('".$newsline."',".$CurDate.");"; $q_edit = 'UPDATE news SET News="'.$newsline.'" WHERE ID='.$ID.';'; if($ID == "no") { $queue = $q_add; } else { $ID = (int)$ID; $queue = $q_edit; } mysql_query($queue); $NewsID = mysql_insert_id(); mysql_close($db); // if it's a new entry - disply it: if ($NewsID){ echo '<div class="newsline" id="'.$NewsID.'">'.$newsline.'</div><br /><br />'; }and after request is processed it displays: Click to edit which is default placeholder for jeditable…
i’ve tried displaying it as if it was a new entry tried to return ID and Value back… nothing works
or i’m just getting it wrongly?
January 11th, 2009 at 07:26 PM
Zouz: I do not understand your question. What is RTL directory?
Peter: If you just need wysiwyg textarea use jWysiwyg alone. If you want wysiwyg inline editing use Jeditable with wysiwyg input.
January 11th, 2009 at 07:36 PM
Elen: Code has been moved to GitHub. You can also find PHP examples from there.
If the textholder text is displayed after submitting then your script is not echoing anything back. Also you should not echo html back (unless you also submitted some html). Instead echo just the edited text back.
If you have example page somewhere online I could help more.
January 15th, 2009 at 12:15 AM
Hi Mika, thanks for coming back. I’ve sorted the problem… can’t remember how.. i think it was something to do with html code i had and the fact that i had another button on the page as well..
January 17th, 2009 at 09:35 PM
Hi Mika, got another problem… I need another editable area to use on the same page. Without WYSIWYG… I also need that are to return additional data. Here is the code:
$(document).ready(function() { $('.Name').editable('http://localhost/files/save.php';, { submitdata : {table: '".$page."'}; });$('.edit').editable('http://localhost/files/save.php', { type : 'wysiwyg', onblur : 'ignore', submit : 'OK', cancel : 'Cancel', wysiwyg : { controls : { separator04 : { visible : true }, insertOrderedList : { visible : true }, insertUnorderedList : { visible : true } } } });});Where $page – is PHP var (i.e. “friends”). I need extra data to be submited for WYSIWYG as well, so i can pass to save.php a var, which contains a name of a database table to update. Neither ‘Name’ or ‘edit’ works…. Can you please advise how to pass extra var via $_POST to save.php for both above?
January 21st, 2009 at 10:23 AM
Elen: How does your generate HTML look like. Do you actually output the php variables into the JavaScript code. Maybe you should be doing something like this instead:
$('.Name').editable('http://localhost/files/save.php';, { submitdata : {table: '<?php print $page ?>'}; });January 21st, 2009 at 06:54 PM
Hi Mika, thanks for replying. i’ve sort it. Apparently it shouldn’t have ” ; ” after closing } in – submitdata : {table: ‘<?php print $page ?>‘}; – i’ve copied it from here (perhaps you want to amend?) – http://www.appelsiini.net/projects/jeditable
And while i have your attention – can you give me some guidance as how to: 1. within wysiwyg-for-jeditable upload a picture onto the server (thru Browse) 2. create a row in database 3. display picture and save both link to a picture and text added into a databse?
basically i need for user to be able to create a new entry on the website with ability to upload pictures. Now i can put a link to a picture, providing that picture is already loaded onto the server. But my user is not familiar with any of server technology, so i need to make it simple for her. Algorithm above is only provisional – may be you have a better suggestion within jeditable (like uploading a pic to a temp directory on the server and only save it in the designated folder and database when user submit new entry via wysiwyg-for-jeditable form?). Does this make sense?
January 22nd, 2009 at 05:58 PM
the packed version of jeditable has an error for a ”;”...pls check. :)
btw…thanks for sharing such a nice and handy tool. will buy you a beer for sure if we ever meet; the world is too small nd u never know!
January 24th, 2009 at 12:42 AM
Cool plugin
I change ajaxoptions but i don’t know how do for reset the status of element
ajaxoptions : { dataType: ‘json’, success: function(data) { alert(data.result); }
With this code the form remain append and don’t return automatically to plain text.
January 28th, 2009 at 12:04 PM
Elen: Yes it does make sense. However since I haven’t had need for something similar myself I haven’t tried to do it. I am not sure if current ajaxupload input type even supports that…
Kunal: Thanks for heads up. Will check. Although one should use minified version with mod_deflate. Packed version cause eval() in each page request. I have been planning to stop generating packed versions.
svacant: You might want to spy the original plugin code. It looks like this:
success : function(result, status) { $(self).html(result); self.editing = false; callback.apply(self, [self.innerHTML, settings]); if (!$.trim($(self).html())) { $(self).html(settings.placeholder); } },February 1st, 2009 at 06:51 PM
I’ve found a browser dependent problem. jeditable.wysiswyg works fine for me under the Safari 3.2.1, but fails under Firefix 3.0.5 – It looks like the wysiwyg plugin is not initializing. I’m new-ish at jquery, but given it’s working under Safari, I’m feeling stuck.
@Error: $("textarea", self).wysiwyg is not a function Source File: http://localhost/media /js/jquery.jeditable.wysiwyg.js Line: 49 plugin : function(settings, original) { var self = this; /* Force autosave off to avoid "element.contentWindow has no properties" */ settings.wysiwyg = $.extend({autoSave: false}, settings.wysiwyg); if (settings.wysiwyg) { _setTimeout(function() { $('textarea', self).wysiwyg(settings.wysiwyg); }, 0);_ } else { setTimeout(function() { $('textarea', self).wysiwyg(); }, 0); } }, @February 3rd, 2009 at 04:08 PM
Sean: Does the online demo work for you? Runs ok with my FireFox 3.0.5?
Can you put your code somewhere online so I could test?
February 12th, 2009 at 02:20 AM
Hi Mika,
I really like your plugin, it’s exactly what I need but I’m having trouble getting the save function to work.
The save.php script uses sqlite to function but I don’t think my server has this installed (or is it possible for me to get it running?).
Is there a way for the save script to save the updates directly on the original page or in a txt file?
I would love it if the edits could be saved without the need of a database.
Hope you can help me out.
Thanks for the awsome plugin! Love it!
Greetings, Raf
February 12th, 2009 at 11:52 AM
Raf: Example files are just example files. They are not meant for production use. But if you do not need to save anything, but just display the edited content in screen just echod the POST:ed value back from server.
February 12th, 2009 at 06:24 PM
Hi Mika,
I figured it out.
I now have a save.php writing the value to a txt file named after the id of the div that is edited.
Thanks again for this awsome plugin!
Greetings, Raf
February 20th, 2009 at 03:49 PM
Hi Mika, using your plug in – all fine =) thank you for help.
Got a question/suggestion: you have Browse option, when inserting image in IE, which doesn’t work for uploading an image to the server.
is there anyway to make it work? would be brilliant..
i’m currently trying to integrate http://valums.com/ajax-upload/ , but it’s a bit a pain in the a**.. =( too many additional files to load with the page…
March 10th, 2009 at 03:05 PM
Elen: It is part of jWYSIWYG plugin which is not written by me. I do now know that plugin well enough to give support on it.
However inserting the image with jWYSIWYG is not supposed to upload anything. You just insert and URL which points to the image.
March 11th, 2009 at 07:02 AM
I wanted to set maxlength on the text fields so I added
maxlength : '';to var settings={and
input.attr('maxlength', settings.maxlength);after
input.attr('name', settings.name);now I just set maxlength: ‘180’ to get a character length of 180 in my text input fields! Excellent!
Maybe you can add this permanently?
March 12th, 2009 at 01:52 AM
Hi, I have been using jeditable and loving it! I am experiencing problems to use it with livequery (make freshly created divs editable), could you post some tips for doing it the right way? Thanks a lot again for making webpages looking like apps!
March 13th, 2009 at 12:23 PM
Jean-Marc: What kind of problems did you encounter? Do you have example page somewhere online?
March 18th, 2009 at 05:05 PM
thank you Doug K for posting the “maxlength” ability. i was looking for a way to implement this control! Mika, jeditable is awesome! great work!
March 20th, 2009 at 08:00 PM
Hey there, maybe it is just me, but I have found that the bold and italic buttons in the WYSIWYG editor do not save. This is apparent even in the demo posted here?
Trying to fix, any ideas? Will let you know if I come across anything!
March 20th, 2009 at 08:19 PM
Oops I wasn’t checking properly – it IS saving it with styled SPAN tags. Not sure why my displayer isn’t showing them, same with the demo, but it IS saving the italic/bold sections.
March 20th, 2009 at 08:40 PM
Hey there! Very sorry for the spam but I fixed it. It is storing everything with slashes, so upon display, simply use stripslashes and it all works perfect!
March 22nd, 2009 at 01:30 AM
Hi. Congratulations for the great plugin!
I’m having an hard time here when I try to append a new element to the DOM, on the fly via jQuery, that should become editable, like the other already on the DOM.
The new element is correctly inserted on the DOM but it doesn’t become editable.
I’m probably missing something here… My level of expertise with Javascript is not very high and neither I am very familiar with jQuery.
Anyway, any help from you with this would be very much appreciated!
March 22nd, 2009 at 01:54 AM
Sorry for the spam… as I am just using an offline tests server I guess I should give you an example of the code I’m using:
In the $(document).ready(function() I added at the beginning, just before the Jeditable call, something like this:
$('.addTxtBox').click(function(){ $('.userContent').append('div class="edit_area">NEW DIV</div>'); } After this I have the Jeditable call: $('.edit_area').editable('http://192.168.1.2/webtests/save.php', { bla bla bla ... }The problem is that it works for the already existing div’s of class=edit_area but any new div created via the jQuery append manipulator doesn’t become editable. If I save the page to a file and examine the source html code I verify that the new div was inserted correctly in the place were it should.
Any suggestion? Thanks in advance for any help and, again, sorry for the double post.
March 24th, 2009 at 11:16 AM
Mika,
First of all, let me say that I love the jEditable plugin and am using it everywhere I can.
I have an issue using the ajaxupload custom input. The image uploading is fine. Upon successful completion and all the database stuff is finished, my php script is outputting a little form where users can add a name and caption to the image row. My issue is that if I click anywhere in the form, jeditable initiates again and my form disappears and I get the file upload form again. What would you advise I do?
Thanks
March 31st, 2009 at 06:31 PM
Jasmine: Thanks for the heads up. Will fix the demo.
Paulo: You might want to check this link
March 31st, 2009 at 06:37 PM
David: Several ways to do it. You can disable Jeditable by either unbinding the event after submitting:
$(".editable").editable("http://www.example.com/save.php";, { type : "textarea", submit : "OK", callback: function(value, settings) { $(this).unbind(settings.event); } });or if you are using new version of Jeditable:
$(".editable").editable("http://www.example.com/save.php";, { type : "textarea", submit : "OK", callback: function(value, settings) { $(this).editable('disable'); } });and then later enable it again with:
$('.editable').editable('enable');April 4th, 2009 at 01:29 PM
Hi. Thanks so much for all your work on the plugin. Noticed a tiny typo on http://www.appelsiini.net/projects/jeditable .
In the Textile/Markdown example `type : ‘textarea’` should have a comma after it.
I’ve used the plugin on several projects lately. Always a joy.
Thanks again, Aaron.
April 6th, 2009 at 06:04 PM
Aaron: Fixed. Thanks for the heads up!
April 20th, 2009 at 11:17 AM
Great plugin! Very extensible and easy to use.
I have one issue though. I would like to activate the editable not by clicking the actual text (or div) but by clicking an icon positioned just above the editable area. I don’t see how that can be done using the options. Am I missing something or do I have to tweak it somehow to get that working?
Thanks
April 20th, 2009 at 11:26 AM
...me again… Please disregard my previous post since my brain wasn’t switched on for that one. It was easilly solved by somethinglike:
$(’#editableDiv’).trigger(‘click’);
Thanks again!
April 26th, 2009 at 09:31 PM
Hi,
Experiencing a little problem using the WYSIWYG inline editor with jEditable. I have succesfully installed it and got it actually to work. But here’s the thing: Once I specify options/controls for the wysiwyg editor, these are only being applied to the first ‘editable’ area I activate. Once I click/activate a second or third ‘editable’ area they display the wysiwyg editor with default settings.
Here’s some code:$('.postContent').editable('editdatabase.php', { name : 'content', submit : 'OK', cancel : 'Cancel', type : 'wysiwyg', onblur : 'ignore', wysiwyg : { controls : { underline : { visible : true }, insertImage : { visible : false }, h1mozilla : { visible : false }, h2mozilla : { visible : false }, h3mozilla : { visible : false }, h1 : { visible : false }, h2 : { visible : false }, h3 : { visible : false } } } });April 28th, 2009 at 07:31 PM
Oh and it’s happening in the working demo as well.. Try clicking first one editable area, then see that every setting has been resetted once you open other editable areas…
April 29th, 2009 at 04:43 PM
hugo: Seems like you just found a bug. Thanks for the heads up. Will fix it soon (unless you already have a patch?).
April 30th, 2009 at 09:15 PM
Don’t have a patch yet,looking into it. I think I’ll email you the details of my progress.
May 10th, 2009 at 01:13 AM
Hi
Great plugin!
I´m using the plugin for a newsletter template, it has 4 instances of wysiwyg on the same page. So I dont want to insert in db before user is finished with all of the forms. I am fine with one form, but I need some help with multiple. Anyone?
Thanks!
May 19th, 2009 at 04:55 PM
Frank, not sure if this will work for your site, but I had a similar challenge with a project (gr8werk.com). What I ended up doing is 1.) inserting an empty row into a temp db, and getting the id number 2.) adding submitdata: { working_on: ’$id_number’ } to the main jeditable function 3.) and inserted all user input into that temp db row and updated those fields as the user continued to edit and 4.) when the user “submitted” the form, all those temp values moved to the final db and were deleted from the temp db. Also, created a cron to delete anything in the temp db more than a few hours old. Not sure if this is the best way to accomplish, but it worked for me. Good luck!
June 10th, 2009 at 03:29 AM
Great plugin Mika. There seems to be a bug with the indicator setting and Chrome/Safari browsers.
When I add:indicator : '<img src="images/indicator.gif">',to the defaults, the script no longer works in Chrome/Safari.July 10th, 2009 at 06:16 AM
Love the editor, however I found that if I put in any of the following characters, they are escaped for some reason upon saving:
’ ” \
ends up being:
\’ \” \\
Anyone else notice this, and if so is there a workaround?
July 10th, 2009 at 07:24 PM
I, like other people here, would like to be able to make elements editable that have been loaded in via the jquery ‘load’ method.
Is this possible?
I’m happy to provide a demo if that would help.
July 18th, 2009 at 03:52 AM
Good point, I am using it, but dont know how to do Signed
July 23rd, 2009 at 03:13 PM
Hi Mika, thanks for the great plugin. I’ve been using it with success for some time already. Today I encountered a strange problem and after trying for some hours to solve it I though I’d ask you quickly ‘cause maybe you have encountered this or have an easy explanation.
For one of my editable divs I use the submit button. Now it happens that if I click the editable area and the submit-button appears, my sidebar (floating right div of my two column layout) moves down and starts only after the editable form. like so.
normal:I’d be glad to get some hint, if possible! Thank you!
July 23rd, 2009 at 03:30 PM
I see that my “drawing” wasn’t posted as intended, another try:
normal:
after click:
July 23rd, 2009 at 03:31 PM
well, well: I used textile but it is not displayed as it should be. anyways I guess it’s clear what I mean.
August 3rd, 2009 at 01:59 PM
brad: You PHP is adding the slashes. Check PHP manual for stripslashes, addslashes and magic_quotes_gpc.
August 3rd, 2009 at 02:01 PM
Michael Smith: Check jQuery manual for Why do my events stop working after an AJAX request?.
August 27th, 2009 at 12:47 PM
Thanks for Jeditable, it is brilliant. Only thing is that you have php pulling data to load data into the fields. I am looking for a way to load data from my database on all my span tags before and after editting. Where you have <?php print file_get_contents($url . ‘load.php?id=select_1’) ?> I need to put something in JavaScript to do the same thing.
My horrible code is like this:
$(".focus").editable("file.php?Action=SetField&id=<?php echo $_GET['id']?>", { indicator : "<img src='images/rotation.gif'>", loadurl : "file.php?Action=GetField&id=<?php echo $_GET['id'] ?>", event : "focus", width : 150, onblur : "submit", style : "inherit" });Is it a hopeless case?
August 27th, 2009 at 07:24 PM
Jonathan: Those file_get_contents() calls are not needed for Jeditable. They are just kind of poor mans CMS emulation for the demo pages.
You need to use loadurl parameter only if the content of span (or any other) tags differs from what you want to show in the input field when you edit it. For example when you want to edit the element using Textile or Markdown etc.
September 10th, 2009 at 09:32 AM
Anyone here use this plugin in asp.net web services?
$(".editable").editable( function(value, settings) { var myParam = new Object(); myParam.key = "EditedString"; myParam.param = value; alert(myParam.key); myParam.revert = this.revert; myParam.rtnValue = value; $.getJSON( "WebService/ReceiveEditString", myParam, function( json ) { if( !json.status ) { myParam.rtnValue = myParam.revert; } } ); return( myParam.rtnValue ); }, { loadurl : "http://www.appelsiini.net/projects/jeditable/php/json.php", type : "select", submit : "OK", tooltip: "Click here to edit", event : "click" } ); And this is my web Services method. [WebMethod] public void ReceiveEditString(String EditedString) { System.IO.File.WriteAllText(@"C:\WriteLines.txt", EditedString.ToString()); }Could someone tell me why it not work??
October 9th, 2009 at 09:52 PM
Would someone mind telling me how to set up the database for this plugin…everything is working for me with exception to saving.
I realize this is quite basic for some of you but totally new for me. I would greatly appreciate the explanation.
October 17th, 2009 at 05:54 PM
Can someone tell me how to add a login area so only the person with the correct password can make edits? Thanks.
October 18th, 2009 at 01:07 AM
How can I make it focus on the WYSIWYG when you first enter it, like the other inline editors do?
I’ve tried the following in the plugin, and I’ve even tried delaying the focus() with a setTimeout
$(‘textarea’, self).wysiwyg( $.extend({autoSave: false}, settings.wysiwyg) ).focus();
November 4th, 2009 at 06:38 PM
I am just adding on to what Doug K has said in his comment. The reason of this comment is to be more clear and nothing else.
In order to use maxlength parameter you have to do 2 things (just 2 and that’s it):
1. You have to add this code just under input.attr(‘name’, settings.name);
Here’s the code that you have to add: input.attr(‘maxlength’, settings.maxlength);
2. Now you have to call maxlength from your page. For example:
maxlength : ‘40’
This only applies to input tag and NOT textarea
November 10th, 2009 at 03:41 PM
As Max asked some post above mine, could you please help us to create an extremely simple backend allowing just the admin to edit elements after login? The best would be to find a working code, ready to use. I’m just a webdesigner with little knowledge about coding, I often use code I found out-of-the-box. I think it would be amazing to be able to use a wysiwyg inline editor like a real cms.
November 19th, 2009 at 11:00 PM
Back on April 26th Hugo asked about a problem he was having with the control parameter being reset to default when you click/activate a second or third ‘editable’ area.
I too am experiencing this issue and I’m curious if a solution ever came available?
November 20th, 2009 at 12:58 AM
I’m only using jeditable with jwysiwyg on one page so my solution is to code my controls directly into the wysiwyg.js file so they will persist. I did this by editing line 63 of the jquery.wysiwyg.js file which originally says var controls = {}. I put my dictionary of controls in here instead of on the .editable().
I don’t think this is the fault of wysiwyg.js as it’s not receiving the controls value one any clicks beyond the first. I spent about 2.5 hours trying to find the bug. All I can tell you is that all other options are being passed back in correctly including the type: ‘wysiwyg’. Looking at settings.wysiwyg after clicking an .editable shows that it only contains autoSave and no longer has a value for controls.
Wish I could be of more help, but a deadline looms.
November 23rd, 2009 at 04:50 PM
Josh: I am not really using this input anymore so I have not hunted the bug. However if you find a solution a patch would be appreciated.
December 5th, 2009 at 03:39 AM
Great info, many thanx! You’re website has been a goldmine of information.
I have one small question which may or may not be possible.
How would one allow the onblur event to actually submit data and keep the textarea editable?
I’ve tried hooking the onblur event with a function and using a $.post() request. However, it only works once and it really doesn’t produce the desired result.
Any pointers would be helpful.
Thanks.
February 2nd, 2010 at 10:09 PM
I have error with this plguin: I type <test> in the editable text box. When i click edit it show not like <test> but like: <test>. Next time when i click edit its show like : <test> Next time this: &lt;test&gt;... And so own, i dont know where could be the problem, please help!