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.

javascriptangularjstinymce

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>'
  };
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

steps for including a JS file into Next.js pages

Is it possible to directly import the bootstrap.bundle.js file from the node_modules/bootstrap directory? import "bootstrap/dist/css/bootstrap.rtl.min.css"; function MyApp({ Component, pageProps }) { return ( <> <Script src="node_m ...

javascriptreactjsnext.js

When configuring a domain for Express sessions, it prevents the cookie from being stored

I have encountered an issue with my node.js service application and react frontend. I am utilizing Discord OAuth and express sessions for authentication on my application frontend. Everything functions perfectly when running locally, but upon deploying to ...

javascriptnode.jsexpressexpress-session

Having issues displaying the & symbol in HTML from backend data

I recently worked on a project using express handlebars, where I was fetching data from the YouTube API. However, the titles of the data contained special characters such as '# (the ' symbol) and & (the & symbol). When attempting to render the ...

javascripthtmlnode.jsexpresshandlebars.js

How can we enhance Backbone.sync() at the Model level to include additional parameters?

Currently, I am facing a challenge with overriding Backbone's sync() method for a Model. I have the function signature set up and it is triggered correctly, but I am unsure about what needs to be included in the function body in order for it to automa ...

javascriptbackbone.jscoffeescript

Enhancing user privacy in Angular application with Web API integration and ASP.NET Identity

Currently, I have an AngularJS application that is connected to an ASP.NET Web API backend with OWIN/token-based authentication. The backend utilizes ASP.NET Identity for user registration and login functionalities. Both the frontend and backend are inte ...

asp.netangularjsauthenticationasp.net-web-api

Issue: Unidentified source / Utilizing controller within factory

Is there a way to access AuthenticationCtrl in this code snippet? Snippet: app.factory( 'AuthenticationInterceptor', function( $q, $injector ) { return { response: function (response) { // Skip the success. ...

angularjs

Include a new row in the form that contains textareas using PHP

I'm trying to add a new row to my form, but I'm facing challenges. When I click the add button, nothing happens. If I change the tag to , then I am able to add a row, but it looks messy and doesn't seem correct to me. Here is my JavaScript ...

javascriptphphtmlformsrow

Div keydown event not being triggered in Vue

I've been struggling to get my event to fire despite following the instructions in the title. @keydown="keyPressed($event)" Although currently it looks like this, I have also attempted setting the tabIndex and adding it on mount as shown be ...

javascriptvue.js

Transferring data from jQuery Ajax to PHP

I'm facing a challenge in retrieving a value back to PHP that I can manipulate and save to the database. It appears that using the GET method with jQuery AJAX is not yielding the desired results. Below is the PHP code snippet where I attempt to captur ...

phpjavascriptjqueryajax

Eliminate incorrect or invalid state when resetting a dropdown in an Angular ng-select component

I have integrated the ng-select plugin into my Angular project for handling dropdowns. One specific requirement I have is to reset the second dropdown when the first dropdown is changed. Below is a snippet of the code: <ng-select [items]="branchMo ...

javascriptangular

Is there a way for me to come back after all child http requests have finished within a parent http request?

I am currently utilizing an API that provides detailed information on kills in a game. The initial endpoint returns an ID for the kill event, followed by a second endpoint to retrieve the names of both the killer and the killed player. Due to the structur ...

javascriptasynchronous

What is the best way to organize properties within the Class Variance Authority?

Can the following be achieved in CVA? const mathPanelVariants = cva( 'relative mt-[100px] w-full rounded-sm border-l-[3px] px-[24px] py-[16px]', { variants: { variant: { theorem: { box: 'border-l-[#617bff] dark:bg-[#182 ...

javascriptreactjs

Delete the placeholder image from a div once live content has been inserted into it

If I have a container div that displays an image when empty, but I want to remove the image when content is dynamically added to the container, what would be the most effective way to do this with jQuery? The usual method of checking if the container' ...

javascriptjqueryhtmlcss

Tips for configuring formik values

index.js const [formData, setFormData] = useState({ product_name: 'Apple', categoryId: '12345', description: 'Fresh and juicy apple', link: 'www.apple.com' }); const loadFormValues = async () => { ...

javascriptreactjsreact-reduxformikyup

What is the best way to link options from a select directive with a different array?

Update: the working jsfiddle can be found here: http://jsfiddle.net/robertyoung/jwTU2/9/ I'm in the process of developing a webpage/app using AngularJS. The specific functionality I aim to achieve involves allowing users to add a row to the timecard ...

javascriptangularjsangularjs-directive

I am interested in extracting information from a public Facebook post

Is it possible to scrape or utilize the FB API to retrieve data from a public profile's wall post? By inspecting the element on the URL, you can see most of the data as well as the ajax calls for infinite scrolling on the wall. How could one go about ...

javascriptphpfacebookfacebook-graph-apiweb-crawler

Mastering the ng-submit directive for AngularJS

Having an issue with my form that submits a location to Google's Geocoder and updates the map with the lat/long. When using ng-click on the icon, it requires double clicking to work properly. And when using ng-submit on the form, it appends to the URL ...

javascriptangularjsformsangularjs-ng-clickng-submit

Tips for modifying CSS when a user scrolls beyond a specific div

Currently, I am working on implementing a scroll function that dynamically moves elements based on the user's scrolling behavior. The code I have written works to some extent and successfully moves the elements. However, my goal is to create a list o ...

javascriptjqueryhtmlcss

How to link a CSS file from a JavaScript file

I have a form for users with fields for first name, last name, password, and confirm password. I've implemented validation to check if the password and confirm password fields match using JavaScript: $(document).ready(function() { $("#addUser").cl ...

javascriptjavacssjspstyles

Unpacking JSON Objects in Typescript: Working with Private Variables

I have a TypeScript model object called user export class User { constructor( private _name: string, private _email: string ) {} public get name():string { return this._name; } public set name(value:string) { this._name = value; } g ...

javascriptjsontypescriptlocal-storage