使用CKeditor內部模態從angularjs ui引導

我想在模態中使用CKEditor，但我得到「TypeError：無法讀取未定義的屬性'getEditor'」。使用CKeditor內部模態從angularjs ui引導

這是代碼：

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>

的modalEditTemplateController.js內的執行console.log正在打印的元素，但CKEditor.replace(...)拋出錯誤「類型錯誤：無法讀取屬性未定義 'getEditor'」。 ..

爲什麼CKEditor不識別editorDeTemplates？

來源

2015-04-06 NunoRibeiro

錯誤Cannot read property 'getEditor' of undefined意味着CKEditor無法在DOM中找到#editorDeTemplates元素。

它可能是由於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是真正準備好。

查看更多about document.getById。

編輯：你也可能會發現this有用的未來。

來源

2015-04-07 07:59:20 oleq

使用CKeditor內部模態從angularjs ui引導

回答

相關問題