Jeditable and TinyMCE

July 22nd, 2008

I have been working with Sam Curren lately improving Jeditable custom input API. At the same time Sam has been working with his TinyMCE custom input.

Inline editing with TinyMCE has been requested several times in mailinglists and forums. After MarkItUp! and WYSIWYG (beta) it is now third content editor plugin for Jeditable.

TinyMCE input needs Jeditable 1.6.0 to work. Download it as source, minified or packed.

Changes Since 1.5.0

You can now call function when onblur is triggered.


$(".editable").editable("http://www.example.com/save.php", { 
    onblur   : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
    }
});

You can now use any custom event for triggering Jeditable.


$(".editable").editable("http://www.example.com/save.php", { 
    event     : "make_editable" 
});

Submit button now defaults to <button type=”submit”> instad of <input type=”submit”>. Cancel button now defaults to <button type=”cancel”> instead of <input type=”button”>. This allows you style buttons with something like:


.editable button[type=submit] {
  ...
}
.editable button[type=cancel] {
  ...
}

Submitting of form will be canceled if submit() method of custom input returns false. This allows you to write validation code with something like:


$.editable.addInputType('validate', {
    ...
    submit  : function(settings, original) {
        var validation_failed = true; /* Validate here... */
        if (validation_failed) {
          original.reset();
          return false;
        }
    }
});

Custom inputs now have access to reset() method. Default reset looks like following:


$.editable.addInputType('validate', {
    ...
    reset : function(settings, original) {
        original.reset();
    }
});

Full custom input has following methods. None of them are mandatory.


$.editable.addInputType('example', {
    element : function(settings, original) { },
    content : function(string, settings, original) { },
    buttons : function(settings, original) { },
    submit  : function(settings, original) { },
    plugin  : function(settings, original) { },
    reset   : function(settings, original) { }
});

If you have missed it. Explanation on all methods can be found from custom input types tutorial.

Tagged with jeditable jquery

3 Responses to “Jeditable and TinyMCE”

Thiago says:
August 6th, 2008 at 10:29 PM
(sorry bad english)

Great plugin! But i have a suggestion: The “cssclass” should be applied to the <input> and not the <form>

Thanks!

Thiago says:
August 6th, 2008 at 10:31 PM

This:

/* 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);
    }
}

Brian says:
August 19th, 2008 at 03:56 AM
It worked all too well until testing with Internet Explorer. Not sure what the issue is, however the ‘element’ just disappears. All in all it works well if your not using IE.

Mika Tuupola