All Components

Editor / Basic usage

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Basic usage</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:440px">
                    <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> 
   <script>
                $(document).ready(function() {
                    // create Editor from textarea HTML element with default set of tools
                    $("#editor").kendoEditor({ resizable: {
                        content: true,
                        toolbar: true
                    }});
                });
            </script> 
  </div>   
 </body>
</html>