Using CKeditor inside modal from angularjs ui bootstrap

Question

I'm trying to use CKEditor inside a Modal but I'm getting "TypeError: Cannot read property 'getEditor' of undefined".

this is the code:

details.html

<html>
  <head>...</head>
  <body>
  ...
  <button class="btn btn-single btn-orange pull-left" title="Consultar Documento" ng-click="consultTemplate(template)">Consultar</button>
  ...
</html>

detailsController.js

function editModal(template) {
  var modalInstance = $modal.open({
     templateUrl: 'partials/modals/editTemplate.html',
     controller: 'modalEditTemplateController',
     windowClass: 'app-modal-windowCKEDITOR',
     resolve: {
         template: function () {
         return template;
         }
     }
  });
}

$scope.consultTemplate = function(template)
{
  var url = ...;
  $http.get(baseUrl + url).success(function (data, status, headers, config){
      editModal(data);
  })
}

modalEditTemplateController.js

myApp.controller('modalEditTemplateController', function ($scope, $modalInstance, template) {

console.log($("#editorDeTemplates"));

CKEDITOR.replace('editorDeTemplates', {
    width: 1100,
    height: 400,
});

CKEDITOR.instances.editorDeTemplates.setData(template.texto);


$scope.voltar = function()
{
    $modalInstance.close();
}


});

editTemplate.html

<div class="modal-body">
<textarea id="editorDeTemplates" name="editorDeTemplates" class="ckeditor"></textarea>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">Ok</button>
  <button class="btn btn-gray pull-left" ng-click="voltar()"><i class="fa-angle-left"></i> Voltar</button>
</div>

The console.log inside the modalEditTemplateController.js is printing the element but the CKEditor.replace(...) is throwing the error "TypeError: Cannot read property 'getEditor' of undefined"...

Why does the CKEditor don't recognize the editorDeTemplates?

score 0 · Answer 1 · edited May 23 '17 at 12:06

The error Cannot read property 'getEditor' of undefined means that CKEditor is unable to find #editorDeTemplates element in DOM.

It could be that due to asynchronous behaviour of console.log, what is loogged is actually a DOM state in the future so at the moment of CKEDITOR.replace(), there is no such element yet.

You can easily verify it this way:

myApp.controller('modalEditTemplateController', function ($scope, $modalInstance, template) {

var element = CKEDITOR.document.getById( 'editorDeTemplates' );

// It does not matter when the element is logged (sync or async) as long as
// it is a CKEDITOR.element referenced by variable.
console.log( element );

CKEDITOR.replace('editorDeTemplates', {
    width: 1100,
    height: 400,
});

If element is undefined, then you have to ensure that CKEditor initialization process is deferred until DOM is truly ready.

Using CKeditor inside modal from angularjs ui bootstrap

1 Answers1