Hi Guys,
Here is a skeleton jQuery plugin that you can use on various pages to get people to send you corrections on the web pages of yours. Let me explain a bit more.
So this plugin was written to help me with my work with a WordPress plugin of mine that allows in article editing and correction suggestion to be sent to the author/administrator. The WordPress plugin is called WP Errata and will be available from WordPress.org
But lets talk about this little jQuery plugin and I will take you though some key things that this plugin does.
Example markup
1 2 3 |
<div class="jcedit" contenteditable="true">This is editable DIV 1</div> <div class="jcedit">This is editable DIV 2</div> <div class="jcedit">This is editable DIV 3</div> |
So the above markup is something that we will need. It doesn’t matter if you include contenteditable=”true” or not, as long as you are including class=”jcedit” or your own within the div element, see the usage section
Usage
This plugin allow hook functions when user resets or hit save button and these actions can be overridden by following functions
1 2 |
saveAction:function (originalContent,newContent,editableElement); cancelAction:function (originalContent,newContent,editableElement) ; |
As you can see that by default the functions will have old and new content available through params.
So a quick usage example will be
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(window).load(function(){ jQuery(".jcedit").jcedit({saveAction:function (originalContent,newContent,editableElement) { jQuery.ajax({ url:'target.php', type:"POST", data:{oldContent:originalContent,newContent:newContent,url:location.href}, success:function (data) { alert("Corrections has been sent to site Administrator, we thank you for your contribution.\n\n"+data); } }); }, fancyDialog:true}); }) |
.jcedit is the default class that we have applied jcedit to but you can have your own hook classes. It shouldn’t matter.
There is a good Stack print when you pass on debug: true some maybe useful info is printed out.
Styling
Here is the default stylesheet that you can edit if you are not happy with default styles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
.jcedit { cursor: pointer !important; display: block; } .jcedit-mode,.jcedit-mode:hover { display: block; border-top:1px solid #EEEEEE; border-left:1px solid #EEEEEE; border-right:1px solid #EEEEEE; padding: 10px; padding-bottom: 30px; border-radius: 0px 5px 5px 0px; outline: none; cursor: text !important; } .jcedit:hover { outline: none; border: 1px solid #cccccc; background: url(edit.png) 100% 5px no-repeat; cursor: pointer !important; } .jcedit-buttons { display: block !important; border-bottom:2px solid #EEEEEE !important; border-left:2px solid #EEEEEE !important; border-right:2px solid #EEEEEE !important; padding: 5px 0px 5px 0px !important; text-align: center !important; background: #EEEEEE !important; } .jcedit-buttons button { cursor: pointer; border: 1px #BBBBBB solid; padding: 3px 8px 3px 8px; border-radius: 5px; background: #EEEEEE; margin-right: 5px; } .jcedit-buttons button:hover { background: #e1e1e1 !important; } #jcedit-mask { z-index: 10; position:absolute; left:0; top:0; width:100%; height:100%; background-color:#EEE; display:none; } #outerJCEditDialog { border: 10px solid rgba(82, 82, 82, .4); -webkit-border-radius: 8px; border-radius: 8px; z-index: 20; position: fixed; display: none; font-family: "Lucida Grande", Arial, Helvetica, sans-serif; } #innerJCEditDialog { background: #FFF !important; position: relative; width:500px; min-height: 300px; } .dialoghead { background-color: #6D84B4; border: 1px solid #3B5998; border-bottom: 0; color: white; font-size: 14px; font-weight: bold; padding:10px; } |
Above is pretty much very simple styles definitions that can be edited with ease
Version
Current version 1.0
Demo
Ok here is a quick demo of this plugin
http://jaspreetchahal.org/examples/jquery-examples/jcedit/jcedit.html
If you have any question regarding this demo please let me know
Compatibility
This plugin should work if contenteditable is supported by your browser. This plugins has been tested on latest version for the following browsers including IE9 and IE10
Donations
If you like this Plugin, please consider donating
You can choose your own amount. Developing plugin like these toke a lot of effort and time; days and weeks of continuous voluntary unpaid work.
If you like this plugin or if you are using it for commercial websites, please consider a donation to the author to
help support future updates and development.
- Web Hosting Fees
- Cable Internet Fees
- Time/Value Reimbursement
- Motivation for Continuous Improvements
Download source
Source can be downloaded from Google Code and here is the link
http://code.google.com/p/jcedit/
I hope this helps
Cheers
sell this plugin on codecanyon.net!
Thanks for you suggestion shiv. I will definitely think about it.
Cheers!