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.
<?php require_once '../lib/Kendo/Autoload.php'; ?> <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> <?php $editor = new \Kendo\UI\Editor('editor'); // declare styles $highlight_error = new \Kendo\UI\EditorToolItem(); $highlight_error->text("Highlight Error")->value(".hlError"); $highlight_ok = new \Kendo\UI\EditorToolItem(); $highlight_ok->text("Highlight OK")->value(".hlOK"); $inline_code = new \Kendo\UI\EditorToolItem(); $inline_code->text("Inline Code")->value(".inlineCode"); // add styles to formatting tool $formatting = new \Kendo\UI\EditorTool(); $formatting->name("formatting"); $formatting->addItem($highlight_error, $highlight_ok, $inline_code); $editor->addTool($formatting); // add custom stylesheet to show custom styles $editor->stylesheets(array("../content/web/editor/editorStyles.css")); $editor ->attr('style', 'width:100%;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(); ?>