In my angular application, I have developed a directive for a tinyMCE editor. Upon setup, I have implemented two handlers: one for the blur event to hide the toolbar and another for the click event to show it. Additionally, I have created another directive containing a textarea and a button. When the button is clicked, I want the toolbar to disappear and trigger a specific action.
<body ng-app="MyApp">
<div ng-controller="MyCntrl">
<my-directive></my-directive>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyCntrl", function ($scope) {
}).directive("myDirective", function ( $compile) {
return {
restrict: 'E',
link: function (scope, elem) {
scope.click = function () {
console.log("click");
};
},
template: "<textarea data-tm ></textarea><button ng-click='click()' style='width:200px; height: 74px;' id='btn'>click</button>"
}
}).directive("tm", function ($timeout) {
return {
restrict: 'A',
link: function (scope, element) {
$timeout(function() {
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
});
}
}
});
</script>
When I click inside the textarea and then on the button, I noticed the following behavior: If the button's height is small, for example, 20px, only the blur event is triggered. However, when the button's height is larger, for example, 120px, both blur and click events occur simultaneously.
Can anyone explain why this is happening? My assumption is that in the first case, the button is being overlapped by something, but I am unable to identify what that might be.
Thank you
Update: I suspect there might be an issue with tinyMCE. To investigate further, I removed Angular and created a simple setup with just a tinyMCE editor and a button beneath it. The problem persists: the events only work when the button is sufficiently large or positioned above the editor.
<script type="text/javascript">
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
function myFunction() {
console.log("click");
}
</script>
<textarea></textarea>
<button onclick="myFunction()" style="height:100px;">click</button>