Exemplo n.º 1
0
        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();
?>
    &lt;p&gt;&lt;img src=&quot;../content/web/editor/kendo-ui-web.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
    &lt;p&gt;
        Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
        In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
        and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
        accessibility standards and provides API for content manipulation.
    &lt;/p&gt;
    &lt;p&gt;Features include:&lt;/p&gt;
Exemplo n.º 2
0
<?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';
?>
Exemplo n.º 3
0
$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();
?>
    &lt;p&gt;&lt;img src=&quot;../content/web/editor/kendo-ui-web.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
    &lt;p&gt;
        Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
        In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
        and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
        accessibility standards and provides API for content manipulation.
    &lt;/p&gt;
    &lt;p&gt;Features include:&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;