Customtoolbar not working with AngularJS

2 posts, 0 answers
  1. EAkbari
    EAkbari avatar
    5 posts
    Member since:
    Aug 2009

    Posted 10 Dec 2014 Link to this post

    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>
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 12 Dec 2014 Link to this post

    Hello,

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top