Tinymce 在 angularjs mdDialog 中不起作用答案

【问题标题】：Tinymce not working in angularjs mdDialogTinymce 在 angularjs mdDialog 中不起作用
【发布时间】：2017-06-27 11:24:37
【问题描述】：

我正在尝试在 angularjs mdDialog 中使用 TinyMCE 编辑器。
工作 Plukr：http://embed.plnkr.co/s3NsemdcDAtG7AoQRvLh/

Plunkr 有问题：http://embed.plnkr.co/fL8kGLl3b4TNdxW1AtKG/

所有功能都正常工作，而不是下拉： http://prntscr.com/fop9u0
如果我将下拉菜单的顶部位置增加 100 像素左右，效果很好。 http://prntscr.com/fope8o
我注意到由于页面滚动而出现此问题..

谁能帮我把这些下拉菜单放在正确的位置。

【问题讨论】：

用 Plunker 重现问题会更容易回答
重新表述@KScandrett 所说的话。 不可能在没有任何代码的情况下为您提供帮助。
嗨@KScandrett 和“gforce301”，我已经通过添加 plunkr 编辑了我的问题。
@om。正如我看到在正文标签处添加了一些样式。你可以添加一个 css hack .md-dialog-is-showing { position: relative !important; top: auto !important; } ，通过添加这个你需要向上滚动，一旦弹出窗口打开。
@om 为什么要在顶部添加正文样式似乎是一个负值。是微小的 mce 正在添加这个还是你正在添加它？可能的解决方法是将相同的主体顶部（正值）添加到弹出顶部。但它不干净

标签： javascript html angularjs tinymce

【解决方案1】：

有一个top position计算问题，可以在app.js文件中添加以下代码来修复 `

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

计算可以更正，如果有帮助请告知

【讨论】：

@om 你试过解决方案了吗？

【解决方案2】：

CSS 冲突可能会在所有 div 上强制设置边距。所以这更像是一个集成问题，而不是一个 tinymce 错误。我们有一些重置规则来消除常见的冲突。

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

它工作不完美。但它可能会帮助你做一些事情。

【讨论】：