Today, we are going to see how we can add Jquery Word Counter Plugin into Textarea Field Type in JEditable Library. If you are new to JEditable Plugin Library, please read this introduction post and proceed furthur. Following are those integration steps that you need to follow
Step 1:
Add the following JQuery Library file inside <head> Tag in HTML Page
Download the JQuery Word Counter Plugin file from here and include the jQuery.textareaCounter.min.js file inside <head> Tag in HTML Page
Step 3:
Add the below JS Code inside 'textarea' Option, next to 'element' property in Jeditable library code (jquery.jeditable.js). This code will add jquery word counter as a plugin.
In order to use the word counter plugin inside your JEditable Code, you can have code something like this
Here is the output when i run this in Google Chrome
Important Note: from above snapshot, you can able to see word counter limit text (91 words left). This is the beauty of JQuery Word Counter Plugin.
Hope, you enjoyed this Post.
Step 1:
Add the following JQuery Library file inside <head> Tag in HTML Page
https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.jsStep 2:
Download the JQuery Word Counter Plugin file from here and include the jQuery.textareaCounter.min.js file inside <head> Tag in HTML Page
Step 3:
Add the below JS Code inside 'textarea' Option, next to 'element' property in Jeditable library code (jquery.jeditable.js). This code will add jquery word counter as a plugin.
plugin: function (settings, original) {
if (settings.wordcounter !== null && settings.wordcounter !== undefined && settings.wordcounter) {
var counterLimit = settings.wordcounter;
$('textarea', this).textareaCounter({
'limit': counterLimit
});
}
}
Here is the location, in which you need to place the above plugin codetextarea: {
element: function (settings, original) {
........
........
},
< add the above plugin code here >
}
Step 4In order to use the word counter plugin inside your JEditable Code, you can have code something like this
$('.editable_wordcounter_textarea').editable('yourfile.php', {
type: 'textarea',
cancel: ' Cancel ',
submit: ' Save ',
onblur: 'ignore',
height: 150,
indicator: 'Updating...',
wordcounter: 100
});
In above code, wordcounter property is used to set the maximum word counter limit for Textarea field type.Here is the output when i run this in Google Chrome
Important Note: from above snapshot, you can able to see word counter limit text (91 words left). This is the beauty of JQuery Word Counter Plugin.
Hope, you enjoyed this Post.
No comments:
Post a Comment