<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script> <link rel="Stylesheet" type="text/css" href="style/jqueryui/ui-lightness/jquery-ui-1.7.2.custom.css" /> <script type="text/javascript" src="scripts/jHtmlArea-0.7.0.js"></script> <link rel="Stylesheet" type="text/css" href="style/jHtmlArea.css" /> <style type="text/css"> /* body { background: #ccc;} */ div.jHtmlArea .ToolBar ul li a.custom_disk_button { background: url(images/disk.png) no-repeat; background-position: 0 0; } div.jHtmlArea { border: solid 1px #ccc; } </style> </head> <body> <script type="text/javascript"> // You can do this to perform a global override of any of the "default" options // jHtmlArea.fn.defaultOptions.css = "jHtmlArea.Editor.css"; $(function() { //$("textarea").htmlarea(); // Initialize all TextArea's as jHtmlArea's with default values $("#txtDefaultHtmlArea").htmlarea(); // Initialize jHtmlArea's with all default values $("#txtCustomHtmlArea").htmlarea({ // Override/Specify the Toolbar buttons to show toolbar: [ ["bold", "italic", "underline", "|", "forecolor"], ["p", "h1", "h2", "h3", "h4", "h5", "h6"], ["link", "unlink", "|", "image"], [{ // This is how to add a completely custom Toolbar Button css: "custom_disk_button", text: "Save", action: function(btn) { // 'this' = jHtmlArea object // 'btn' = jQuery object that represents the <A> "anchor" tag for the Toolbar Button alert('SAVE!\n\n' + this.toHtmlString()); } }] ], // Override any of the toolbarText values - these are the Alt Text / Tooltips shown // when the user hovers the mouse over the Toolbar Buttons // Here are a couple translated to German, thanks to Google Translate. toolbarText: $.extend({}, jHtmlArea.defaultOptions.toolbarText, { "bold": "fett", "italic": "kursiv", "underline": "unterstreichen" }), // Specify a specific CSS file to use for the Editor css: "style//jHtmlArea.Editor.css", // Do something once the editor has finished loading loaded: function() { //// 'this' is equal to the jHtmlArea object //alert("jHtmlArea has loaded!"); //this.showHTMLView(); // show the HTML view once the editor has finished loading } }); }); </script> <textarea id="txtDefaultHtmlArea" cols="50" rows="15"><p><h3>Test H3</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea> <input type="button" value="Alert HTML" onclick="alert($('#txtDefaultHtmlArea').htmlarea('toHtmlString'));" /> <input type="button" value="Change Color to Blue" onclick="$('#txtDefaultHtmlArea').htmlarea('forecolor', 'blue');" /> <br /><hr /><br /> <textarea id="txtCustomHtmlArea" cols="50" rows="15"><p><h3>Another TextArea</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea> <input type="button" id="btnRemoveCustomHtmlArea" value="Remove jHtmlArea" /> <script type="text/javascript"> $(function() { $("#btnRemoveCustomHtmlArea").click(function() { $("#txtCustomHtmlArea").htmlarea("dispose"); }); }); </script> <input type="button" id="btnResetCustomHtmlArea" value="Reset To Default Options" /> <script type="text/javascript"> $(function() { $("#btnResetCustomHtmlArea").click(function() { $("#txtCustomHtmlArea").htmlarea("dispose"); $("#txtCustomHtmlArea").htmlarea(); }); }); </script> <br /><hr /><br /> <h3>Use jHtmlArea within jQuery UI Dialog</h3> <script type="text/javascript"> $.ui.dialog.defaults.bgiframe = true; $(function() { $("#dialogShowButton").click(function() { $("#dialog").dialog({width: 420}); $("#dialogEditor").htmlarea(); }); }); </script> <input type="button" id="dialogShowButton" value="Show Dialog with jHtmlArea Editor" /> <div id="dialog" title="Basic dialog" style="display: none"> Basic jHtmlArea within jQuery UI Dialog <br /> <textarea id="dialogEditor" rows="10" style="width: 400px">Some <b>Basic</b> text.</textarea> </div> <p>To see a "proper" example of the "Font Color" button, you'll want to see the "<a href="ColorPickerMenu.htm">jHtmlAreaColorPickerMenu</a>" in action here: <a href="ColorPickerMenu.htm">ColorPickerMenu.htm</a></p> </body> </html>