Jeditable and TinyMCE

Blog Projects
javascript jeditable jquery

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.



When asking a question include an URL to example page where the problem occurs. Even better is to make a Fiddle which demonstrates the problem. If you have longer code examples please use pastie.org.
CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.