Hi,
below is an example of the editor with a custom toolbar. The custom toolbar is not working for the editor included via AngularJS. Maybe anyone has some hints, what's wrong here.
Thanks!
Example:
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.mobile.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div class="box">
<textarea kendo-editor k-tools="{{toolbar}}" ng-model="html"></textarea>
</div>
<hr / >
<div class="box2">
<textarea id="editor">Working Toolbar</textarea>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives", "ngSanitize" ])
.controller("MyCtrl", function($scope){
$scope.html = "Custom Toolbar not working :-(";
$scope.toolbar = [{name: "Cat", exec: function() {alert("Miau"); } }];
})
$(document).ready(function() {
$("#editor").kendoEditor({
tools: [{name: "Cat", exec: function() {alert("Miau"); } }]
});
});
</script>
</body>
</html>
below is an example of the editor with a custom toolbar. The custom toolbar is not working for the editor included via AngularJS. Maybe anyone has some hints, what's wrong here.
Thanks!
Example:
<!DOCTYPE html>
<html>
<head>
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.mobile.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div class="box">
<textarea kendo-editor k-tools="{{toolbar}}" ng-model="html"></textarea>
</div>
<hr / >
<div class="box2">
<textarea id="editor">Working Toolbar</textarea>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives", "ngSanitize" ])
.controller("MyCtrl", function($scope){
$scope.html = "Custom Toolbar not working :-(";
$scope.toolbar = [{name: "Cat", exec: function() {alert("Miau"); } }];
})
$(document).ready(function() {
$("#editor").kendoEditor({
tools: [{name: "Cat", exec: function() {alert("Miau"); } }]
});
});
</script>
</body>
</html>
1 Answer, 1 is accepted
0
Hello,
You should set the scope field name for the value of the attribute:
Regards,
Daniel
Telerik
You should set the scope field name for the value of the attribute:
<textarea kendo-editor k-tools="toolbar" ng-model="html"></textarea>Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!