All Components

Editor / Events

Events log

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Events</title> 
  <meta charset="utf-8"> 
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet"> 
  <link href="../../styles/kendo.common.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.rtl.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.default.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet"> 
  <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet"> 
  <script src="../../js/jquery.min.js"></script> 
  <script src="../../js/kendo.all.min.js"></script> 
  <script src="../content/shared/js/console.js"></script> 
  <script>
        
    </script> 
 </head> 
 <body> 
  <a class="offline-button" href="../index.html">Back</a> 
  <div id="example"> 
   <textarea id="editor" rows="10" cols="30" style="height: 350px;">
                    <p><img src="../content/web/editor/kendo-ui-web.png" alt="Editor for ASP.NET MVC 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>
            </textarea> 
   <div class="box wide"> 
    <h4>Events log</h4> 
    <div class="console"></div> 
   </div> 
   <script>
                function onChange(e) {
                    kendoConsole.log("value change");
                }
                function onSelect(e) {
                    kendoConsole.log("selection change");
                }
                function onExecute(e) {
                    kendoConsole.log("command :: " + e.name);
                }
                function onPaste(e) {
                    kendoConsole.log("paste :: " + kendo.htmlEncode(e.html));
                }

                $("#editor").kendoEditor({
                    resizable: {
                        content: false,
                        toolbar: true
                    },
                    change: onChange,
                    select: onSelect,
                    execute: onExecute,
                    paste: onPaste
                });
            </script> 
  </div>   
 </body>
</html>