<?php require_once '../lib/Kendo/Autoload.php'; ?> <div class="box wide"> <div class="box-col"> <h4>Get value</h4> <ul class="options"> <li> <button id="get" class="k-button">Get value</button> </li> </ul> </div> <div class="box-col"> <h4>Set value</h4> <ul class="options"> <li> <textarea id="value" style="width: 200px;" rows="4" cols="20">new value</textarea> </li> <li> <button id="set" class="k-button">Set value</button> </li> </ul> </div> </div> <?php $editor = new \Kendo\UI\Editor('editor'); $editor ->attr('style', 'height:400px') ->startContent(); ?> <p><img src="../content/web/editor/kendo-ui-web.png" alt="Editor for PHP logo" style="display:block;margin-left:auto;margin-right:auto;" /></p> <p> Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br /> In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides API for content manipulation. </p> <p>Features include:</p> <ul> <li>Text formatting & alignment</li> <li>Bulleted and numbered lists</li> <li>Hyperlink and image dialogs</li> <li>Cross-browser support</li> <li>Identical HTML output across browsers</li> <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li> </ul> <p> Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your <a href="http://www.telerik.com/forums">feedback</a>! </p> <?php $editor->endContent(); echo $editor->render(); ?> <script> $(document).ready(function() { var editor = $("#editor").data("kendoEditor"); var setValue = function () { editor.value($("#value").val()); }; $("#get").click(function() { alert(editor.value()); }); $("#set").click(setValue); }); </script> <style> .configuration { height: 376px; width: 200px; margin-bottom: -21px; } .configuration .console { background-color: transparent; border: 0; height: 342px; overflow: auto; } </style>