jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <title>jqxEditor API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>createCommand</span> </td> <td> <span>Function</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's createCommand property. The property allows you to add new commands or override existing commands. </p> <h4>Code examples</h4> <p> Set the <code>createCommand</code> property in order to create new commands. </p> <pre><code> $('#editor').jqxEditor({ height: 400, width: 800, tools: 'datetime | print clear | backcolor | font bold italic underline', createCommand: function (name) { switch (name) { case "datetime": return { type: 'list', tooltip: "Insert Date/Time", init: function (widget) { widget.jqxDropDownList({ placeHolder: "Insert Custom HTML", width: 160, source: ['Insert Time', 'Insert Date'], autoDropDownHeight: true }); }, refresh: function (widget, style) { // do something here when the selection is changed. widget.jqxDropDownList('clearSelection'); }, action: function (widget, editor) { var widgetValue = widget.val(); var date = new Date(); // return object with command and value members. return { command: "inserthtml", value: widgetValue == "Insert Time" ? date.getHours() + ":" + date.getMinutes() : date.getDate() + "-" + date.getMonth() + "-" + date.getFullYear() }; } } case "print": return { type: 'button', tooltip: 'Print', init: function (widget) { widget.jqxButton({ height: 25, width: 40 }); widget.html("<span style='line-height: 23px;'>Print</span>"); }, refresh: function (widget, style) { // do something here when the selection is changed. }, action: function (widget, editor) { // return nothing and perform a custom action. $('#editor').jqxEditor('print'); } } case "clear": return { type: 'button', tooltip: 'Clear', init: function (widget) { widget.jqxButton({ height: 25, width: 40 }); widget.html("<span style='line-height: 23px;'>Clear</span>"); }, refresh: function (widget, style) { // do something here when the selection is changed. }, action: function (widget, editor) { // return nothing and perform a custom action. $('#editor').val(''); } } case "backcolor": return { type: 'colorPicker', tooltip: 'Background', init: function (widget) { widget.jqxDropDownButton({ width: 160 }); widget.jqxDropDownButton('setContent', '<span style="line-height: 23px;">Choose Background</span>'); }, refresh: function (widget, style) { // do something here when the selection is changed. }, action: function (widget, editor) { // return nothing and perform a custom action. var color = widget.val(); editor.css('background', color); } } } } }); </code></pre> <p>Set the <code>createCommand</code> property to override existing commands.</p> <pre><code> $('#editor').jqxEditor({ height: 400, width: 800, tools: "bold italic underline | font size | left center right | outdent indent", createCommand: function (name) { switch (name) { case "font": return { init: function (widget) { widget.jqxDropDownList({ source: [{ label: 'Arial', value: 'Arial, Helvetica, sans-serif' }, { label: 'Comic Sans MS', value: '"Comic Sans MS", cursive, sans-serif' }, { label: 'Courier New', value: '"Courier New", Courier, monospace' }, { label: 'Georgia', value: "Georgia,serif" }] }); } } case "size": return { init: function (widget) { widget.jqxDropDownList({ source: [ { label: "8pt", value: "xx-small" }, { label: "12pt", value: "small" }, { label: "18pt", value: "large" }, { label: "36pt", value: "xx-large" } ] }); } } } } }); </code></pre> <p> Get the <code>createCommand</code> property. </p> <pre><code>var createCommand = $('#jqxEditor').jqxEditor('createCommand');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zuBu9/">createCommand is set to a custom function.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>disabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the jqxEditor is disabled. </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({ disabled:true }); </code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxEditor').jqxEditor('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mksnT/">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>editable</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's editable property. The property determines whether the jqxEditor is read only. </p> <h4>Code examples</h4> <p> Set the <code>editable</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({editable: true});</code></pre> <p> Get the <code>editable</code> property. </p> <pre><code>var editable = $('#jqxEditor').jqxEditor('editable');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/SNMX3/">editable is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>height</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({height:"400px"});</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxEditor').jqxEditor('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XvXyy/">height is set to '400px'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>lineBreak</span> </td> <td> <span>String</span> </td> <td>"default" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's line break. The property determines whether the jqxEditor creates <code>BR</code>, <code>P</code> or <code>DIV</code> tag when the <code>Enter</code> key is pressed or uses the web browser's default mode. </p> <h4>Code examples</h4> <p> Set the <code>lineBreak</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({lineBreak:"div"});</code></pre> <p> Get the <code>lineBreak</code> property. </p> <pre><code>var lineBreak = $('#jqxEditor').jqxEditor('lineBreak');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Bpjz7/">lineBreak is set to 'div'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>localization</span> </td> <td> <span>Object</span> </td> <td>{ "bold": "Bold", "italic": "Italic", "underline": "Underline", "format": "Format Block", "font": "Font Name", "size": "Font Size", "color": "Text Color", "background": "Fill Color", "left": "Align Left", "center": "Align Center", "right": "Align Right", "outdent": "Indent Less", "indent": "Indent More", "ul": "Insert unordered list", "ol": "Insert ordered list", "image": "Insert image", "link": "Insert link", "html": "View source", "clean": "Remove Formatting" } </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's localization. The property determines the localization of the jqxEditor. </p> <h4>Code examples</h4> <p> Set the <code>localization</code> property. </p> <pre><code> $('#editor').jqxEditor({ localization: { "bold": "Fett", "italic": "Kursiv", "underline": "Unterstreichen", "format": "Block-Format", "font": "Schriftname", "size": "Schriftgröße", "color": "Textfarbe", "background": "Hintergrundfarbe", "left": "Links ausrichten", "center": "Mitte ausrichten", "right": "Rechts ausrichten", "outdent": "Weniger Einzug", "indent": "Mehr Einzug", "ul": "Legen Sie ungeordnete Liste", "ol": "Geordnete Liste einfügen", "image": "Bild einfügen", "link": "Link einfügen", "html": "html anzeigen", "clean": "Formatierung entfernen" } }); </code></pre> <p> Get the <code>localization</code> property. </p> <pre><code>var localization = $('#jqxEditor').jqxEditor('localization');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Kw3QQ/">localization is set to a custom object.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>pasteMode</span> </td> <td> <span>String</span> </td> <td>"html" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's paste mode. The property determines whether the clipboard data is pasted as HTML or Plain Text. Possible values: "html" and "text". </p> <h4>Code examples</h4> <p> Set the <code>pasteMode</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({pasteMode:"html"});</code></pre> <p> Get the <code>pasteMode</code> property. </p> <pre><code>var pasteMode = $('#jqxEditor').jqxEditor('pasteMode');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kyf35/">pasteMode is set to 'text'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span51'>rtl</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p> <h4>Code example</h4> <p> Set the <code>rtl</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({rtl : true}); </code></pre> <p> Get the <code>rtl</code> property. </p> <pre><code>var rtl = $('#jqxEditor').jqxEditor('rtl'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e96VD/">rtl is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>stylesheets</span> </td> <td> <span>Array</span> </td> <td>[] </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's stylesheets. The property allows you to include stylesheets into the jqxEditor's IFrame. </p> <h4>Code examples</h4> <p> Set the <code>stylesheets</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({stylesheets:["../../../../jqwidgets/styles/jqx.base.css"]);</code></pre> <p> Get the <code>stylesheets</code> property. </p> <pre><code>var stylesheets = $('#jqxEditor').jqxEditor('stylesheets');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aV8kG/">stylesheets is set to a custom array.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span63'>theme</span> </td> <td> <span>String</span> </td> <td>'' </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the widget's theme. </p> jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following: <ul> <li>Include the theme's CSS file after jqx.base.css.<br /> The following code example adds the 'energyblue' theme. <pre><code> <pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /> </code></pre> </code></pre> </li> <li>Set the widget's theme property to 'energyblue' when you initialize it. </li> </ul> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j5kD6/">theme is set to 'energyblue'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>toolbarPosition</span> </td> <td> <span>String</span> </td> <td>"top" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's toolbar position. The property determines the position of the jqxEditor's toolbar. </p> <h4>Code examples</h4> <p> Set the <code>toolbarPosition</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({toolbarPosition:"bottom"});</code></pre> <p> Get the <code>toolbarPosition</code> property. </p> <pre><code>var toolbarPosition = $('#jqxEditor').jqxEditor('toolbarPosition');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/LdK5D/">toolbarPosition is set to 'bottom'</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>tools</span> </td> <td> <span>String</span> </td> <td>"bold italic underline | format font size | color background | left center right | outdent indent | ul ol | image | link | clean | html" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's tools. The property determines the visibility and layout of the jqxEditor's tools. </p> <h4>Code examples</h4> <p> Set the <code>tools</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({tools:"bold italic underline"});</code></pre> <p> Get the <code>tools</code> property. </p> <pre><code>var tools = $('#jqxEditor').jqxEditor('tools');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/n4e23/">tools is set to "bold italic underline"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='property-name-disabled'>width</span> </td> <td> <span>Number/String</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the jqxEditor's width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxEditor').jqxEditor({width:"200px"});</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxEditor').jqxEditor('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XvXyy/">width is set to '800px'</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Events</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span13'>change</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This is triggered when the jqxEditor's value is changed. </p> <h4>Code examples</h4> <p> Bind to the <code>change</code> event by type: jqxEditor. </p> <pre><code> $('#jqxEditor').on('change', function (event) { // type var type = event.args.type; // keyboard, mouse or null depending on how the value was changed. }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/L2Aek/">Bind to the change event by type:jqxEditor </a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Methods</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span21'>destroy</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Destroys the widget. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>destroy</code> method. </p> <pre><code>$('#jqxEditor').jqxEditor('destroy'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/j63LP/">destroys the jqxEditor </a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span14'>focus</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Focuses the widget. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>focus</code> method. </p> <pre><code>$('#jqxEditor').jqxEditor('focus'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/skXv7/">focuses the jqxEditor </a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span12'>print</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Prints the jqxEditor's value. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>None</em></td> <td></td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>print</code> method. </p> <pre><code>$('#jqxEditor').jqxEditor('print'); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Jw75s/">prints the jqxEditor's value.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>setMode</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets the jqxEditor's mode. The method has one boolean parameter which determines whether the jqxEditor displays its value as formatted html or html code. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>mode</em></td> <td>Boolean</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>None</em> </div> <h4>Code examples</h4> <p> Invoke the <code>setMode</code> method. </p> <pre><code>$('#jqxEditor').jqxEditor('setMode', true); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZGcWL/">display the jqxEditor's html code.</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span59'>val</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the value. </p> <div class="methodArgs"> <table class="arguments"> <tbody> <tr> <th>Parameter</th> <th>Type</th> <th>Description</th> </tr> <tr> <td><em>htmlValue</em></td> <td>String</td> <td></td> </tr> </tbody> </table> <strong>Return Value</strong><br /> <em>String</em> </div> <h4>Code example</h4> <p> Invoke the <code>val</code> method. </p> // Get the value. <pre><code>var value = $("#jqxEditor").jqxEditor('val');</code></pre> // Get the value using jQuery's val() <pre><code>var value = $("#jqxEditor").val();</code></pre> // Set value. <pre><code>$("#jqxEditor").jqxEditor('val', 'New Value');</code></pre> // Set value using jQuery's val(). <pre><code>$("#jqxEditor").val('New Value');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zxaRL/">invoke the val method of the jqxEditor </a> </div> </div> </td> </tr> </table> <br /> </div> </body> </html>