代码之家 › 专栏 › 技术社区 › Peshraw H. Ahmed

AngularJS:Tinymce在MD对话框中不工作

angularjs-material material-design tinymce angularjs javascript

Peshraw H. Ahmed · 技术社区 · 8 年前

我正在和安古拉吉斯合作一个项目。它工作得很好。我用的是安格拉尔材料和Tinymce。两种方法都可以。

但每当我试图在材质对话框MD对话框中创建Tinymce时。Tinymce不可编辑。只是冻死了。

我找到了 this . 但没有帮助。

我重新提出了普朗克的问题。这是普朗克的密码

https://plnkr.co/edit/33tasB4zwQOH787PvSWD?p=preview

我的对话框是预渲染的。这是我的真实代码:

视图.html

<md-button type="button" ng-click="vm.showAddDialog($event)" class="md-raised md-primary">
  <md-icon>add</md-icon> Ekle
</md-button>
<div style="visibility: hidden">
  <div class="md-dialog-container" id="addQuestion">
    <md-dialog layout-padding>
      <h4>Soru Ekle {{vm.newQuestion}}</h4>
      <div ng-if="vm.isLoading" layout="row" layout-align="center center">
        <md-progress-circular md-diameter="90"></md-progress-circular>
      </div>
      <div ng-if="!vm.isLoading">

        <div layout="column" style="width:750px">
          <md-input-container class="md-block" style="margin:0">
            <label>Soru</label>
            <textarea ng-model="vm.newQuestion.question" style="height: 75px !important;overflow-y: scroll;" class="md-line-10"></textarea>
          </md-input-container>
          <textarea ui-tinymce="vm.tinymceOptions" ng-model="vm.newQuestion.answer" aria-label="Answer" style="height: 100px; overflow-y: scroll; border: 1px solid #f1f1f1; outline: none;"
                class="md-line-10"></textarea>

        </div>
        <div layout="row" layout-align="end start">
          <md-button ng-click="vm.hideAddDialog()" md-noink class="md-primary">Kapat</md-button>
          <md-button ng-click="vm.saveCategory()" class="md-raised md-primary">Kaydet</md-button>
        </div>
      </div>
    </md-dialog>
  </div>
</div>

内部控制器.js

...
vm.tinymceOptions = {
  plugins: 'link image media code textcolor colorpicker lists advlist',
  toolbar: 'formatselect | undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright | numlist bullist outdent indent | code | fontselect | fontsizeselect',
  image_advtab: true,
  language_url: ic.CDN + '/assets/tiny-langs/langs/tr.js',
  onBlur: function () { }
};
...
vm.showAddDialog = function(ev) {
  $mdDialog.show({
    contentElement: '#addQuestion',
    parent: angular.element($window.document.querySelector('body')),
    targetEvent: ev,
    clickOutsideToClose: false
  });
}

1 回复 | 直到 8 年前

Brad1141 8 年前

您需要一个模板和控制器,而不是ContentElement。要修复Plugker,请用此代码替换index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS material-sidenav Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.13/tinymce.min.js" integrity="sha256-t4dpNoDZ4N2yIKa2i9CJhjzQKEwpO7C33fZ1XdN+gTU=" crossorigin="anonymous"></script>
  <script data-require="angular.js@1.3.13" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js" data-semver="1.3.0-rc.5"></script>
  <script data-require="angular-aria@1.3.13" src="https://code.angularjs.org/1.7.2/angular-aria.js" data-semver="1.3.0-rc.5"></script>
  <script data-require="angular-animate@1.3.13" src="https://code.angularjs.org/1.7.2/angular-animate.js" data-semver="1.3.0-rc.5"></script>
  <script src="https://hammerjs.github.io/dist/hammer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-tinymce/0.0.19/tinymce.js" integrity="sha256-yMo8Z3ceGwgCGY4pKRqnKsSevgfZXftzHIy/TflrgyQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</head>


<body ng-controller="AppCtrl">
  This one works
  <form method="post">
    <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
  </form>
  <md-button class="md-primary md-raised" ng-click="showPrerenderedDialog($event)">
    Click Me! This one is not working
  </md-button>
  <script type="text/ng-template" id="myDialog.html" >
    <md-dialog layout-padding>
        We are unable to edit tinymce inside md-dialog!!
        <form method="post">
          <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>
        </form>
      </md-dialog>

  </script>

</body>

</html>

然后,用此代码替换app.js

angular.module('app', ['ngMaterial', 'ui.tinymce'])
  .controller('AppCtrl',
    function($scope, $mdDialog) {
      $scope.showPrerenderedDialog = function(ev) {
        $mdDialog.show({
          //using controller and templateUrl
          controller: ['$scope', '$mdDialog', TinyController],
          templateUrl: 'myDialog.html',
          parent: angular.element(document.body),
          targetEvent: ev,
          clickOutsideToClose: true
        });
      };
      $scope.tinymceModel = '';

      $scope.tinymceOptions = {
        plugins: 'link image code',
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
      };
    })

    //controller for our TinyMCE
    function TinyController($scope, $mdDialog) {
      $scope.tinymceOptions = {
        plugins: 'link image code',
        toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
      };
    }

有关更多信息,我建议您退房。 this 堆栈溢出问题。

我还用固定的密码做了一个抢劫犯 here 我希望这有帮助!