MarkItUp! for Jeditable
April 8th, 2008
In the heels of autogrow textarea comes next custom input for Jeditable. This time we will use markItUp! universal markup editor by Jay Salvat.
If you are not familiar with Jeditable custom inputs read the introduction. Also see autogrow and timepicker tutorials.
If you are just looking for the code download it here.
Creating custom input
Throughout the tutorial we will be using following code to trigger Jeditable. Note variable called markitupHTML. It holds configuration of used markItUp! tagset. In this example I use slightly modified HTML tagset. For more information on tagsets see markItUp! documentation.
$(".edit").editable("http://www.example.com/save.php", {
type : "markitup",
submit : 'OK',
cancel : 'Cancel',
tooltip : "Click to edit...",
onblur : "ignore",
markitup : markitupHTML
});
Again we start by adding custom input type called markitup.
$.editable.addInputType('markitup', {
});
Right now code does not do much anything. It only creates the buttons and hidden input. Click text below to see it in action.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Add textarea element
Next we add texarea element. Unlike in previous tutorials we do not copy and paste code from default textarea element. Instead we use a shortcut:
$.editable.addInputType('markitup', {
element : $.editable.types.textarea.element
});
Now normal textarea is added. Click text below to see how it works.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Attach markItUp! to textarea
We wanted to see pretty textarea with toolbar. First we search textarea input inside Jeditable form. This is done with $(‘textarea’, this) selector. Then we attach markItUp! to it.
$.editable.addInputType('markitup', {
element : $.editable.types.textarea.element,
plugin : function(settings, original) {
$('textarea', this).markItUp(settings.markitup);
}
});
Now you can edit code with tag editor. Click text below to test yourself.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
And we are done. This illustrates how easy it is to customize Jeditable with other plugins. Only six lines of code can create pretty inline tag editor. There is also separate Textile demo. As always, all suggestions and feedback are welcome.
April 30th, 2008 at 03:23 PM
Hello there,
a huge thanks for this plugin and the ability to link it with markitup :)
I don’t know if I can post this here but …
I am running through a problem with ie7 and making elements in an iframe editable.
I posted an example here :
http://www.thomas-mery.net/dev/jeditable_iframe/
what happens is that when trying to edit an element in the iframe ie7 chokes on line 212 of jquery.jeditable.js
/* add created form to self */ $(self).prepend(form);
complaining that form is an ‘invalid argument’
replacing form by form.html() makes the form appear but no events seem to be working (Enter, Escape …)
would you point me in a direction where i can fid ways to fix this ? Or just point out what I am missing :)
Thanks a lot for any help, as I’m kind of stuck with this issue
Thomas
June 16th, 2008 at 01:49 PM
Hi there, first to say: Great Work! :)
But i’m searching for the possibility to style the input-fields (input, textarea). Would be nice, if you could help me. :)
Greets
June 19th, 2008 at 03:47 AM
there seems to be a problem with the width of the markitup-div around the textarea.
June 27th, 2008 at 07:44 PM
Sorry I missed your comment. You can style forms directly in with css. If you want to give the form a special class, for example foobar you can use cssclass parameter:
$(".editable").editable("http://www.example.com/save.php", { type : 'textarea', submit : 'OK', cancel : 'cancel', cssclass : 'foobar' });Resulting HTML will be like this:
<p class="editable" id="something"> <form class="foobar"> <textarea name="value"></textarea> <button type="submit">OK</button> <button type="cancel">cancel</button> </form> </p>Then just style all elements with your CSS.
September 16th, 2008 at 08:32 AM
just a query…
is there anyway to close the jeditable area programmatically? the situation arises where the user might click a link that will load data into the area that jeditable resides. if jeditable was active at the time, it will unbind the onclick handler for jeditable ie subsequent clicks to edit will not work. what i need is something like what onblur:cancel does. i’ve tried using onblur:cancel, but then the textarea can’t be resized…
thanks for the great plugin!
September 18th, 2008 at 11:12 AM
john: Atleast for custom inputs there is a reset method available. By default it looks like following:
reset : function(settings, original) { original.reset(); }So if you create a custom input which includes the load link you mentioned, you could bind calling original.reset(). Code could be something like following:
$.editable.addInputType('load-reset-button', { element : $.editable.types.text.element, buttons : function(settings, original) { var default_buttons = $.editable.types['defaults'].buttons default_buttons.apply(this, [settings, original]); var third = $('<input type="button">'); third.val(settings.third); $(this).append(third); $(third).click(function() { original.reset() alert("I just reseted myself and now should be loading."); }); } });And then you would call it with:
$(".editable").editable("http://www.example.com/save.php", { type : "load-reset-button", submit : "OK", cancel : "Cancel", third : "Reset and load", onblur : 'ignore' });Check Three Button Editable tutorial to better understand code above.
September 19th, 2008 at 07:34 PM
What I had in mind was more along the lines of a method I could call any time I wanted, which essentially is original.reset(). You’ve pointed me in the right direction. I didn’t realise you could call .reset() from the original element. So now all I need to do is $(’#original-element’)[0].reset() whenever I need to remove inline editing. Thanks for that Mika!
September 19th, 2008 at 08:05 PM
John: Oh cool. Thanks for heads up. I did not realize myself you can also call
directly. I was thinking it too complicated. I guess then also following would work.
January 8th, 2009 at 01:13 PM
Hi .. great work!
I have a question. I want to add an element .. After submit jquery post 2 elements. ID and NAME. Cool … but how can I add one more ? id, name and prod_id ?
Thanks !
January 11th, 2009 at 08:13 PM
Cristian: Use submitdata parameter. It can be either a hash or function returning a hash. For example:
$(".editable").editable("http://www.example.com/save.php";, { submitdata : {prod_id: 27} } })$(".editable").editable("http://www.example.com/save.php";, { submitdata : function() { /* This should obviously be generated dynamically. */ return {prod_id: 27} } })January 12th, 2009 at 11:32 PM
It would be great of your Jeditable demo included an example that (a) required a simple log-in authentication (b) instead of saving to a database, saved to the actual HTML, with a copy of the orginal© Let people restore to earlier versions. This would be a brilliant practical, workable example.
January 19th, 2009 at 08:57 PM
Having some User Authentication would be awesome
January 21st, 2009 at 10:25 AM
Anthony: User authentication should be implemented in backend.
January 21st, 2009 at 10:40 PM
Hello,
I’m trying to get this working…
I have this above my edit field
- The edit zone ->Markitup default settings and css is included, jquery and jeditable also..
Before I try’d this I was able to edit text and save it to database but now when I’m clicking on the text nothing appears not even the plain html textarea
—> this is the error I get in the jquery.editable file.
$.editable.types[settings.type] is undefined || function() { };
Thanks ! Ward
January 22nd, 2009 at 10:30 AM
Ward: Are you including jquery.jeditable.markitup.js in your page?
February 2nd, 2009 at 08:42 AM
How would you implement user authentication?
Perhaps php generates an md5 token and stores it in both the session and inserts it as a jeditable submitdata token. Then the php program that handles the ajax request checks to see if the submitted token is the same as the session token.
Something like this:
<?php $security_token = md5(uniqid(rand(), TRUE)); $_SESSION['eip_token'] = $security_token; ?> <html> [...] <script> $('.edit').editable('http://website/save.php', { submitdata : {eip_token: "<?php echo $security_token; ?>"} }); </script> [...] </html>And in save.php:
<?php if (isset($_POST['eip_token']) && isset($_SESSION['eip_token']) && $_POST['token'] == $_SESSION['eip_token']) { // valid user } else { // invalid user } ?>Gosh, I hope that code displays correctly.
February 3rd, 2009 at 04:02 PM
Peter: Something like that should work. Additionally you can also not output any Jeditable code to page when user has not logged in. This way user cannot event click elements to start Jeditable.
February 3rd, 2009 at 05:44 PM
Well the problem with that is if save.php doesn’t have any security built in, any hacker could reference http://website.com/save.php with their own post variables and modify the page as they like.
They could easily learn the ajax posting url and the form parameters if they’ve ever seen a page that includes a jeditable reference (a former employee, or a previous website member, for example).
Using a session token helps prevent this kind of breach. I think that lack of authentication is a big problem with Ajax apps in general.
Thanks for the great app, Mike!
February 5th, 2009 at 07:58 PM
Yes of course. That is why I said additionally.
April 6th, 2009 at 04:30 AM
I am sure this is just something stupid, but I have banged my head long enough to cry “uncle” and ask for help.
I am trying to integrate this example with a new site we are developing and it just doesn’t work. I have a “stock” MarkItUp and jEditable field working on this same page, but the “combined” field just displays as text with nothing happening when I click.
Here are my three configurations; “miu” and “edit” work fine, but “miuEdit” does nothing:
$(document).ready(function() { $('.miu').markItUp(mySettings); $('.edit').editable('/ContentManager/EditText', { type: 'textarea', submit: 'Save', cancel: 'Cancel', indicator: '<img src="assets/common/jEditable/img/indicator.gif">', loadurl: '/ContentManager/GetText', loadtype: 'POST', tooltip: 'Click to edit...', loaddata: { pageGuid: 'a66c63a4-7175-4078-9813-ec63efeaf65d' }, submitdata: { pageGuid: 'a66c63a4-7175-4078-9813-ec63efeaf65d' } }); $('.miuEdit').editable('/ContentManager/EditText', { type: 'markitup', submit: 'Save', cancel: 'Cancel', indicator: '<img src="assets/common/jEditable/img/indicator.gif">', loadurl: '/ContentManager/GetText', loadtype: 'POST', tooltip: 'Click to edit...', onblur: 'ignore', markitup: markitupHTML, loaddata: { pageGuid: 'a66c63a4-7175-4078-9813-ec63efeaf65d' }, submitdata: { pageGuid: 'a66c63a4-7175-4078-9813-ec63efeaf65d' } }); });And here are my CSS and script includes:
My “jquery.jeditable.markitup.js” is straight off the example site here.
And, finally, here are the elements themselves:
Like I said, “miu” and “edit” work exactly as expected and I have quadruple-checked all the CSS & script paths. I am at a loss at this point as to what I am doing wrong. Does anyone have a hint/clue for me?
TIA
Tony
April 6th, 2009 at 06:00 PM
Tony: Quickly looking your code looks correct. Do you have example page somewhere online which I could debug?
April 6th, 2009 at 06:32 PM
Thanks, Mika. I’ll do that. While I was publishing the website, Visual Studio spit out a warning I haven;t seen before while running the site. It said that when looking at my jquery.jeditable.markitup.js file, ”’$.editable’ is null or not an object @ 18:0”.
I copied that file “blindly” from your site, but perhaps there is something mis-named that I need to correct in that file? Here is mine:
$.editable.addInputType('markitup', { element: $.editable.types.textarea.element, plugin: function(settings, original) { $('textarea', this).markItUp(settings.markitup); } });In the meantime, I am getting a working version up for you.
Tony
April 6th, 2009 at 07:02 PM
Okay, more info – this is almost certainly “it.”
When I try running the page through IIS (versus the built-in “cassini” web server in Visual Studio), I get the following error:
‘markitupHTML’ is undefined
It appears to be upset with my use of that variable in the configuration of my “miuEdit” class. When I look through your example, I am not seeing where that is defined – so I had assumed it was an “internal constant” or some-such.
April 6th, 2009 at 09:38 PM
Ah, tracked it down. That markitupHTML is the name you used in your “set.js” file instead of the default mySettings. When I replaced markitupHTML with mySettings, it all worked perfectly.
Nice job!
April 8th, 2009 at 03:50 PM
Tony: Great! Glad you found a solution.
April 20th, 2009 at 04:17 PM
Hi Mika,
Thank you for this plugin, it’s fantastic and it is saving me a lot of time. I have one question though, I appended a select form and button next to Save and Cancel when the plugin (custom input) loads. This is for a user to select previous versions of edits (it’s a lightweight wiki). I have it ready to the extent that when the person selects the version and clicks on load I can pull in that text with AJAX. However I would like to replace the current textarea/MarkItUp field with that text I load. I tried everything from setting value on the text area to trying to see if there was a way to select and replace the text however nothing worked so far. Is there a way to do this?
Thank you,
Eiso