Angularjs: Tinymce не работает внутри md-диалога - PullRequest
Новая
       23

Angularjs: Tinymce не работает внутри md-диалога

0 голосов
/ 02 июля 2018

Я работаю над проектом с angularJs. Работает нормально. Я использую Angularjs Material и tinymce. Оба тоже отлично работают.

Но всякий раз, когда я пытаюсь создать tinymce внутри md-диалогового окна материала. Крошка не редактируется. Просто замерзает.

Я нашел это . Но не помогло.

Я регенерировал проблему на планкре. Вот код на планкр

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

Мой диалог предварительно обработан. и вот мой реальный код:

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

1 Ответ

0 голосов
/ 04 июля 2018

Вам нужен шаблон и контроллер вместо contentElement. Чтобы исправить плункер, замените 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'
      };
    }

Для получения дополнительной информации я бы рекомендовал проверить этот вопрос переполнения стека.

Я также сделал поршень с фиксированным кодом здесь , надеюсь, это поможет!

...