CODEWITHSUNDEEP
javascripthtmlangularjstinymce
om_jaipur
om_jaipur

Reputation: 2196

Tinymce not working in angularjs mdDialog

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


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

All features are working normally instead of drop down: http://prntscr.com/fop9u0
It works fine if I increase the top position of drop down around 100px. http://prntscr.com/fope8o
I noticed that this problem appearing due to page scroll..

Can someone help me out to get these drop downs in right position.

Upvotes: 4

Views: 402

Answers (2)

gusaindpk
gusaindpk

Reputation: 1253

There is a top position calculation issue, It can be fixed adding below code in 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
        });
        };
        });

`

Calculation can be corrected, let know if it helps

Upvotes: 3

thangavel .R
thangavel .R

Reputation: 466

A CSS conflict possible a forced margin on all divs. So this is more of a integration issue than a tinymce bug. We have a few reset rules to remove the common conflicts.

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

Its not working perfectly. But it might help you to do something.

Upvotes: 1

Related Questions