<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<?php
$editor = new \Kendo\UI\Editor('editor');
$editor->attr('style', 'width:740px;height:440px')->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.
</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
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';
?>
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="configuration k-widget k-header" style="float:none;max-width:none;margin:0 0 2em;">
<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();
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="configuration k-widget k-header" style="float:none;max-width:none;margin:0 0 2em;">
<span class="infoHead">Information</span>
<p>
The following demo shows how to customize some of the native Editor tools (font size, font name and block format) by modifying the tools' item
collections, as well as how to create completely custom tools.
</p>
</div>
<?php
$editor = new \Kendo\UI\Editor('editor');
// configure custom tools
// - font name
$fontGaramond = new \Kendo\UI\EditorToolItem();
$fontGaramond->text("Verdana")->value("Verdana, Geneva, sans-serif");
$fontVerdana = new \Kendo\UI\EditorToolItem();
$fontVerdana->text("Garamond")->value("Garamond, serif");
$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();
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<?php
$editor = new \Kendo\UI\Editor('editor');
// enable all tools
$editor->addTool("bold", "italic", "underline", "strikethrough", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "createLink", "unlink", "insertImage", "subscript", "superscript", "createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "viewHtml", "formatting", "fontName", "fontSize", "foreColor", "backColor");
$editor->attr('style', 'width:740px;height:440px')->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.
</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>
Build native-like mobile apps for iPhone, Android and Blackberry,
and deliver unmatched user experience without any extra coding.
</p>
<p>
<a href="http://www.telerik.com/kendo-ui-mobile" title="Kendo UI Mobile">Kendo UI Mobile</a>
is packed with easy-to-use jQuery-based widgets and built-in
rich components for your fast mobile application development.
</p>
<?php
$editor->endContent();
echo $editor->render();
?>
<?php
$editor = new \Kendo\UI\Editor('rightColumn');
call_user_func_array(array($editor, 'addTool'), $columnTools);
$editor->tag('div')->attr('class', 'column')->startContent();
?>
<img src="../content/web/editor/dataviz.png" />
<h3>Rich UI widgets <br />for interactive <br />data visualization </h3>
<p>
Create interactive data visualization with HTML5 and JavaScript,
build rich web apps that look and behave native on any platform or device.
Kendo UI DataViz uses SVG, and brings you a collection of UI widgets,
including jQuery charts, gauges, and more.
</p>
<p>
<a href="http://www.telerik.com/kendo-ui-dataviz" title="Kendo UI DataViz">Kendo UI DataViz</a>
uses automatic hardware acceleration for all animations and rendering,
maximizing performance and minimizing the impact on CPU resources.
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div class="configuration k-widget k-header">
<span class="configHead">Events log</span>
<div class="console"></div>
</div>
<?php
$editor = new \Kendo\UI\Editor('editor');
$editor->attr('style', 'width:490px;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.
</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>
