129 lines
5.5 KiB
HTML
129 lines
5.5 KiB
HTML
|
<!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>
|