Is there a PageDown plugin for Jeditable?
I am using jQuery built-in Jeditable editing plugin . Fortunately, Jeditable provides a plug -in capability to extend the inline editing built into it.
I'm hoping not to reinvent the wheel - is there already a PageDown plugin for Jeditable? If someone does my google-fu it doesn't bring any results.
source to share
I never found a Jeditable PageDown plugin out of the box, so I wrote my own. The example below is too specific to be used without modification, but it should provide a reasonably suitable outline for anyone trying to accomplish a similar task.
Code to add markdown input type to Jeditable:
var converter = Markdown.getSanitizingConverter();
$.editable.addInputType('markdown', {
element: function(settings, original) {
var editorId = original.id.substring(original.id.lastIndexOf("-"));
var input = $('<textarea />');
input.attr('id', 'wmd-input' + editorId);
var panel = $('<div class="wmd-panel" />');
panel.append('<div id="wmd-button-bar' + editorId + '" />');
panel.append(input);
panel.append('<div id="wmd-preview' + editorId + '" />');
$(this).append(panel);
return (input);
},
plugin: function(settings, original) {
var editorId = original.id.substring(original.id.lastIndexOf("-"));
var editor = new Markdown.Editor(converter, editorId);
editor.run();
}
});
The above code goes through heaps of circles regarding element ids, because in my case, I might have multiple editors on the same page. See the Documentation Documentation about Markdown.Editor for more information .
Once I added the "markdown" input type to Jeditable, it's just a matter of using this code:
$('.editable-element-area').editable('http://jsfiddle.net/echo/jsonp/', {
onblur: 'submit',
type: 'markdown',
indicator: 'Saving...',
loadurl: 'http://jsfiddle.net/echo/jsonp/', // retrieve existing markdown
callback: function(value, settings) {
$(this).html(converter.makeHtml(value)); // render updated markdown
}
});
I want my users to see the markdown as HTML when they are not editing it, so I have to use the Jeditable parameters callback and loadurl . The download url retrieves the text for editing in markdown format, and the callback converts the new text back to html.
source to share