gramps/data/jhtmlarea/Default.htm

129 lines
5.5 KiB
HTML
Raw Normal View History

2012-05-28 22:47:15 +05:30
<!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>