Editor Settings - Context Menu

by Ramesh Kanagaraj

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<!DOCTYPE html>
<base href="http://demos.telerik.com/kendo-ui/editor/all-tools">
<body>
    <textarea id="editor" rows="10" cols="30"></textarea>
    <div>
    <ul id="context-menu">    
      </ul>
    </div>
</body>

CSS

html {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

JavaScript

$("#editor").kendoEditor({
    tools: [
         {
            name: "createTrackerLink",
            template: "<a href id='menu-target' role='button' class='k-tool' unselectable='on' title='Insert a link (web page, file, command, or image)'><span class='k-tool-icon k-createLink'>Insert a link</span></a>",
        }
        ]
});

$("#context-menu").kendoContextMenu({
    target: "#menu-target",
    showOn: "click",
    alignToAnchor: true,
    select: function (e) {
        var strClickedItem = $(e.item).children(".k-link").text();
    },
    dataSource:
                [{
                    text: "Item 1",
                    cssClass: "myClass",         
                    url: "http://www.telerik.com"          
                },
                {
                    text: "<b>Item 2</b>",
                    encoded: false,                          
                    content: "text"                         
                },
                {
                    text: "Item 3",
                    imageUrl: "http://www.telerik.com/test.jpg", 
                    items: [{                                   
                         text: "Sub Item 1"
                    },
                    {
                         text: "Sub Item 2"
                    }]
                },
                {
                    text: "Item 4",
                    spriteCssClass: "imageClass3"                
                }]
    
});