CODEWITHSUNDEEP
javascriptangularjsangularjs-directivetinymce
Dom
Dom

Reputation: 11

AngularJS TinyMCE textarea focus on Click event

My project uses tinymce text editor along with the angularJS framework. I got the directive from https://github.com/angular-ui/ui-tinymce and I was able to hook up the editor to TinyMce with the example provided at GitHub!

I had no issues with the text editor, I am able to retrieve the content from the model of the text editor and update the model with the values from the database. Everything works until recently I discovered that I cannot set focus on the text editor !.

I the focus directives where I can set a focus on the text area on the click of an event, it works if I remove the tinymce references. But I cannot set focus on the editor on the click of an event. Please help !

I FOUND THE FIX

Add element.append(scope.chartInstance.generateLegend()); to $scope.watch

Upvotes: 1

Views: 1126

Answers (1)

Anthony Yuen
Anthony Yuen

Reputation: 166

Actually, you can set on focus and on blur event at the tinymce options. Following is the example:

angular.module('MyApp', ['ui.tinymce'])
.controller('MainCtrl', function () {
  var ctrl = this;
  ctrl.tinymceOptions = {
    setup: funtion (editor) {
      editor.on("focus", function () {
        ctrl.showTips = true;
      });
      editor.on("blur", function () {
        ctrl.showTips = false;
      });
    }
  }
});
<body ng-app="MyApp">
  <form ng-controller="MainCtrl as ctrl">
    <textarea ui-tinymce="ctrl.tinymceOptions" ng-model="ctrl.tinymceInput"></textarea>

    <div ng-show="ctrl.showTips">
      <p>Some tips here...</p>
    </div>
   </form>
 </body>

I think this way is easier for others to understand and is more elegant on the codings.

Upvotes: 2

Related Questions