Custom configuration from scope variable not working

[neekers]

When I use an actual scope to insert the configuration options for uiTinymceConfig in tinymceOptions and it doesn't work unless I put the object INLINE in the directive. Anyone else seeing this? I'm using Angular 1.2.26 and my options are being fed in on instantiation of the directive, but I can confirm that it's not being parsed.

This line doesn't eval right away with my inputted in values. If I put a $timeout of 100ms around it, it then evaluates correctly.

scope.$eval(attrs.uiTinymce));

Anyone else having this issue? I need to add a color picker and other stuff here, but I don't see a working example of this functionality, just sample code.

Thanks

[klinkiap]

I have the same problem. I'm using default configuration (set using angular.value('uiTinymceConfig') but I need to overwrite it in one case.

[sato-sh]

Same issue. It seems to be due to the fact that in certain situations the attribute for uiTinymce options doesn't eval immediately, the current code looks like this:

        expression = {};

        angular.extend(expression, scope.$eval(attrs.uiTinymce));

        options = {
                   //predefined options
                    .....
        };
        // extend options with initial uiTinymceConfig and
        // options from directive attribute value
        angular.extend(options, uiTinymceConfig, expression);

        // Wrapped in $timeout due to $tinymce:refresh implementation, requires
        // element to be present in DOM before instantiating editor when
        // re-rendering directive
        $timeout(function() {
          tinymce.init(options);
          toggleDisable(scope.$eval(attrs.ngDisabled));
        });

So when the above $timeout method is fired "options" won't contain your custom options as "expression" has already been evaluated as undefined.

The workaround that seems to work for my case: move the $eval and extend calls into the $timeout also.

        expression = {};

        options = {
                    //predefined options
                     .....
         };

        // Wrapped in $timeout due to $tinymce:refresh implementation, requires
        // element to be present in DOM before instantiating editor when
        // re-rendering directive
        $timeout(function() {         
          angular.extend(expression, scope.$eval(attrs.uiTinymce));          
          angular.extend(options, uiTinymceConfig, expression);
          tinymce.init(options);
          toggleDisable(scope.$eval(attrs.ngDisabled));
        });

[deeg]

I have this issue as well, +1 for fix.

[deeg]

As a short term solution for people having this issue, you can wrap the usage of ui-tinymce in a parent element which has an ng-if watching the scope variable which contains your options.

Not a good solution but a short term hack...

[gartner]

I was hit by this too.
My own options, set in the scope, was not applied. Adding an ng-if="tinymceOptions" to the tag with the ui-tinymce would make my options work.
But when doing that, the text I entered into tinyMce editor, would not get back to the model, it would keep on remembering the initial value.

But placing the two angular.extend(..) calls inside $timeout() as suggested by https://github.com/sato-sh earlier in this thread, seems to fix the problem.
I cannot, however, see if there is any side-effects by this.

[Jony-Y]

Im still having this issue... using ui-tinymce 0.16 trying to set the options inside my directive

angular.module('lcms.directive').directive('tinyMce', function() {
    return {
        scope: {
            ngModel: '=ngModel',
            name: '@name',
            uploadUrl: '@uploadUrl',
            options: '=options'
        },
        require: 'ngModel',
        replace: true,
        link: function(scope, element, attrs) {
            if (!scope.uploadUrl) {
                scope.uploadUrl = '/images/blog/';
            }
                scope.tinymceOptions = {
                                       //optinos here
                                       }
                };
        },
        template: '<div ui-tinymce="tinymceOptions" class="tinymce"></div>',
    };
});

any idea what Im doing wrong?

tried with ng-if and did not help, also added timeout and nothing