Implementing the ui-tinymce Directive Within a Different Directive

Question

Implementing the ui-tinymce Directive Within a Different Directive

I am attempting to implement the ui-tinymce directive within another directive:

angular.module("risevision.widget.common.font-setting", ["ui.tinymce"])
  .directive("fontSetting", ["$templateCache", function ($templateCache) {
    return {
      restrict: "AE",
      template: $templateCache.get("_angular/font-setting/font-setting.html"),
      transclude: false,
      link: function ($scope, element, attrs) {
        $scope.tinymceOptions = {
          menubar: false,
          statusbar: false
        };
      }
    };
  }]);

Here is the code for

_angular/font-setting/font-setting.html

:

<div class="row">
  <div class="col-md-12>
    <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
  </div>
</div>

The TinyMCE editor appears on the screen, however it seems to be disregarding the configuration options set in $scope.tinymceOptions. Specifically, the menu bar and status bar are still visible.

Any insights on why this may not be working as expected?

Thank you.

javascript angularjs tinymce

Answer 1

Answer №1

Apologies for my tardiness, but I wanted to provide an answer in case someone else encounters the same issue and is looking for a solution.

For TinyMce to be loaded correctly, it should only be done when the tinymceOptions variable contains data. To achieve this, make sure to wrap it in an ng-if statement:

<div class="row">
  <div class="col-md-12" ng-if="tinymceOptions">
    <textarea ui-tinymce="$parent.tinymceOptions" ng-model="$parent.tinymceModel"></textarea>
  </div>
</div>

If you are using Angular >1.4, you can avoid using $parent (as elements inside ng-if have their own scope) by utilizing controller as inside the directive:

app.directive('someDirective', function () {
  return {
    scope: {},
    bindToController: {
      someObject: '=',
      ...
    },
    controllerAs: 'ctrl',
    controller: function () {
      var ctrl = this;
      ctrl.message = 'Object loaded.';
    },
    template: '<div ng-if="ctrl.someObject">{{ctrl.message}}</div>'
  };
});

Answer 2

Apologies for my tardiness, but I wanted to provide an answer in case someone else encounters the same issue and is looking for a solution.

For TinyMce to be loaded correctly, it should only be done when the tinymceOptions variable contains data. To achieve this, make sure to wrap it in an ng-if statement:

<div class="row">
  <div class="col-md-12" ng-if="tinymceOptions">
    <textarea ui-tinymce="$parent.tinymceOptions" ng-model="$parent.tinymceModel"></textarea>
  </div>
</div>

If you are using Angular >1.4, you can avoid using $parent (as elements inside ng-if have their own scope) by utilizing controller as inside the directive:

app.directive('someDirective', function () {
  return {
    scope: {},
    bindToController: {
      someObject: '=',
      ...
    },
    controllerAs: 'ctrl',
    controller: function () {
      var ctrl = this;
      ctrl.message = 'Object loaded.';
    },
    template: '<div ng-if="ctrl.someObject">{{ctrl.message}}</div>'
  };
});

Implementing the ui-tinymce Directive Within a Different Directive

Answer №1

Similar questions

Implement AJAX and PHP to submit form data along with the page ID and session information

Adjust the speed of the remaining divs below to move up when one is deleted using Ajax and jQuery

Is it simple to host a vue.js web application within the assets folder of a sails.js project?

The default export (imported as 'Vue') could not be located within the 'vue' module in Vue 3 and Laravel

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress

What is causing the behavior of this JavaScript code in the Execution Context?

Tips for Using Threejs Loaders in a React App

Coat the div with a uniform shade of pure white

Error in AngularJS service: unable to find method 'save'

Run JavaScript code to retrieve the console log using Selenium WebDriver or WatiN

The JQuery .replaceWith method exclusively offers unprocessed HTML content

Tips for resolving the "Page Not Found" error in your NextJs application

How can I silence the warnings about "defaultProps will be removed"?

Multiple uses of p-fileUpload in primeng are not functioning as expected

AngularJS Drop-Down Menu

Routes are not functioning properly on Ionic Angular

Is there a streamlined approach to signal a successful callback to $q.all without the need to define a $q.defer() variable?

Ways to extract information from an Object and save it into an array

Managing the state of forms using NGRX and @Effects

Identify dead hyperlinks on a webpage with the help of selenium webdriver while steering clear of links that