У меня есть эта директива:
/*html, enclosed in a ng-repeat directive*/
<textarea name="alternativaHtml" id="questao_alternativa_{{$index}}" data-ng-model="alternativa.TextoHtml" data-ck-editor></textarea>
/*javascript*/
angular
.module("fluxo_itens.directives")
.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: {
"post": PostLink
}
};
}]);
function PostLink($scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(attr.id);
ck.on('pasteState', function () {
$scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
}
проблема в том, что, когда CKEDITOR пытается создать экземпляр редактора, он не может найти элемент, у которого есть свойство id, генерируемое динамически.
Проблема заключалась в том, что CkEditor не смог найти элемент, потому что идентификатор элемента не был установлен в DOM. Поэтому я полагался на jQuery, чтобы установить свойство элемента DOM, чтобы CkEditor мог найти текстовое поле. Я изменил это в функции PostLink
var ck = CKEDITOR.replace(attr.id);
к этому:
$(elm).attr("id", attr.id).prop("id", attr.id);
var ck = CKEDITOR.replace(elm[0].id);
Теперь все работает нормально
Просто гадать, но вы можете попробовать это:
<textarea name="alternativaHtml" id="questao_alternativa_{{$index}}" data-ng-model="alternativa.TextoHtml" data-ck-editor editor-id="questao_alternativa_{{$index}}"></textarea>
директива
angular
.module("fluxo_itens.directives")
.directive('ckEditor', [function () {
return {
scope : {
'editorId' : '='
}
require: '?ngModel',
link: {
"post": PostLink
}
};
}]);
PostLink
function PostLink($scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace($scope.editorId);
ck.on('pasteState', function () {
$scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
}