Использование CKeditor внутри модального из angularjs ui bootstrap

Я пытаюсь использовать CKEditor внутри модального, но я получаю «TypeError: Не могу прочитать свойство« getEditor »неопределенного».Использование CKeditor внутри модального из angularjs ui bootstrap

это код:

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>

console.log внутри modalEditTemplateController.js печатает элемент, но CKEditor.replace(...) бросает ошибку "TypeError: Не удается прочитать свойство 'GetEditor' неопределенных". ..

Почему CKEditor не распознает editorDeTemplates?

источник

2015-04-06 NunoRibeiro

Ошибка Cannot read property 'getEditor' of undefined означает, что CKEditor не может найти #editorDeTemplates элемент в DOM.

Это может быть, что из-за asynchronous behaviour of console.log, что loogged на самом деле состояние DOM в будущем, в момент CKEDITOR.replace(), нет такого элемента пока нет.

Вы можете легко проверить это следующим образом:

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

Если element является undefined, то вы должны убедиться, что процесс инициализации CKEditor откладывается до тех пор, пока DOM действительно готов.

Подробнее о document.getById.

Редактировать: Вы также можете найти this полезным в будущем.

источник

2015-04-07 07:59:20 oleq

Использование CKeditor внутри модального из angularjs ui bootstrap

ответ

Смежные вопросы