Skip to content

Instantly share code, notes, and snippets.

@adriatic

adriatic/app.html

Last active July 20, 2016 06:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save adriatic/93d2b44ac99bebcb80fac1bf78ca57ca to your computer and use it in GitHub Desktop.
Save adriatic/93d2b44ac99bebcb80fac1bf78ca57ca to your computer and use it in GitHub Desktop.
Download ZIP
Editor: Api
Raw
app.html
<template >
<div id="example">
<div class="box wide">
<div class="box-col">
<h4>Get value</h4>
<ul class="options">
<li>
<button ak-button click.delegate="getValue()">Get value</button>
</li>
</ul>
</div>
<div class="box-col">
<h4>Set value</h4>
<ul class="options">
<li>
<textarea value.bind="setValueText" style="width: 200px; height: 80px" >new value</textarea>
</li>
<li>
<button ak-button click.delegate="setValue()">Set value</button>
</li>
</ul>
</div>
</div>
<textarea ak-rich-editor="k-resizable.bind: resizable; k-widget.two-way: editor"
style="height:440px">
&lt;p&gt;&lt;img src=&quot;http://demos.telerik.com/kendo-ui/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;
&lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
&lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
&lt;li&gt;Cross-browser support&lt;/li&gt;
&lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
&lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
Read &lt;a href=&quot;http://docs.telerik.com/kendo-ui&quot;&gt;more details&lt;/a&gt; or send us your
&lt;a href=&quot;http://www.telerik.com/forums/&quot;&gt;feedback&lt;/a&gt;!
&lt;/p&gt;
</textarea>
</div>
</template>
Raw
app.js
export class Api {
resizable = {
content: false,
toolbar: true
};
getValue() {
alert(`${this.editor.value()}`);
}
setValue() {
this.editor.value(this.setValueText);
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia KendoUI bridge</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Raw
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment