<span class="infoHead">Information</span> <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:740px;height:400px')->startContent(); ?> <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.
<?php require_once '../include/header.php'; require_once '../lib/Kendo/Autoload.php'; ?> <?php $editor = new \Kendo\UI\Editor('editor'); // declare snippets $signature = new \Kendo\UI\EditorToolItem(); $signature->text("Signature")->value("<p>Regards,<br /> John Doe,<br /><a href='mailto:john.doe@example.com'>john.doe@example.com</a></p>"); $onlineDemosLink = new \Kendo\UI\EditorToolItem(); $onlineDemosLink->text("Kendo online demos")->value("<a href='http://demos.telerik.com/kendo-ui'>Kendo online demos</a> "); // add snippets to insertHtml tool $insertHtml = new \Kendo\UI\EditorTool(); $insertHtml->name("insertHtml"); $insertHtml->addItem($signature, $onlineDemosLink); $editor->addTool($insertHtml); $editor->attr('style', 'width:740px;height:440px')->content('Put the cursor after this text and use the "Insert HTML" tool. '); echo $editor->render(); ?> <?php require_once '../include/footer.php'; ?>
$fontName = new \Kendo\UI\EditorTool(); $fontName->name("fontName"); $fontName->addItem($fontGaramond, $fontVerdana); // - font size $xxsmall = new \Kendo\UI\EditorToolItem(); $xxsmall->text("1 (8pt)")->value("xx-small"); $medium = new \Kendo\UI\EditorToolItem(); $medium->text("16px")->value("16px"); $fontSize = new \Kendo\UI\EditorTool(); $fontSize->name("fontSize"); $fontSize->addItem($xxsmall, $medium); // - format block $paragraph = new \Kendo\UI\EditorToolItem(); $paragraph->text("Paragraph")->value("p"); $fieldset = new \Kendo\UI\EditorToolItem(); $fieldset->text("Fieldset")->value("fieldset"); $formatting = new \Kendo\UI\EditorTool(); $formatting->name("formatting"); $formatting->addItem($paragraph, $fieldset); // - tool with custom template $customTemplate = new \Kendo\UI\EditorTool(); $customTemplate->name("customTemplate")->template("<label for='templateTool' style='vertical-align:middle;'>Background:</label>" . "<select id='templateTool' style='width:90px'><option value=''>none</option><option value='\\#ff9'>yellow</option><option value='\\#dfd'>green</option></select>"); // - tool with custom action $hr = new \Kendo\UI\EditorTool(); $hr->name("custom")->tooltip("Insert a horizontal rule")->exec("insertHr"); // add all custom tools to the toolbar $editor->addTool($fontName, $fontSize, $formatting, $customTemplate, $hr); $editor->attr('style', 'width:100%;height:400px')->startContent(); ?> <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>