All Components

Editor / Styles

Information

The following demo shows how to use the Editor's style tool, which provides the ability to customize the widget content by means of custom CSS classes and styling, and a CSS file registered in the Editor iframe document.

HTML5/JavaScript 源码

<!DOCTYPE html>
<html>
 <head> 
  <title>Styles</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"> 
   <div class="box wide"> 
    <h4>Information</h4> 
    <p> The following demo shows how to use the Editor's style tool, which provides the ability to customize the widget content by means of custom CSS classes and styling, and a CSS file registered in the Editor iframe document. </p> 
   </div> 
   <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
            <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>
        $("#editor").kendoEditor({
            tools: [
                { name: "formatting", width: 150, items: [
                    { text: "Highlight Error", value: ".hlError" },
                    { text: "Highlight OK", value: ".hlOK" },
                    { text: "Inline Code", value: ".inlineCode" }
                ] }
            ],
            stylesheets: [
                "//demos.telerik.com/kendo-ui/content/web/editor/editorStyles.css"
            ]
        });
    </script> 
  </div>   
 </body>
</html>