Handle Blur and Focus Events
The Editor does not expose focus and blur events as built-in functionalities.
However, you can handle them in AngularJS by using a custom directive depending on the mode of the widget initialization.
For more information on how to handle the blur and focus events outside the AngularJS context, refer to this how-to article.
In Classic Modes
The Editor can be initialized from a <textarea> HTML element—the classic mode.
The following example demonstrates how to handle the blur and the focus events in AngularJS when the Editor is in the classic mode.
Example
<style>
#editor{
position: absolute;
width: 90%;
top: 60px;
}
</style>
<body ng-app="myApp">
<textarea id="editor" kendo-editor="Editor" my-dom-directive >
</textarea>
<script>
var app = angular.module('myApp', [ "kendo.directives" ]);
app.directive('myDomDirective', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$on("kendoWidgetCreated", function(event, widget){
// the event is emitted for every widget; if you have multiple
// widgets, check that the event
// is for the one you are interested in.
if (widget === scope.Editor) {
$(widget.body).focus(function(){
console.log('Focus');
})
}
});
element.bind('blur', function () {
console.log('Blur');
});
}
};
});
</script>
In Inline Modes
The Editor can be initialized from a <div> HTML element—the inline mode.
The following example demonstrates how to handle the blur and the focus events in AngularJS when the Editor is in the inline mode.
Example
<style>
#editor{
position: absolute;
width: 90%;
top: 60px;
}
</style>
<body ng-app="myApp">
<div id="editor" kendo-editor my-dom-directive >
</div>
<script>
var app = angular.module('myApp', [ "kendo.directives" ]);
app.directive('myDomDirective', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.focus(function () {
console.log('Focus');
});
element.bind('blur', function () {
console.log('Blur');
});
}
};
});
</script>
See Also
- Editor JavaScript API Reference
- How to Get Reference to Child Widgets
- How to Insert HTML Content via Custom Popup Tools
- How to Set Caret Position
- How to Show Editor in Full Screen
- How to Use Inline Editor inside Windows
For more runnable examples on the Kendo UI Editor, browse its How To documentation folder.