Search code examples
javascriptangularjstinymcematerial-designangularjs-material

Angularjs: Tinymce is not working inside md-dialog

I am working on a project with angularJs. It is working fine. I am using Angularjs Material and tinymce. Both also works fine.

But whenever I try to create tinymce inside a material dialog md-dialog. The tinymce is not editable. It is just freezing.

I found this. But did not help.

I regenerated the problem on plunkr. Here is the code on plunkr

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

My dialog is pre-rendered. and here is my real code:

view.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>

inside controller.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
  });
}
Solution

  • You need a template and controller instead of contentElement. To fix the plunker, replace index.html with this code

    <!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>

    Then, replace the app.js with this code

    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'
      };
    }

    For more information I would recommend checking out this Stack Overflow question.

    I also made a plunker with the fixed code here, I hope this helps!