wysiwyg.js - 12k contenteditable-editor

‚wysiwyg.js‘ is a (uglified) 12k contenteditable-editor with no dependencies.

It does only: * Transforms any HTML-element into contenteditable * onSelection-event: e.g. to open a toolbar * onKeyDown/Press/Up-events: e.g. to handle hotkeys * onPlaceholder-event: show/hide a placeholder * handle popups * .bold(), .forecolor(), .inserthtml(), … functions

It works with: * Internet Explorer 6+ * Firefox 3.5+ * Chrome 4+ * Safari 3.1+

If a was used as ‚element‘, the library: * keeps the <textarea> in sync * falls back to the <textarea> if the browser does not support ‚contenteditable‘ * Old iOS and Android 2.3- also degrade to <textarea></p> <p>There is also a (uglified) 10k jQuery-plugin ‚$.wysiwyg()‘ – plus (minified) 2k <span class="caps">CSS</span> -<br /> to create a featured editor which depends on: * wysiwyg.js * jQuery * FontAwesome (or <span class="caps">JPG</span>/PNG/GIF/SVG images)</p> <p>The toolbar is easy to extend – e.g. smiley, fontname and fontsize buttons below.<br /> To enable autocomplete set an onAutcomplete() callback (try ‚@‘ in the examples).<br /> It is used on a website with 300M page impressions a month.</p> <p><span class="caps">GITHUB</span>: <a href="https://github.com/wysiwygjs/wysiwyg.js">https://github.com/wysiwygjs/wysiwyg.js</a><br /> <span class="caps">DEMO</span>: <a href="http://wysiwygjs.github.io/">http://wysiwygjs.github.io/</a></p> <div class="spacer"></div> </div> <rsx_page_number_nav /> <center> </center> <center> <img src="https://bestcms.emkask.com/banners/bestcmsinfo.png" wight="468" height="60" title="BEST CMS INFO" /> </center> </div> </div> <!-- END MAIN --> <!-- SIDEBAR 2 --> <div id="sidebar2"> <div class="content"> <div class="sidebox2"> <h2>Bookmark & Share</h2> <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link">Add to Facebook</a> </div> <div class="sidebox2"> <h2>Advertisement</h2> <div class="vmenu"> <script type="text/javascript"><!-- google_ad_client = "ca-pub-3539447646188581"; /* bestcmsinfo-2 */ google_ad_slot = "0432420697"; google_ad_width = 160; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </div> </div> <div class="sidebox1"> <h2>RSS CMS NEWS</h2> <div class="vmenu"> <ul> <li><a href="/rss-news-cms/">RSS NEWS about CMS</a></li> <li><a href="/rss-news-wysiwyg/">RSS NEWS WYSIWYG</a></li> </ul> </div> </div> <div class="sidebox1"> <h2>INFO VIA RSS</h2> <div class="vmenu"> <ul> <li><a href="/rss/">RSS (BEST-CMS.INFO)</a></li> </ul> </div> <p> Read articles and news from BEST CMS INFO via RSS Feed. </p> </div> <div class="sidebox2"> <h2>Webhosting</h2> <center> <a href="http://websupport.sk/#site=506c5e4de630b&ban=55f2ab1b" title= "Neobmedzený, custom hosting, najlacnejšie slovenské domény" target="_top"><img src="http://provizie.websupport.sk/accounts/default1/banners/banner_160x600.jpg" alt="Využite hosting podľa vašich potrieb, WebSupport.sk" title="Neobmedzený, custom hosting, najlacnejšie slovenské domény" width="160" height="600" /></a><img style="border:0" src="http://provizie.websupport.sk/scripts/imp.php?site=506c5e4de630b&ban=55f2ab1b" width="1" height="1" alt="" /> </center> </div> <div class="sidebox2"> <h2>Our Banners</h2> <center> <img src="https://bestcms.emkask.com//banners/bestcmsinfo2.png" wight="160" height="250" title="BEST CMS INFO" /> </center> </div> </div> </div> <!-- END SIDEBAR 2 --> <div class="clear" style="height:60px"></div> </div> </div> <div class="ft"> <div id="footer"> <div class="content"> <p> ~ © Copyright <a href="https://bestcms.emkask.com/">BEST CMS INFO</a> ~ <a href="http://www.dotemplate.com">Template</a> created with doTemplate. ~ <a href="https://www.makotech.sk/tvorba-webstranok/" target="_blank" title="Tvorba webstránok">Tvorba webstránok</a> od <a href="https://www.makotech.sk/" target="_blank" title="MAKOTECH.SK">MAKOTECH.SK</a> ~ </p> </div> </div> <div id="container-bottom"></div> <center> <a href="http://www.toplist.sk/software"><script language="JavaScript" type="text/javascript"> <!-- document.write('<img src="http://toplist.sk/count.asp?id=1237081&logo=btn&http='+escape(document.referrer)+'&t='+escape(document.title)+ '&wi='+escape(window.screen.width)+'&he='+escape(window.screen.height)+'&cd='+escape(window.screen.colorDepth)+'" width="80" height="15" border=0 alt="TOPlist" />'); //--></script></a><noscript><img src="http://toplist.sk/count.asp?id=1237081&logo=btn" border="0" alt="TOPlist" width="80" height="15" /></noscript> </center> </div> </div> </div> </div> <div class="clear"></div> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-4252012-20']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </body> </html>