Tinymce does not work in angularjs mdDialog

Question

I am trying to use the TinyMCE editor in angularjs mdDialog.
Worling Plukr: http://embed.plnkr.co/s3NsemdcDAtG7AoQRvLh/

Plunkr with problems: http://embed.plnkr.co/fL8kGLl3b4TNdxW1AtKG/

All functions work fine, but don't open: http://prntscr.com/fop9u0
 It works great if I increase the top drop position by about 100 pixels. http://prntscr.com/fope8o
I noticed that this problem occurs due to page scrolling.

Can someone help me to get these dropdowns in the correct position.

Answer 1

There is a problem calculating the top position, it can be fixed by adding the code below to the app.js file in `

$scope.addMoreInfoFunction = function(event) {
        setTimeout(function() {
            $('.mce-btn').on('click', function() {
                var bodyTop = $('body').offset().top;
                if (bodyTop < 0) {
                    setTimeout(function() {
                        var top = parseInt($('#mceu_50').css('top'));
                        var newTop = top / 2 - bodyTop - 30;
                        $('#mceu_50').css('top', newTop);
                        console.log(newTop);
                    }, 300);
                }
            });
        }, 300);
        $mdDialog.show({
            controller: ['$scope', '$mdDialog', DialogAddMoreInfoController],
            templateUrl: 'addMoreInfo.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: event,
            clickOutsideToClose: true
        });
        };
        });

`

The calculation may be fixed, let me know if it helps

Answer 2

A conflict from CSS can be a forced margin for all divs. Thus, it is more an integration problem than a tinymce error. We have several reset rules to resolve common conflicts.

   <style>
   .mce-tooltip
  {
    position: fixed !important;
  }
  .mce-panel.mce-floatpanel.mce-menu 
  {
    position: fixed !important;
  }
    </style>

Run codeHide result

Doesn't work great. But it can help you do something.